/*IMPORT FONT*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Lato:wght@300&display=swap');

/*BOILER PLATE*/
/*The first 2 boiler plate is to remove any extra padding and margin*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html{
  padding: 0;
  margin: 0;
}

/*
Background basic color is white.
Overflow-x is hidden to hide content outside the 100vh width
*/
body{
  background: white;
  overflow-x: hidden;
  z-index:1;
}

/*
Create a sliding effect from black to white
*/
body::before{
  content:'';
  background: black;
  background-size: cover;
  background-position: center;
  top:0;
  left:0;
  height:100%;
  width:100%;
  position:fixed;
  animation: bodyentrance 0.75s cubic-bezier(.95,.06,.38,.73);
  z-index: -1;
  transform: scaleX(0);
}

@keyframes bodyentrance{
  0%{
    transform:translateX(0%);
  }
  50%{
    transform:translateX(0%);
  }
  100%{
    transform:translateX(-100%);
  }
}

/*
Header should start from the center of the page then finish at the top
*/
header{
  display:grid;
  height:100%;
  animation: entrance 1.5s cubic-bezier(.5, 0, .5, 1);
  animation-fill-mode: both;
  justify-content: center;
  align-items: center;
  margin-top:3.5rem;
}

@keyframes entrance{
  0%{
    opacity:0;
    height:90vh;
    color:white;
    }
  25%{
    opacity:1;
  }
  50%{
    height:90vh;
    transform: translateY(0);
  }
  99%{
    height:90vh;
  }
  100%{
    transform: translateY(-50%);
  }
}

.site-title{
  width:100%;
  font-size: 1rem;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0.5rem;
  text-align:center;
  padding:0 1rem;
  z-index:1;
}

.copyright{
  visibility: hidden;;
}

/*NAVIGATION TOGGLE as a clickable button*/
.nav-toggle::before{
  content:'MENU';
  font-size:0.6rem;
  font-family: 'Lato', sans-serif;
  color:black;
  z-index:999;
  cursor: pointer;
}

.nav-toggle {
  position:absolute;
  border: none;
  background-color:transparent;
  z-index:10;
  top:1%;
  left:50%;
  margin-right:-50%;
  transform: translate(-50%,0);
  animation: toggle 1s ease;
  animation-fill-mode: both;
  animation-delay: 1.5s;
}

@keyframes toggle{
  0%{
    opacity:0;
    transform: translate(-50%,-50%);
    }
  100%{
    opacity:1;
    }
}

/*NAVIGATION TOGGLE AFTER CLICKED*/
.nav-open .nav-toggle::before{
  content:'CLOSE'
}

.nav-open .nav {
  transform: translateY(0);
}

/*NAVIGATION MENU shows up  from the top with transition after the toggle is clicked*/
.nav {
  position:fixed;
  inset:0 0 0 0%;
  background-color:hsl(0 0% 100%/0.8);
  transform: translateY(-100%);
  transition: transform 300ms cubic-bezier(.5, 0, .5, 1);
  z-index:9;
  backdrop-filter: blur(0.5rem);
}

.nav-list {
  list-style: none;
  margin: 10rem auto;
  padding: 0 2rem;
  display:grid;
  justify-content: center;
  text-align: center;
}

.nav-item {
  font-size:1.25rem;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0.5rem;
  margin:1rem auto;
  display:grid;
  justify-content: center;
  text-align: center;
}

.nav-link{
  text-decoration: none;
}

.text{
  color: black;
  text-align: center;
}
.text:hover{
  color:rgba(101, 101, 101, 0.823);
}



/*SOCIAL MEDIA*/
.nav-link img{
  width:1rem;
}

.social{
  display:flex;
  align-items: center;
  height:3rem;
  gap:1rem;
}

/*CONTENT GENERAL*/
main {
  display:flex;
  gap:0.5rem;
  justify-content: center;
  padding:0 0.25rem;
  margin: 0 auto;
  position: absolute;
  top:5.75rem;
  left:50%;
  margin-right:-50%;
  transform: translate(-50%,0);
  z-index: 3;
  overflow:hidden;
  animation: content 1.15s ease;
  animation-fill-mode: both;
  animation-delay:1.25s;
  transform-origin: bottom;
}

