index.scss

@import url(https://fonts.googleapis.com/css?family=Roboto);
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: black !important;
  font-size: 62.5%;
}

a{
  text-decoration: none !important ;
}


.container{
   padding-top: 50px;
   padding-bottom: 20px;
   height: 100%;
   display: flex;
   flex-direction: column;

  
   @media screen  and (max-width:1024px) {
    padding-right: 100px;
   padding-left: 100px;
  }

  @media screen  and (max-width:768px) {
    padding-right: 50px;
    padding-left: 50px;
 }


 @media screen  and (max-width:576px) {
  padding-right: 20px;
  padding-left: 20px;
}
}


.header{
  width: 100%;
  background-color: transparent;
  height: 20px;
}


.logo_container{
   transform: translateY(10%);
   width: 100%;
   display: grid;
   grid-template-columns: repeat(3,1fr);
   justify-content: center;
   place-items: center;
   .logo{
     height: 240px;
     transform: translateX(20px); 
     @media screen  and (max-width:1024px) {
      height: 160px;
      transform: translateY(-20px);
    }
  
     @media screen  and (max-width:576px) {
      height: 130px;
      transform: translateY(-20px);
    }
  
     @media screen  and (max-width:376px) {
      height: 130px  ;
      transform: translateY(-20px);
    } 

   }
   @media screen  and (max-width:1024px) {
    transform: translateY(-10%);
  }
 
  
}

.social_link_container{
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-grow: 1;
   align-items: center;
   padding-left: 15%;
   padding-right: 15%;
  .social_link{
    color: white;
    transform: translateY(-20px);
    

   
   .mybtn{
    position: relative;
    border: none;
    cursor: pointer;
    font-family: 'courier';
    background-color: black;
    color: white;
    font-size: 2rem;
    padding: 10px 10px;
    &:before,
    &:after{
      display: block;
      content:"";
      position: absolute;
      background: white;
      z-index: -1;


      @media screen  and (max-width:1200px) {
        display: none;
      }


    }
    &:hover{
       color: white;
  
    }

    @media screen  and (max-width:1024px) {
       font-size: 1.5rem;
    }

    @media screen  and (max-width:576px) {
      font-size: 1.2rem ; 
    }

    
    @media screen  and (max-width:376px) {
      font-size: 1.3rem ; 
    }
   
    @media screen  and (max-width:300px) {
      font-size: 1.2rem ; 
    }

   }
  
      @media screen  and (max-width:1024px) {
        flex-direction: column;
        justify-content: space-evenly;
       
    }
    @media screen  and (max-width:376px) {
      transform: translateY(-5px);
    }
  }

  @media screen  and (max-width:1024px) {
      flex-direction: column;
      justify-content: space-evenly;
      transform: translateY(10px);
  }
  @media screen  and (max-width:420px) {
    flex-direction: column;
    justify-content: space-evenly;
    transform: translateY(0px);
}
  
}




.copyRight{
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  width: 100%;

  
  .w{
    text-align: end;
    
  }
   p{
     color: white;
     font-size: 1.3rem;
     font-family: 'courier';

    @media screen  and (max-width:1024px) {
      font-size: 1rem;
    }
    @media screen  and (max-width:576px) {
      font-size: .7rem ;  
    }
    @media screen  and (max-width:424px) {
      font-size: .6rem ;  
    }
    @media screen  and (max-width:300px) {
      font-size: .5rem ;  
    }
   }
   .invisible{
    @media screen  and (max-width:1024px) {
      display: none;
    }
   }
   @media screen  and (max-width:576px) {
    font-size: .7rem;
  }

  .legal{
    text-align: center;
    @media screen  and (min-width:1024px) {
       transform: translateX(30px);  
    }
  }

  @media screen  and (max-width:1024px) {
    grid-template-columns: 1fr;
    place-items: center;
    row-gap: 10px;
  }


}


.button--one {
  &:before {
    top: -0.1rem; bottom: 100%; left: 50%; right: 50%;
    transition: bottom .3s 0s, left .5s .3s, right .5s .3s;
    
  }
  &:after {
    top: 100%; bottom: -0.1rem; left: 50%; right: 50%;
    transition: top .3s 0s, left .5s .3s, right .5s .3s;
  }
  &:hover {
    &:before {
      top: -0.1rem; bottom: 50%; left: -0.1rem; right: -0.1rem;
      transition: left .5s 0s, right .5s 0s, bottom .3s .5s;
    }
    &:after {
      top: 50%; bottom: -0.1rem; left: -0.1rem; right: -0.1rem;
      transition: left .5s 0s, right .5s 0s, top .3s .5s;
    }
  }


}

// Button Two

.button--two {
  &:before {
    top: -0.1rem;
     bottom: 100%; 
    left: 0;
     right: 100%;
    transition: bottom .3s 0s, left .5s .3s, right .5s .3s;

  }
  &:after {
    top: 100%; 
    bottom: -0.1rem;
     left: 100%;
      right: 0;
    transition: top .3s 0s, left .5s .3s, right .5s .3s;
  }
  &:hover {
    &:before {
      top: -0.1rem; 
      bottom: -0.1rem; 
      left: 0; 
      right: -0.1rem;
      transition: left .5s 0s, right .5s 0s, bottom .3s .5s;
    }
    &:after {
      top: -0.1rem; bottom: -0.1rem; left: -0.1rem; right: 0;
      transition: left .5s 0s, right .5s 0s, top .3s .5s;
    }
  }
}
   
