/* TEXT CSS */

/* .dosis-<uniquifier> {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  } */
  

  /* .righteous-regular {
    font-family: "Righteous", sans-serif;
    font-weight: 400;
    font-style: normal;
  } */

html {
    scroll-behavior: smooth;
}

#mobileBTN {
    display: none;
   }


nav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 160px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
    background: linear-gradient(269deg, #d7816a, #e4a8cd, #d6dd80);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 4s ease infinite;
    -moz-animation: AnimationName 4s ease infinite;
    animation: AnimationName 4s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}

nav span {
    display: none;
}

nav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2d2a32;
    display: block;
    font-family: "Dosis", sans-serif;
    font-weight: 400;
}

nav a img {
    max-width: 100%;
}

nav .print:hover {
    background-color: #D75F40;
    color: white;
    border-radius: 10px;
    font-weight: 600;
    transition: ease-in-out 0.2s;
}

nav .video:hover {
    background-color: #D887B9;
    color: white;
    border-radius: 10px;
    font-weight: 600;
    transition: ease-in-out 0.2s;
}

nav .web:hover {
    background-color: #CAD639;
    color: white;
    border-radius: 10px;
    font-weight: 600;
    transition: ease-in-out 0.2s;
}

nav .abt:hover {
    background-color: #D75F40;
    color: white;
    border-radius: 10px;
    font-weight: 600;
    transition: ease-in-out 0.2s;
}

nav .contact:hover {
    background-color: #D887B9;
    color: white;
    border-radius: 10px;
    font-weight: 600;
    transition: ease-in-out 0.2s;
}

.menu-icon {
    display: none;
    cursor: pointer;
    padding: 10px;
}

.menu-icon .line {
    width: 25px;
    height: 3px;
    background-color: #000;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

main {
    margin-left: 160px; /* Same as the width of the sidebar */
    padding: 0px 10px;
}

/* .Up {
    
} */

.UpBTN {
    max-width: 40px;
    float: right;
    position: fixed;
    z-index: 99;
    bottom: 20px;
    right: 20px;  
}

h1 {
    font-family: "Righteous", sans-serif;
}

p {
    font-family: "Dosis", sans-serif;
}

#Prevu {
    padding: .5em .5em .5em .5em;
    height: 100vh;
}

#Prevu h1 {
    font-family: Righteous, sans-serif;
    text-align: center;
}

/* FLICKITY ISH */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;
}

.carousel-cell {
  margin-right: 10px;
  /* background-image: url(./Imgs/Obliq400.png); */
  background-repeat: no-repeat;
  background-size: 400px;
  width: 400px;
  height: 400px;
  border-radius: 5px;
  /* counter-increment: gallery-cell; */
}


/* cell number */
/* .carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
} */

#sectionToUpdate {
    padding: 1.5em .5em .5em .5em;
}

#sectionToUpdate h2 {
    font-family: Righteous, sans-serif;
    text-align: center;
}

#sectionToUpdate p {
    font-family: Dosis, sans-serif;
    text-align: center;
}

#sectionToUpdate a {
    font-family: Dosis, sans-serif;
    text-align: center;
    display: grid;
    text-decoration: none;
}

#sectionToUpdate a:visited {
    color: black;
    text-decoration: none;
}
/* END of FLICKITY ISH */



.Grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    grid-gap: 1em;
    /* padding: 2.5em .5em .5em 2.5em; */
}

.VideoGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    grid-gap: 1em;
    /* padding: 2.5em .5em .5em 2.5em; */
}

.Image {
    display: grid;
    justify-content: center;
}

#Print a:hover img {
    filter: none;
    transition: all 0.3s ease 0s; 
    box-shadow: 0px 0px 50px #D75F40;
}

/* Change color for Video section */
#Video a:hover img {
    filter: none;
    transition: all 0.3s ease 0s; 
    box-shadow: 0px 0px 50px #D887B9;
}

/* Change color for Web section */
#Web a:hover img {
    filter: none;
    transition: all 0.3s ease 0s; 
    box-shadow: 0px 0px 50px #CAD639;
}

#Print {
    /* padding: 2.5em .5em .5em 2.5em; */
    height: 100vh;
    margin-bottom: 18em;
}

#Print h2 {
    font-family: Righteous, sans-serif;
    text-align: center;
}

#Video {
    /* padding: 2.5em .5em .5em 2.5em; */
    height: 100vh;
    margin-bottom: 18em;
}

#Video h2 {
    font-family: Righteous, sans-serif;
    text-align: center;
}

/* .Grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    grid-gap: 1em;
    padding: .5em .5em .5em .5em;
} */

#Web {
    /* padding: 2.5em .5em .5em 2.5em; */
    height: 70vh;
    margin-bottom: 18em;
}

#Web h2 {
    font-family: Righteous, sans-serif;
    text-align: center;
}

#About {
    padding: .5em .5em .5em .5em;
    height: 90vh;
}

#About h2 {
    font-family: Righteous, sans-serif;
    text-align: center;
}

.AboutGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#AboutImg {
    display: grid;
    justify-content: right;
}

