* {
     box-sizing: border-box;
     /* border: thin solid rgb(46, 54, 197);  */
 }
 /* img {
    border: thin solid rgb(71, 197, 46); 
 
 } */

 li.gallery {
    display: none;
 }

 body {
     font-family: "Raleway", sans-serif;
     font-weight: 1000;
     /* font-optical-sizing: auto; */
     font-weight: 400;
     font-style: normal;
     margin: 0;
     padding: 0;
     max-width: 100%;
 }

 div.wrapper {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;

 }



 div.video-banner {
     max-height: 900px;
     padding-top: 40px;
     padding-bottom: 40px;


 }



 /*header styles */

 header,
 footer {
     width: 100%;
     height: 80px;
     background-color: black;
     margin: 0;
     color: white;
     padding: 0px;
     align-content: center;
 }

 header div.wrapper,
 div.footer-top,
 div.footer-bottom {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;

 }

 header nav ul,
 footer nav ul {
     display: flex;
     flex-direction: row;
     gap: 40px;
 }

 header nav ul li,
 footer nav ul li {
     list-style: none;

 }

 header nav li a,
 footer nav li a {
     color: white;
     text-decoration: none;
     font-weight: lighter;
     padding: 30px;
 }


 header nav li a:hover,
 footer nav li a:hover {
     background-color: blueviolet;
     text-decoration: none;
     font-weight: lighter;
     color: white;
     padding: 30px;

 }

 header div.logo {
     display: flex;
     flex-direction: row;
     gap: 10px;

     align-items: center;
     align-content: center;


 }

 div.logo img {
     width: 70px;
     display: block;
 }

 #hero {
     width: 100%;
     background-color: green;
     padding: 100px 0 180px;
     background-image: url("assets/TheVespaDiaries-opt.gif");
     background-size: cover;
     background-position: center;
     color: white;
     position: relative;
 }

 #hero::after {
     content: "";
     display: block;
     background-color: black;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     opacity: 55%;


     z-index: 0;

 }

 #hero h1,
 p {
     position: relative;
     z-index: 10;
 }

 #hero h1 {
     font-size: 3em;
     padding-bottom: 0px;

 }

 #hero h2 {
     position: relative;
     z-index: 10;
 }


 #hero p {
     width: 100%;
     max-width: 67%;
     padding: 0%;
     font-weight: bolder;
     color: rgb(255, 253, 255);
     padding: 3px;


 }


 a.button {
     display: inline-block;
     background-color: rgb(190, 68, 190);
     color: white;
     text-decoration: none;
     font-size: 18px;
     padding: 16px 20px;
     transition: .30s;
     border: 5px solid rgb(190, 68, 190);
     position: relative;
     z-index: 10;
 }

 a.button:hover {
     background-color: white;
     color: rgb(190, 68, 190);
 }



 /****ABOUT STYLES*******/
 #about {
     background-color: rgb(103, 68, 103);
 }

 #about div.wrapper {
     display: flex;
     align-items: center;
     gap: 40px;
     padding-top: 60px;
     padding-bottom: 60px;

 }


 #about div.wrapper h2,
 p {
     color: white;
     letter-spacing: 0.1em;
     line-height: 1.5em;
     /* background-color: orange; */
 }

 /* #about div.column-half {

     flex-direction: column;
     align-items: end;
 } */

 #about div.about-images {
     max-width: 35%;
     display: flex;
     flex-direction: column;
 }

 #about img.coffee-cup {
     max-width: 100%;
 }

 #about img.selfie {
     max-width: 10%;
     position: absolute;
     left: 27%;
     top: 78rem;
 
 }




 /****IINSPERATION SECTION****/
 #insper {
     width: 100%;
     background-color: rgb(26, 24, 26);
     padding: 120px 0px;
     text-align: center;
     background-image: url("assets/chair.png");
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.253);
 }

 #insper div.insper {
     display: block;
     margin: auto;
     max-width: 1300px;
 }

 #insper blockquote {

     font-size: 48px;
     color: white;

 }

 #insper p {
     font-size: 34px;
     font-size: 20px;
 }


 /*VVVVVVVVVVV Project Section VVVVVVVVVVV  [in class]*/

 #projs {
     padding: 50px 50px;
     margin: 0;
     max-width: 100%;

     justify-content: center;

     display: flex;
     flex-direction: row;
     gap: 30px;
     flex-wrap: wrap;

     background-color: rgb(190, 68, 190);
 }

 div.headline-subline h2,
 div.headline-subline p {
     color: white;
     width: 250px;
     padding: 0px;


 }

 div.headline-subline {
     display: flex;
     flex-direction: column;
     max-width: 500px;
     width: 100%;
     height: 400px;



     align-items: end;
     justify-content: center;
     background: rgb(103, 68, 103);
     padding: 40px;


 }

 div.subline {
     display: block;
     /* max-width: fit-content;
     max-height: fit-content; */

 }




 #projs img {
     max-width: 40%;
     max-height: 40%;

 }

 #projs a {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
     justify-items: center;
     gap: 20px;
     border: 10px solid rgba(91, 19, 91, 0);


     max-width: 500px;
     /* min-width: fit-content; */
     /* max-height: 360px; */
     height: 400px;


     padding: 40px;
     gap: 40px;
     text-decoration: none;
     background-color: rgb(109, 33, 109);
     color: white;
 }

 #projs a:hover p,
 #projs a:hover h2,
 #projs a:hover h3 {
     color: rgb(109, 33, 109);

 }

 #projs a:hover {
     background-color: white;
     border: 10px solid rgb(91, 19, 91);
     padding: 30px;
     transition: .50s;
 }

 /*VVVVVVVV Indivisual Hover Actions - This stuff controlls what the buttons does when you hover over them. VVVVVVVV */

 #gone-home a:hover {
     background-color: rgb(0, 0, 0);
     background-image: url(assets/concert-poster-opt.png);
     background-repeat: no-repeat;
     background-position-x: center;
     background-size: 125%;
     transition: .50s;
     box-shadow: inset 0 0 0 2000px rgba(231, 199, 231, 0.844);
     background-position: 120px -20px;
 }

 #saru-springs a:hover {
     background-color: rgb(0, 0, 0);
     background-image: url(assets/saru-springs-tickets-opt.png);
     background-repeat: no-repeat;
     background-position-x: center left;
     background-size: 125%;
     transition: .50s;
     box-shadow: inset 0 0 0 2000px rgba(199, 180, 199, 0.888);
     background-position: -110px -129px;

 }

 #stream-waiting a:hover {
     background-color: rgb(0, 0, 0);
     background-image: url(assets/TheVespaDiaries-opt.gif);
     background-repeat: no-repeat;
     background-position-x: center right;
     background-size: 200%;
     transition: .50s;
     box-shadow: inset 0 0 0 2000px rgba(236, 177, 236, 0.778);
     background-position: -130px -39px;

 }

 #nakagin a:hover {
     background-color: rgb(0, 0, 0);
     background-image: url(assets/nakagin-spread-sample-opt.png);
     background-repeat: no-repeat;
     background-position-x: center left;
     background-size: 225%;
     transition: .50s;
     box-shadow: inset 0 0 0 2000px rgba(241, 208, 241, 0.911);
     background-position: -20px -29px;
 }

 #brews a:hover {
     background-color: rgb(0, 0, 0);
     background-image: url(assets/BrewsCoffee-opt.png);
     background-repeat: no-repeat;
     background-position-y: 0;
     background-size: 165%;
     transition: .50s;
     box-shadow: inset 0 0 0 2000px rgba(241, 208, 241, 0.911);
     background-position: -130px -49px;
 }

 #rockets a:hover {
     background-color: rgb(255, 255, 255);
     background-image: url(assets/rockets-icons-larger-side-opt.png);
     background-repeat: no-repeat;
     background-position-y: top;
     background-size: 225%;
     transition: .50s;
     box-shadow: inset 0 0 0 2000px rgba(236, 167, 236, 0.716);
     background-position: -13px -210px;
 }

 /* This fixes the problem with Demo's Rebranding section. 
Setting up a white background for the logo when not hover, 
then when overed over, gets rid of the white backgound around the image */

 #demos a img {
     background-color: white;
     max-width: 160px;
 }


 /* Gallery Section */