// Button Three


.button--three {
  &:before {
    top: -0.1rem; bottom: 100%; left: 0; right: 100%;
    transition: bottom .3s .8s, left .5s .6s, right .5s 1.1s;
  }
  &:after {
    top: 100%; bottom: -0.1rem; left: 100%; right: 0;
    transition: top .3s 0s, left .5s .3s, right .5s .3s;
  }
  &:hover {
    &:before {
      top: -0.1rem; bottom: 0; left: 0; right: -0.1rem;
      transition: left .5s 0s, right .5s 0s, bottom .3s .5s;
    }
    &:after {
      top: 0; bottom: -0.1rem; left: -0.1rem; right: 0;
      transition: left .5s .8s, right .5s .8s, top .3s 1.3s;
    }
  }
}

// Button Four

.button--four {
  &:before {
    top: -0.1rem; bottom: 100%; left: -0.1rem; right: calc(100% + 0.1rem);
    transition: left .5s, right .5s, bottom .5s;

  }
  &:after {
    top: 100%; bottom: -0.1rem; left: calc(100% + 0.1rem); right: -0.1rem;
    transition: left .5s, right .5s, top .5s;
  }
  &:hover {
    &:before {
      top: -0.1rem; bottom: 0; left: -0.1rem; right: 0;
    }
    &:after {
      top: 0; bottom: -0.1rem; left: 0; right: -0.1rem;
    }
  }
}



/* .invisible{
    visibility: hidden;
}
.container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
 
}

.copyRight{
  display: flex;
  width: 100%;
  margin-top: auto;
  margin-bottom: 40px;
  align-items: center;
  justify-content: space-between;
  color: white;
  p{
    font-size: 1.5rem;
    color: white;

    @media only screen and (max-width: 280px) {
      font-size: .6rem;
    }
  }
  .legal{

    transform: translateX(20px);

    @media only  screen and  (max-width:600px) {
        transform: translateX(0px);
        margin-bottom: 10px;
      }
    }
 .w{
    transform: translateX(-20px);
    @media only  screen and  (max-width:600px) {
        transform: translateX(0);
      }
 }
  @media only screen and (min-width: 921px) and (max-width:1024px) {
    transform: translateY(-40px);
  }
 
  @media only screen and (max-width: 376px) {
    transform: translateY(-30px);
  }
  
  @media only  screen and  (max-width:600px) {
    flex-direction:column
  }
}
/* .logo {position:absolute; width:100px; height:250px; left:35%;} */

/* .logo{
  height: 588px;
  position: relative;
  transform: translateY(-80px) ;

  img{

    left: 0;
    bottom: 0;
    max-height: 100%;
    max-width: 100%;
    display: block;
  }
  @media only screen and (max-width: 912px) {
    height: 500px !important;
    transform: translateY(-30px);
  }
  @media only screen and (max-width: 768px) {
    height: 450px !important;
    transform: translateY(-30px);
  }
  @media only screen and (max-width: 600px) {
    height:300px !important;
    transform: translateY(-30px);
  }
  @media only screen and (max-width: 540px) {
    height: 350px !important;
    transform: translateY(-30px);
  }
  @media only screen and (max-width: 376px) {
    height: 350px !important;
    transform: translateY(-30px);
  }
}


.w{
  color: red;
}
.legal{
  color: red;
}


body {
  background: #000000;

}
.content_links{
  width: 100%;
  display: flex;
 justify-content: space-around;
 transform: translateY(-120px);
 a{
   width: max-content;
   
   button{

    @media only screen and (max-width: 376px) {
      font-size: 1.5rem;
    }
   }

   @media only screen and (max-width: 376px) {
     margin-bottom: 30px;
    }
   
 }
  @media only screen and (max-width: 1024px) {
    transform: translateY(-150px);
  }
    @media only screen and (max-width: 912px) {
      flex-direction: column;
      flex-grow: 1;
      align-items: center;
    }
    @media only screen and (max-width: 768px) {
      flex-direction: column;
      flex-grow: 1;
      align-items: center;
      transform: translateY(-70px);
    }
    @media  screen and (max-width: 600px) {
      flex-direction: column;
      flex-grow: 1;
      align-items: center;
      transform: translateY(-60px);
    }
    @media screen and (max-width:540px) {

    }
    @media only screen and (max-width: 376px) {
      transform: translateY(-90px);
    }
}
button {
  padding: 1.4rem 3rem;
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  cursor: pointer;
  font-family: 'courier';
  background: #000000;
  transition: 1s all;
  &:before{
    content:"";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; 
    transition: .5s all;
  }
  &:hover{
    
    &:before{
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: white;
        height: 2px;
    }
     
  }
  @media only screen and (max-width:1024px)
  {
      &:before{
         display: none;
      }
      &:after{
        display: none;
      }
  } 

    
   

}*/