/* CSS styles for the coming soon page */
@import url('https://fonts.googleapis.com/css2?family=Anta&display=swap');

/* Resetting default styles and box model */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styling body to hide overflow */
body{
    overflow: hidden;
}

/* Main container styling */
.container{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Heading styling */
h1{
    font-family: "Anta", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 60px;
    margin-top: -30px;
}

/* Image styling */
.img{
    width: 50%;
    height: auto;
}

/* Button styles for the form */
/* Button */

input, button {
    font-family: "Nunito", sans-serif;
  }
  
  main, form {
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 0.55;
    margin-top: -80px;
  }
  main input, form input {
    width: 500px;
    height: 166.6666666667px;
    background: #ff735c;
    border: none;
    border-radius: 133.3333333333px;
    color: #fff;
    font-size: 41.6666666667px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 100px;
    outline: none;
    cursor: pointer;
    transition: all 250ms;
    position: relative;
  }
  main input[readonly], form input[readonly] {
    cursor: not-allowed;
  }
  main input:invalid, form input:invalid {
    box-shadow: none;
  }
  main input::-moz-placeholder, form input::-moz-placeholder {
    color: #fff;
    text-align: center;
    opacity: 1;
  }
  main input:-ms-input-placeholder, form input:-ms-input-placeholder {
    color: #fff;
    text-align: center;
    opacity: 1;
  }
  main input::placeholder, form input::placeholder {
    color: #fff;
    text-align: center;
    opacity: 1;
  }
  main input:not(.active):not(:-moz-read-only):hover, form input:not(.active):not(:-moz-read-only):hover {
    opacity: 0.9;
  }
  main input:not(.active):not(:read-only):hover, form input:not(.active):not(:read-only):hover {
    opacity: 0.9;
  }
  main input.active, form input.active {
    cursor: initial;
    width: 1115px;
    left: 166.6666666667px;
    padding: 10px 357.1428571429px 10px 100px;
  }
  main input.active::-moz-placeholder, form input.active::-moz-placeholder {
    text-align: left;
  }
  main input.active:-ms-input-placeholder, form input.active:-ms-input-placeholder {
    text-align: left;
  }
  main input.active::placeholder, form input.active::placeholder {
    text-align: left;
  }
  main input.active + button, form input.active + button {
    display: block;
    font-weight: 100;
  }
  main input.expand, form input.expand {
    -webkit-animation: expand 1s forwards ease-out;
            animation: expand 1s forwards ease-out;
  }
  @-webkit-keyframes expand {
    0% {
      width: 500px;
    }
    10% {
      width: 1200px;
    }
    35% {
      width: 1100px;
    }
    50% {
      width: 1120px;
    }
    100% {
      width: 1115px;
    }
  }
  @keyframes expand {
    0% {
      width: 500px;
    }
    10% {
      width: 1200px;
    }
    35% {
      width: 1100px;
    }
    50% {
      width: 1120px;
    }
    100% {
      width: 1115px;
    }
  }
  main input.collapse, form input.collapse {
    -webkit-animation: collapse 1s forwards ease-out;
            animation: collapse 1s forwards ease-out;
  }
  @-webkit-keyframes collapse {
    0% {
      width: 1115px;
    }
    10% {
      width: 384.6153846154px;
    }
    35% {
      width: 515px;
    }
    50% {
      width: 490.1960784314px;
    }
    100% {
      width: 500px;
    }
  }
  @keyframes collapse {
    0% {
      width: 1115px;
    }
    10% {
      width: 384.6153846154px;
    }
    35% {
      width: 515px;
    }
    50% {
      width: 490.1960784314px;
    }
    100% {
      width: 500px;
    }
  }
  main input + button, form input + button {
    display: none;
  }
  main button, form button {
    width: 333.3333333333px;
    height: 142.8571428571px;
    background: #1a2e35;
    border: 0;
    border-radius: 133.3333333333px;
    position: relative;
    left: -178.5714285714px;
    color: #fff;
    font-size: 41.6666666667px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    z-index: 2;
  }

  @media (min-width:1000px) {
    .img { width: 25%;}
  }

  @media (max-width:767px) {
    .img { width: 90%;}
    h1 {font-size: 40px;margin-top: -20px;}
  }