/* Gallery needs to be replaced! Till Further notice, it will be displayed as none */

 #gallery {
     padding: 50px 40px;
     background-color: rgb(103, 68, 103);
     color: white;
     align-items: center;
     justify-items: center;
     display: none;


 }

 div.other-projects {
     height: 600px;
     margin: 0;
     display: grid;
     grid-template-rows: 500px 100px;
     grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
     align-items: center;
     justify-items: center;
     padding: 40px;
 }


 div.carousel {
     grid-row: 1 / 2;
     grid-column: 1 / 8;
     width: 100vw;
     height: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     transform-style: preserve-3d;
     perspective: 600px;
     --items: 5;
     --middle: 3;
     --position: 1;
     pointer-events: none;

 }

 div.item {
     position: absolute;
     width: 400px;
     height: 600px;
     background-color: coral;
     --r: calc(var(--position) - var(--offset));
     --abs: max(calc(var(--r) * -1), var(--r));
     transition: all 0.25s linear;
     transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r)));
     z-index: calc((var(--position) - var(--abs)));


     align-content: center;
 }

 div.item:nth-of-type(1) {
     --offset: 1;
     background-color: rgba(0, 0, 0, 0);
 }

 div.item:nth-of-type(2) {
     --offset: 2;
     background-color: rgba(0, 0, 0, 0);
 }

 div.item:nth-of-type(3) {
     --offset: 3;
     background-color: rgba(0, 0, 0, 0);
 }

 div.item:nth-of-type(4) {
     --offset: 4;
     background-color: rgba(0, 0, 0, 0);
 }

 div.item:nth-of-type(5) {
     --offset: 5;
     background-color: rgba(0, 0, 0, 0);
 }
 div.item:nth-of-type(6) {
    --offset: 6;
    background-color: rgba(0, 0, 0, 0);
}

 input:nth-of-type(1) {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
 }

 input:nth-of-type(1):checked~div.carousel {
     --position: 1;
 }

 input:nth-of-type(2) {
     grid-column: 3 / 4;
     grid-row: 2 / 3;
 }

 input:nth-of-type(2):checked~div.carousel {
     --position: 2;
 }

 input:nth-of-type(3) {
     grid-column: 4 /5;
     grid-row: 2 / 3;
 }

 input:nth-of-type(3):checked~div.carousel {
     --position: 3;
 }

 input:nth-of-type(4) {
     grid-column: 5 / 6;
     grid-row: 2 / 3;
 }

 input:nth-of-type(4):checked~div.carousel {
     --position: 4;
 }

 input:nth-of-type(5) {
     grid-column: 6 / 7;
     grid-row: 2 / 3;
 }

 input:nth-of-type(5):checked~div.carousel {
     --position: 5;
 }

 #fooseball {
     max-width: 400px;
 }

 #cloud {
     max-width: 300px;
 }

 #postcard {
     max-width: 400px;
 }

 #wall-coffee {
     max-width: 400px;
 }

 #videogame-history-poster {
     max-width: 400px;
 }



 div.final-fantasy {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     width: fit-content;
     gap: 20px;
     justify-content: center;
     align-items: center;

 }

 div.final-fantasy img {
     max-width: 30%;
     align-items: center;
     justify-items: center;
     padding: 10px;


 }

 ul.carousel__thumbnails {
     align-items: center;
     justify-items: center;
 }

 div.final-fantasy-thumbnail {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-items: center;
     min-width: 2%;
 }

 div.advicosy-imigration {
     justify-content: center;
     align-items: center;
     padding: 30px;
     padding-left: 200px;
 }

 div.collage-digital-insanity {
     justify-content: center;
     align-items: center;
     width: 100%;
     padding-left: 200px;
     padding: 30px 0px 30px 200px;
 }

 div.postcard {
     justify-content: center;
     align-items: center;
     width: 100%;
     padding-left: 200px;
     padding: 30px 0px 30px 75px;
 }

 div.advicosy-gamehistory {
     justify-content: center;
     align-items: center;
     width: 100%;
     padding: 30px 0px 30px 200px;
 }

 div.gallery-headline {
     align-items: center;
     padding: 0px 20px;
     /* background:  rgb(190, 68, 190); */
     max-width: 600px;
 }



