@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@500&display=swap');

  body {
      overflow-x: hidden;
      margin: 0px;
      padding: 0px;
      width: 100%;
      scroll-behavior: smooth;
      height: 20in;
      background-color: rgb(255, 255, 255);
  }

  .bgvid {
      width: 100%;
      display: block;
      height: 100%;
      overflow: hidden;
      object-fit: cover;
      top: 2cm;
      filter: brightness(90%);
      left: 0px;
      position: absolute;
  }

  header {
      background-color: rgb(0, 0, 0);
      height: 2cm;
      position: sticky;
      z-index: 99;
  }



  .logo {
      width: 3cm;
      height: 2cm;
      position: absolute;
      object-position: center;
      left: 17.7cm;
      z-index: 10;
      justify-content: center;
      top: 0px;
      right: 50%;
      display: flex;
  }

  .nissan {
      font-family: 'Quicksand', sans-serif;
      display: inline-block;
      padding: 0px;
      height: 2cm;
      z-index: 99;
      margin: 0px;
      font-weight: 400;
      left: 0.5cm;
      position: absolute;
      top: 25px;
      text-decoration: none;
      color: white;
  }

  .Supra {
      font-family: 'Quicksand', sans-serif;
      display: inline-block;
      padding: 0px;
      margin: 0px;
      z-index: 99;
      font-weight: 400;
      left: 4.0cm;
      position: absolute;
      top: 25px;
      text-decoration: none;
      color: white;
  }

  .civic {
      font-family: 'Quicksand', sans-serif;
      display: inline-block;
      padding: 0px;
      margin: 0px;
      font-weight: 400;
      left: 6.1cm;
      z-index: 99;
      position: absolute;
      top: 25px;
      text-decoration: none;
      color: white;
  }

  .mazda {
      font-family: 'Quicksand', sans-serif;
      display: inline-block;
      padding: 0px;
      margin: 0px;
      font-weight: 400;
      left: 8.1cm;
      z-index: 99;
      position: absolute;
      top: 25px;
      text-decoration: double;
      color: white;
  }

  .login {
      font-family: 'Quicksand', sans-serif;
      display: inline-block;
      padding: 0px;
      margin: 0px;
      font-weight: 400;
      left: 34cm;
      z-index: 99;
      position: absolute;
      top: 25px;
      text-decoration: none;
      color: white;
  }

  .register {
      font-family: 'Quicksand', sans-serif;
      display: inline-block;
      padding: 0px;
      margin: 0px;
      font-weight: 400;
      left: 36cm;
      z-index: 99;
      position: absolute;
      top: 25px;
      text-decoration: none;
      color: white;
  }



  .rev::before {
      transform: scaleX(0);
      transform-origin: bottom right;
  }

  .rev:hover::before {
      transform: scaleX(1);
      transform-origin: bottom left;
  }

  .rev::before {
      content: "";
      display: block;
      width: 10.6in;
      position: absolute;
      top: 0;
      text-decoration: none;
      right: 0;
      bottom: 0;
      left: 0;
      inset: 0 0 0 0;
      background: rgb(4, 3, 3);
      z-index: -1;
      transition: transform .5s ease;
  }

  .rev {
      position: relative;
      font-size: 100px;
      height: 2cm;
      width: 100%;
      color: white;
      text-decoration: none;
      top: 3in;
      padding-left: 2in;
      align-items: center;
      z-index: 99;
  }


  .rev {
      block-size: 100%;
      inline-size: 100%;
  }


  .revs {
      min-block-size: 100%;
      min-inline-size: 100%;
      margin: 0;
      z-index: 99;
      box-sizing: border-box;
      display: grid;
      place-content: center;
      font-family: Arial, Helvetica, sans-serif;
  }

  @media (orientation: landscape) {
      body {
          grid-auto-flow: column;
      }
  }

  .heading1 {
      display: inline-block;
      position: absolute;
      top: 10in;
      font-size: 1cm;
      left: 30px;
      font-family: 'Dosis', sans-serif;
      font-weight: 700px;
      margin: 40px;
      opacity: 0%;
      background-color: rgb(241, 221, 196);
      animation-name: heading1;
      animation-duration: 2s;
      animation-delay: 3s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      transition: all 1s ease-in-out;
  }

  @keyframes heading1 {
      from {
          opacity: 0%;
          top: 11in;

      }

      to {
          opacity: 100%;
          top: 10in;
      }
  }


  .para {
      position: relative;
      top: 6.2in;
      width: 45%;
      text-align: left;
      font-weight: 400;
      text-transform: capitalize;
      font-size: larger;
      word-spacing: 5px;
      left: 30px;
      border: 10px black;
      margin: 40px;
      display: inline-block;
      font-family: sans-serif;
  }

  .pinkimg {
      position: relative;
      top: 7.2in;
      width: auto;
      height: 4in;
      left: 2.5cm;
      opacity: 0%;
      border-radius: 10px;
      display: inline-block;
      animation-name: pinkani;
      animation-duration: 2s;
      animation-delay: 4s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      transition: all 1s ease-in-out;
      
  }

  .pinkimg:hover {
      transform: scale(110%);
      transition-duration: 3s;


  }

  @keyframes pinkani {
      from {
          opacity: 10%;
          left: 5cm;

      }

      to {
          opacity: 100%;
          left: 2.5cm;


      }
  }

  .heading2 {
      background-color: rgb(238, 182, 182);
      display: inline-block;
      position: absolute;
      top: 15.1in;
      font-size: 1cm;
      left: 8.3in;
      text-align: center;
      font-family: 'Dosis', sans-serif;
      font-weight: 700px;
      opacity: 0%;
      animation-name: heading2;
      animation-duration: 2s;
      animation-delay: 4s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      transition: all 1s ease-in-out;
      transition-delay: 3s;
  }

  @keyframes heading2 {
      from {
          opacity: 0%;
          top: 16in;

      }

      to {
          opacity: 100%;
          top: 15.1in;
      }
  }

  .para2 {
      position: relative;
      top: 6.5in;
      width: 40%;
      text-align: left;
      font-weight: 400;
      text-transform: capitalize;
      font-size: larger;
      left: 8.3in;
      display: inline-block;
      font-family: sans-serif;
  }

  .blackimg {
      position: relative;
      top: 8in;
      width: auto;
      height: 4in;
      right: 5.5in;
      border-radius: 10px;
      display: inline-block;
      animation-name: blackani;
      opacity: 0%;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      animation-delay: 3s;
      animation-timing-function: ease-in-out;
      transition: all 1s ease-in-out;
  }

  .blackimg:hover {
      transform: scale(110%);
      transition-duration: 3s;

  }

  @keyframes blackani {
      from {
          opacity: 0%;
          right: 6in;
      }

      to {
          opacity: 100%;
          right: 5.5in;
      }
  }

  .watch1 {
      background-color: rgb(255, 127, 80);
      font-family: "quicksand";
      font-style: bold;
      top: 30px;
      text-decoration: none;
      color: black;
      padding: 10px;
      position: relative;
  }

  .watch1:hover {
      background-color: rgb(241, 190, 158);
      font-family: "quicksand";
      font-style: bold;
      top: 30px;
      text-decoration: none;
      color: rgb(0, 0, 0);
      padding: 10px;
      transition: 1s;
      position: relative;
  }

  .watch2 {
      background-color: rgb(255, 100, 100);
      font-family: "quicksand";
      font-style: bold;
      font-weight: 800;
      top: 7.1in;
      right: 11.1cm;
      text-decoration: none;
      color: black;
      padding: 15px;
      position: relative;
  }

  .watch2:hover {
      background-color: rgb(247, 176, 176);
      color: black;
      transition: .5s;
  }

  .modhead {
      font-size: 6vh;
      font-family: "dosis";
      word-spacing: 3px;
      position: relative;
      display: block;
      text-align: center;
      margin: 0;
      top: 19em;
      font-weight: bolder;
  }

  .modhead::before {
      transform: scaleX(0);
      transform-origin: bottom right;
  }


  .modhead:hover::before {
      transform: scaleX(1);
      transform-origin: bottom left;
  }


  .modhead::before {
      content: "";
      display: block;
      width: 100%;
      position: absolute;
      top: 0;
      text-decoration: none;
      right: 0;

      left: 0;
      inset: 0 0 0 0;
      background: rgb(176, 230, 114);
      z-index: -1;
      transition: transform .5s ease-in-out;
  }

  .modhead:hover {
      transition-duration: 2s;
      transform: scale(110%);


  }

  .threecars {
      display: flex;
      height: 15cm;
      position: relative;
      top: 23cm;
      border: 10px 10px black;
      flex-direction: row;
      border: 2px rgb(0, 0, 0);
      margin: 0;
  }

  .edit1 {
      display: flex;
      width: 12cm;
      height: 13cm;
      align-items: center;
      padding-left: 5vh;
      justify-content: space-evenly;
      animation-name: edit1;
      opacity: 0%;
      animation-duration: 5s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      animation-delay: 4s;
      animation-timing-function: ease-in-out;
      transition: all 1s ease-in-out;

  }

  .edit1:hover {
      transition-duration: 3s;
      transform: scale(120%);


  }

  @keyframes edit1 {
      from {
          opacity: 0%;
          width: 1vh;

      }

      to {
          opacity: 100%;

      }
  }

  .username1 {
      font-size: 4vh;
      display: block;
      flex-direction: column;
  }

  .constrip {
      position: relative;
      top: 5.2in;
      z-index: -1;
  }

  .strip {
      background-color: #4599FE;
      height: 20px;
      padding: 0px;
      margin: 0px;
  }

  .strip1 {
      padding: 0px;
      background-color: #031E49;
      height: 20px;
      margin: 0px;

  }

  .strip2 {
      background-color: rgb(239, 9, 9);
      height: 20px;
      margin: 0px;
  }
  .details {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 20cm;
    padding: 0px;
    margin: 0px;
}