#AboutBio {
    /* display: grid;
    justify-content: left; */
    padding: .5em .5em .5em .5em;
}

#AboutBio h2 {
    text-align: left;
}

#Contact {
    display: grid;
    justify-content: center;
}

#Contact h2 {
    font-family: Righteous, sans-serif;
    text-align: center;
}

.ContactGrid {
    /* display: grid; */
    text-align: center;
}

.ContactGrid a {
    display: inline-block;
  padding: 15px 25px;
  font-family: "Dosis", sans-serif;
  font-weight: bold 700;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #000000;
  background-color: #76bf43;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #373737;
  margin: 1em;
  width: auto;
}
.ContactGrid #Email {
    display: inline-block;
  padding: 15px 25px;
  font-family: "Dosis", sans-serif;
  font-weight: bold 700;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #000000;
  background-color: #D75F40;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #373737;
  margin: 1em;
  width: auto;
  transition: transform 0.3s ease; 
}

.ContactGrid #Email:hover {
    
    transform: translateY(-5px); 
}
.ContactGrid #Email:active {
    background-color: #b75036;
    box-shadow: 0 5px #373737;
    transform: translateY(4px);
}
.ContactGrid #Insta {
    display: inline-block;
  padding: 15px 25px;
  font-family: "Dosis", sans-serif;
  font-weight: bold 700;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #000000;
  background-color: #D887B9;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #373737;
  margin: 1em;
  width: auto;
  transition: transform 0.3s ease; 
}

.ContactGrid #Insta:hover {
    transform: translateY(-5px); 
}

.ContactGrid #Insta:active {
    background-color: #ab648f;
    box-shadow: 0 5px #373737;
    transform: translateY(4px);
}
.ContactGrid #Linked {
    display: inline-block;
  padding: 15px 25px;
  font-family: "Dosis", sans-serif;
  font-weight: bold 700;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #000000;
  background-color: #CAD639;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #373737;
  margin: 1em;
  width: auto;
  transition: transform 0.3s ease; 
}

.ContactGrid #Linked:hover {
    transform: translateY(-5px); 
}

.ContactGrid #Linked:active {
    background-color: #a5af2d;
    box-shadow: 0 5px #373737;
    transform: translateY(4px);
}

.ContactGrid a:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #373737;
    transform: translateY(4px);
}

/* .Grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    grid-gap: 1em;
    padding: .5em .5em .5em .5em;
} */

@media screen and (max-width: 768px) {
    html,body {
        overflow-x: hidden;
    }
    .UpBTN {
        max-width: 40px;
        float: right;
        position: fixed;
        z-index: 99;
        bottom: 5px;
        right: 7px;
    }

    nav.menu {
        /* Your existing styles for the navigation menu */
        transition: transform 0.3s ease; /* Add transition for smooth animation */
        transform: translateX(-100%); /* Initially hide the navigation off-screen */
        position: fixed; /* Ensure it stays fixed during transition */
        top: 0; /* Position at the top of the viewport */
        left: 0; /* Position at the left of the viewport */
        height: 100vh; /* Set full height */
        width: 160px; /* Set desired width */
        background-color: #ffffff; /* Set background color */
    }

    nav.menu.open {
        transform: translateX(0); /* Show the navigation by bringing it back on-screen */
    }
   nav a img {
    display: none;
   }

   nav {
    left: -100%;
   }

   nav #closeButton{
    font-family: Righteous, sans-serif;
    font-size: 1.5em;
    display: grid;
    justify-content: right;
    padding-right: 1.5em;
   }

   #Prevu {
    padding: 4.5em .5em .5em .5em;
    height: 100vh;
    }


   #mobileBTN {
    display: block;
    position: fixed;
    z-index: 9999;
   }

   #mobileBTN #menuToggle {
    max-width: 20% ;
   }

   main {
    margin-left: 0;
    padding-top: 3em;
   }

   #Print #Video #Web {
    padding: .5em .5em .5em .5em;
    height: 100vh;
    text-align: center;
   }

   #Print {
    padding: .5em .5em .5em .5em;
    height: 100vh;
    margin-bottom: 120em;
    }
   #Video {
    padding: .5em .5em .5em .5em;
    height: 100vh;
    margin-bottom: 120em;
    }
   #Web {
    padding: .5em .5em .5em .5em;
    height: 100vh;
    margin-bottom: 120em;
    }
   
   .Grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    grid-gap: 1em;
    padding: .5em .5em .5em .5em;
    }

    .VideoGrid {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        grid-gap: 1em;
        /* padding: 2.5em .5em .5em 2.5em; */
    }

    .AboutGrid {
        display: grid;
        grid-template-columns: 1fr ;
        justify-content: center;
    }

    #AboutImg {
        display: grid;
        justify-content: center;
    }
    
    #AboutBio {
        /* display: grid;
        justify-content: left; */
        padding: .5em .5em .5em .5em;
    }
    
    #AboutBio h2 {
        text-align: center;
    }

    .ContactGrid {
        display: grid;
        text-align: center;
    }
}