/*  
 @media screen and (max-width: 875px) {
    div.logo p {
        background-color: orange;
        font-size: 10px;
    }
    div.logo img {
        width: 60px;
    }
 header div.logo {
        align-items: center;
    }
 }

 @media screen and (max-width:830px) {
    div.logo p {
        background-color: blue;
        font-size: 8px;
    }
    div.logo img {
        width: 50px;
    }
    div.logo {
        align-items: center;
    }
 }
*/

@media screen and (max-width: 375px) {
    div.wrapper {
        /* set size here - do this imeditely when you come back to working on this project. [IMPORTANT] */
        width: 300px;
    }

    img {
        width: 100%;
        height: 100%;
    }
    #about div.wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }

    #about div.about-images {
        max-width: 60%;
        display: flex;
        gap: 05px;
    }
    #about img.selfie {
        max-width: 30%;
        height: 15%;
        position: absolute;
        left: 50%;
        top: 80rem;
    }


    #gallery {
        display: none;
    }
    
    #hero {
        width: 375px;        
        padding: 100px 0 180px;
        background-image: url("assets/TheVespaDiaries-opt.gif");
        background-size: cover;
        background-position: center;
        color: white;
        position: relative;

    }

/* fixing project page here VVVVVVVVV */


    #projs {
        padding: 30px 30px;
        margin: 0;
        width: 100%;
        max-width: 375px;
        justify-content: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px;
        background-color: rgb(190, 68, 190);
    }
