/*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%);
    }
}

/*COPYRIGHT*/
.copyright{
    opacity:0;
    font-family: 'Lato', sans-serif;    
    position:fixed;
    top:21rem;
    right:0;
    transform: rotate(90deg);
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
}

/*CLOSE TOGGLE should always be on the right side. The function is go back to index page*/
.close__toggle {
    position:absolute;
    border: none;
    background-color:transparent;
    z-index:8;
    top:2.5rem;
    right:1rem;
    cursor: pointer;
}

.close__toggle::before{
    content:'CLOSE';
    font-size:0.65rem;
    font-family: 'Lato', sans-serif;
    color:black;
}

a.close__toggle{
    text-decoration: none;
    color:black;
}

/*MENU TOGGLE should always be on the left side. The function is to open a navigation menu when clicked*/
.nav__toggle {
    position:absolute;
    border: none;
    background-color:transparent;
    z-index:10;
    top:2.5rem;
    left:1rem;
    cursor: pointer;
}

.nav__toggle::before{
    content:'MENU';
    font-size:0.65rem;
    font-family: 'Lato', sans-serif;
    color:black;
}

/*NAVIGATION 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;
  }
  
  /*HOVER EFFECT should be an underline moving from left to right of the text*/
  .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*/
.content{
    z-index:2;
    animation: content 1.25s ease;
    animation-fill-mode: both;
    animation-delay:0.75s;
}

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

.image-container{
    display:grid;
    justify-content: center;
    height:550px;
    align-items: center;
    padding-top:2rem;
}

.mySlides {
    width:300px;
}

/*PAGE TITLE*/
figcaption{
    text-decoration: none;
    color:black;
    font-size:0.9rem;
    font-family: 'Lato', sans-serif;
    text-align: center;
}

/*SLIDER BUTTON GENERAL*/
button{
    background-color: transparent;
    border:0;
}

/*SLIDER MOBILE shown during mobile view but hidden during desktop view*/

button img {
    width:20px;
}
.mobile{
    justify-content: center;
}

/*SLIDER DESKTOP shown during desktop view but hidden during mobile view*/

.slider-desktop-container{
    display:grid;
    width:100%;
    top:50%;
    left:0;
    position:absolute;
}

.btn-container{
    display:flex;
    margin-top:1rem;;
}

.desktop{
    justify-content: space-around;
    gap:65rem;
}

.desktop button{
    display:none;
}

/*RESPONSIVENESS*/
@media(min-width:481px){
    /*IMAGE SIZE*/
    .image-container{
      height:480px;
    }

    .mySlides{
      height:350px;
     width:auto;
    }
}

@media(min-width:768px){
    /*IMAGE SIZE*/
    .image-container{
      height:600px;
    }

    .mySlides{
     height:475px;
      width:auto;
    }
}

@media(min-width:1024px){
    /*TOGGLE*/
    .nav__toggle{
      left:12.5rem;
    }
    .nav__item{
        font-size:1.75rem;
    }

    .close__toggle {
      right:12.5rem;
    }

    .nav-item{
      font-size:1.75rem;
    }
  .nav-link img{
      width:1.5rem;
    }

    /*SLIDER*/
    button img{
      width:40px;
    }

    .mobile button{
      display:none;
    }

    .desktop button{
      display:block;
    }

    .image-container{
      height:550px;
      margin-bottom:-1rem;
    }

    .mySlides{
      height:450px;
      width:auto;
    }

    .footer{
      bottom:7.5%;
    }
}

@media(min-width:1280px){
    /*SLIDER*/
    .image-container{
      height:750px;
    }

    .mySlides{
      height:600px;
      width:auto;
    }
}