StartupNameGenerator

app.component.scss

#header {
    position: relative;
    padding: 5px;
    height:30vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  
    h1 {
      font-size: 2.5rem;
      letter-spacing: 3px;
      color: #ffffff;
      font-weight: normal;
  
      @media (max-width: 860px) {
        font-size: 2rem;
      }
  
      @media (max-width: 599px) {
        font-size: 1.3rem;
      }
    }
  }
  
  i {
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }
  
  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
  
  .item {
    height: 30px;
  }
  

  .card {
    padding: 20px;
    border-radius: 15px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  
    &:hover {
      box-shadow: 0 0 40px #ffff00 !important;
  
      h3 {
        color: #ffff00;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  
    h3 {
      font-size: 1.2rem;
      font-weight: normal;
      color: #fff;
      letter-spacing: 3px;
      line-height: 1.5;
      -moz-osx-font-smoothing: grayscale;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-transition: -webkit-transform 0.25s ease-out;
      transition: -webkit-transform 0.25s ease-out;
      transition: transform 0.25s ease-out;
      transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
  
      @media (max-width: 899px) {
        font-size: 0.9rem;
      }

      @media (min-width: 499px) {
        font-size: 0.7rem;
      }
    }
  }
  
  .grow {
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 0.25s ease-out;
    transition: -webkit-transform 0.25s ease-out;
    transition: transform 0.25s ease-out;
    transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
  
    &:hover {
      -webkit-transform: scale(1.02);
      transform: scale(1.02);
    }
  }

.card2{
    background: radial-gradient(rgba(176, 24, 93, 0.4), rgb(57, 57, 63));
    box-shadow: rgba(176, 24, 93, 0.4) 0px 0px 60px;
    color:#fff;
  }
.form-card{
    background: radial-gradient(rgba(171, 42, 205, 0.4), rgb(57, 57, 63));
    box-shadow: rgba(171, 42, 205, 0.4) 0px 0px 60px;
    height: 45px;
    color: #fff;
  }

.button{  
    background: radial-gradient(rgba(9, 202, 209, 0.4), rgb(57, 57, 63));
    box-shadow: rgba(9, 202, 209, 0.4) 0px 0px 60px;
    border: 1px #fff;
    color:#fff;
    border-style: solid;
    border-color: rgba(106, 199, 171, 0.541);
    @media (min-width: 499px) {
      font-size: 0.7rem;
    }
  }
.top-Margin{
  margin-top: 20px;
  }

.logo{
    margin-top: 5px;
    margin-bottom:40px;
    text-align:center;
  }

.logo-img{
    width: 110px;
    height: 110px;
  }

.result-top{
  color:#fff;
  text-transform: lowercase;
  margin: 10px;
  text-shadow: 0 0 40px #ffff00 !important;
  }

.sticky-container {
padding:20px;
padding-right: 3px;
position: fixed;
top: 50%;
right: 0px;
height: auto;
z-index: 9999;
margin-top: 0px;
text-align: center;  
}


.testbutton {
  width: 150px;
  height:50px;
  border-radius:180px;
  position:relative;
  left:calc(50% - 75px);
  top:calc(50% - 25px);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  cursor:pointer;
  line-height:12px;
}

.testbutton:before {
  content:'';
  z-index:1;
  position:absolute;
  display:block;
  width:80%;
  height:70%;
  top:15%;
  left:10%;
  transition: 0.3s opacity ease-in-out;
  filter:blur(15px);
  opacity:0;
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
}

.testbutton:hover:before {
  opacity:1;
  transition: 0.3s opacity ease-in-out;
  filter:blur(25px);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);  
}

.testbutton:after {
  content:'Install';
  text-align:center;
  line-height:40px;
  font-size:18px;
  color:rgba(235,235,235,1);
  font-weight:bold;
  z-index:5;
  position:absolute;
  display:block;
  border-radius:180px;
  width:92%;
  height:80%;
  top:10%;
  left:4%;  
  background-color:rgb(19, 20, 22);
}