.detailpara {
    font-family: 'dosis';
    font-weight: 550;
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    animation-name: edit1;
    opacity: 0%;
    width:14cm;
    text-transform: uppercase;
    animation-duration: 5s;
    padding: 40px;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 4s;
    animation-timing-function: ease-in-out;
    transition: all 1s ease-in-out;
}

  .banner {
      padding: 0px;
      position: relative;
      top: 8.5in;
      display: flex;
      margin: 0px;
      height: 15rem;
      background: linear-gradient(to bottom,
              rgb(2, 2, 2) ,
              #080707);
  }

  .bannerimg {
      image-orientation: flip;
      position: relative;
      left: 50%;
      display: flex;
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      animation-name: rallycar;
      opacity: 0%;
      height:10cm;
      animation-duration: 2s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      animation-delay: 9s;
      animation-timing-function: ease-in-out;
      transition: all 1s ease-in-out;
  }
@keyframes rallycar {

    from{
        left: -10cm;
        opacity:20%;
    }

    to{
        left:21cm;
        opacity:100%;
    }
}

 .bannertitle{
    font-size: xx-large;
    font-family: 'quicksand';
    font-weight: 1000;
    color: white;;
    position: relative;
    text-align:center;
    right:13.5cm;
    /* text-shadow: 5px 5px 5px  white; */
 }
 .socials{
    display: flex;

 }
 
.instagram{
    position: relative;
    height: 50px;
    display: block;
    top:3.5cm;
    padding-left:60px;
     right:25cm;
    filter: invert(1);
}

.footer{
     height:3cm;
     position: relative;
     top:10in;
     padding: 0px;
     display: flex;
     margin: 0px;
    background-color: rgb(115, 113, 113);
}

.footerpara{
    display: flex;
    text-align: center;
    font-size: smaller;
    padding: 25px;
    line-height: .5cm;
    color: white;
    width: 10cm;
    padding-left: 100px;
    font-family: monospace;
    padding-left: 2cm;
    text-transform: uppercase;
    position: relative;
    left:13cm;
       
}