@keyframes content{
  0%{
    opacity:0;
}
  100%{
    opacity: 1;
  }
}

.content-container{
  display:grid;
  justify-content: center;
  margin:auto;
}

.content-container a{
  position: relative;
}

.image {
  opacity: 1;
  display: block;
  height: auto;
 
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Lato', sans-serif;
  width:100%;
}

.content-container a:hover .image {
  opacity: 0.3;
  border:1px solid black;
}

.content-container a:hover .middle {
  opacity: 1;
}

.texts {
  color: black;
  font-size: 12px;
  padding:10px;
  opacity: 0.75;
}


main img{
  width:165px;
  margin:0 auto 0.5rem auto;
  display:block;   
}  

/*LEFT COLUMN MOBILE*/
.left{
  display:grid;
  height: 1000px;
  width: 100%;
}

/*MOVER EFFECT*/
.mover-mobile-left {
  animation: moverLeft 100s linear infinite;
}

@keyframes moverLeft {
  0% { 
    transform: translateY(0%);  
    }
  50% { 
    transform: translateY(-47.5%);  
    }
  100% {
    transform: translateY(0%);  
    }
}

/*RIGHT COLUMN MOBILE*/
.right{
  display:grid;
  height: 1000px;
  width: 100%;
}

/*MOVER EFFECT*/
.mover-mobile-right {
  animation: moverRight 100s linear infinite;
}

@keyframes moverRight {
  0% { 
    transform: translateY(-47.5%);  
    }
  50% { 
    transform: translateY(0%);  
    }
  100% {
    transform: translateY(-47.5%);  
    }
}


/*RESPONSIVENESS*/
@media(min-width:390px){
  main{
    top:5.5rem;
    }
}
@media(min-width:481px){
  header{
    margin-top:3.5rem;
    }
}
@media(min-width:768px)and (max-width:1023px){
  header{
    margin-top:5rem;
    }
  .site-title{
    font-size:1.75rem;
    width:420px;
    }
  main{
    top:9rem;
    }
  main img{
    width:375px;
    }
  .right, .left{
      height:1800px;
    }
}
@media(min-width:1024px){
  .nav-toggle{
    top:2%;
    }
  .nav-item{
      font-size:1.75rem;
    }
  .nav-link img{
      width:1.5rem;
    }
  header{
    margin-top:4rem;
    }
  .site-title{
    font-size:2rem;
    width:100%;
    }
  main{
    top:6rem;
    gap:1rem;
    }
  main img{
    width:230px;
    }
  .texts{
    font-size:1rem;
  }
  
  /*BREAK CONTENT INTO FOUR COLUMNS*/
  .left{
    display:flex;
    gap:1rem;
    height:675px;
  }
  .right{
    display:flex;
    gap:1rem;
    height:675px;
  }

  /*STOP MOBILE MOVER*/
  .mover-mobile-left{
    animation:none;
  }

  .mover-mobile-right{
    animation:none;
  }

  /*DESKTOP MOVER*/
  .mover-desktop-odd {
    animation: moverOdd 100s linear infinite;
  }

  @keyframes moverOdd {
    0% { 
      transform: translateY(0%);  
    }
    50% { 
      transform: translateY(-47.5%);  
    }
    100% {
      transform: translateY(0%);  
    }
  }

  .mover-desktop-even {
    animation: moverEven 100s linear infinite;
  }

  @keyframes moverEven{
  0% { 
    transform: translateY(-47.5%);  
  }
  50% { 
    transform: translateY(0%);  
  }
  100% {
    transform: translateY(-47.5%);  
    }
  }
}

@media(min-width:1280px){
  header{
    margin-top:4.5rem;
    }
  main{
    top:7rem;
  }
  main img{
    width:285px;
  }

  .left{
    height:850px;
  }
  .right{
    height:850px;
  }
}
@media(min-width:1440px){
  header{
    margin-top:5rem;
    }
  .content-container{
      gap:0.5rem;
  }
  main{
    top:8rem;
    gap:1rem;
  }
  main img{
    width:340px;
  }
  .left{
    height:1100px;
  }
  .right{
    height:1100px;
  }
}