/* Insper section */
    #insper {
        padding-top: 10px;
        padding-bottom: 15px;
        background-size: 240%;
}
    #insper q{
        font-size: 25px;
}
    #insper p{
        font-size: 15px;
}

    /* Project section */
    #projs a {

        /* max-width: 375px; */
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 15px;
    }

        div.headline-subline {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        align-items: end;
        justify-content: center;
        background: rgb(103, 68, 103);
    }
     #projs div.headline-subline {
       display: block;
       max-width: 100%;
       padding: 15px;
   }
    div.headline-subline h2 {
        font-size: 30px;
    }
    div.headline-subline p {
        font-size: 14px;
    }
    #projs a p {
        font-size: 12px;
    }
    /* #stream-waiting img {
        max-width: 40%;
        max-width: 70%;
    }
    #saru-springs img {
        max-width: 40%;
    } */
    #projs img {
        max-height: 50%;
        max-width: 50%;
    }
    #stream-waiting img {
        max-width: 60%;
        max-height: 30%;
    }

}


/* stuff for hamburger things here VVVVVVVVV */

.navbar {
    display: flex;
    /* justify-content: center; */
    -ms-flex-align: end;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 999;
    position: relative;
     /* background-color: rgba(207, 36, 145, 0.398); */
  }
  
  .hamburger {
    display: none;
  }
  
  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #ffffff;
    z-index: 10;
  }
  
  /* Media Queries for the NAV */
  
  @media only screen and (max-width: 1160px) {
    div.logo {
        padding: 0px 40px 0px;
    }
    #hero div.wrapper {
        padding: 40px;
    }
    .navbar {
        display: flex;
        /* justify-content: center; */
        -ms-flex-align: end;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        z-index: 999;
        position: relative;
        padding-left: 50%;
         /* background-color: rgba(207, 36, 145, 0.398); */
      }
    .nav-menu {
      position: fixed;
      left: -100%;
      top: 8rem;
      flex-direction: column;
      background-color: #7d1a64;
      width: 100%;
      border-radius: 10px;
      text-align: center;
      transition: 0.3s;
      box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    }
  
    .nav-menu.active {
      left: 0;
    }
  
    .nav-item {
      margin: 2.5rem 0;
    }
  
    .hamburger {
      display: block;
      cursor: pointer;
    }
  
    .hamburger.active .bar:nth-child(2) {
      opacity: 0;
    }
  
    .hamburger.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
  
    .hamburger.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
    footer div.footer-top {
        display: none;
    }
  }

  @media only screen and (max-width: 412px) {


}