/* 
 Color palette:
#267F84
#3DCDD4
#49F6FF
#123E40
#42DDE5
 
 
 */
 @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
 }

 body {
     background-color: black;

 }

 h1 {
     color: #3DCDD4;
     font-size: 3rem;
     padding-bottom: 1rem;
     text-shadow: .3rem .3rem .3rem #184f52;

 }

 h2 {
     color: #3DCDD4;
     font-size: 2rem;
     padding-bottom: .3rem;
 }

 h1,
 h2 {

     letter-spacing: .1rem;
     font-weight: bold;
     text-align: center;
     margin: 0;

 }

 p {
     color: #3DCDD4;
     letter-spacing: .1rem;
     font-size: 1rem;

     text-shadow: .3rem .3rem .3rem #184f52;
 }

 a {
     text-decoration: none;
     color: red;
     text-shadow: .3rem .3rem .3rem #3f1313;
 }

 .header {
     position: absolute;
     top: 3rem;
     display: flex;
     width: 80vh;
     justify-content: center;
     gap: 5rem;
 }


 nav ul {

     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     height: 100%;
     width: 100%;
     gap: 3rem;


     align-items: center;
 }

 nav ul a {
     text-decoration: none;
     color: rgb(68, 68, 68);
     text-shadow: none;
     transition-property: color, padding;
     transition-duration: .5s;
 }

 nav ul a:hover {
     color: white;
     padding: 1rem;
     transition-duration: 0.5s;
 }


 nav ul a:before {
     content: '';
     display: inline-block;
     width: 0.5rem;
     height: 0.5rem;
     margin-right: 0.3rem;
     border-radius: 50%;
     background-color: red;
     text-align: center;
     opacity: 0;
     transition-duration: 0.5s;
     transition-property: opacity;
 }

 nav ul a:hover::before {
     opacity: 1;
 }

 section {
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     scroll-snap-align: center;

     animation: appear linear;
     animation-timeline: view();
     animation-range: entry 0 cover 45%;
 }

 .resume {
     background-color: transparent;
     color: #d80f0f;
     font-size: 1rem;
     border: 1px solid #d80f0f;
     border-radius: 10rem;
     padding: .75rem 1.5rem;


     transition-duration: .5s;
     transition-property: color, background-color, letter-spacing;
 }

 .resume a {
     text-decoration: none;
     color: #d80f0f;
     text-shadow: none;
     transition-duration: .5s;
     transition-property: color, background-color, letter-spacing;
 }

 .resume:hover a {
     color: black;
     letter-spacing: 0.1rem;
 }

 .resume:hover {
     background-color: #d80f0f;

 }

 .submenu:hover>a {
     padding: 0;
     color: white;
 }

 .submenu {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: .5rem;
     align-items: flex-start;
     justify-content: flex-start;
 }

 .submenu ul {
     position: absolute;
     top: 100%;
     left: 0;

     display: block;
     opacity: 0;
     visibility: hidden;
     text-align: left;
     transition-duration: .5s;
     transform: translatey(-1rem);
 }

 .submenu:hover ul {
     opacity: 1;
     visibility: visible;
     transform: translateX(0);
 }

 .submenu ul li {
     transition-duration: 0.3s;
     width: 8rem;
 }

 .submenu ul li:hover {
     background-color: #2c2c2c;
     padding-left: .5rem;
     border-radius: .5rem;
 }

 nav ul a:hover {
     color: white;
     padding: 1rem;
 }

 .submenu a:hover {
     padding: 0;
     color: white;
 }

 .page_container {
     scroll-snap-type: y mandatory;
     overflow-y: scroll;
     height: 100vh;
 }



 .Container {

     display: flex;
     flex-direction: column;
     margin: auto;
     width: 80%;
     gap: 2rem;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     height: auto;


 }

 .Container i {
     color: #6df8ff;
     font-size: 2.5rem;
     padding: .8rem;
     border: 0.1rem solid;
     border-radius: 50%;
     text-align: center;
     margin: 1rem;

     transition-duration: .3s;
 }

 .Container i:hover {
     font-size: 2.2rem;
     padding: .5rem;
     color: #d80f0f;
 }

 .Center {
     text-align: center;
 }

 .box {
     flex-shrink: 1;
     max-width: 75%;
     max-height: 75%;
     min-width: 0;
     min-height: 0;
     margin: 1rem;
     flex-grow: 1;
 }


 .box img {
     height: 20rem;
     width: 20rem;
     text-align: center;
     object-fit: fill;
     flex-shrink: 1;
     flex-grow: 1;
     box-shadow: 2rem 2rem 6rem .1rem #d80f0f;
     border-radius: 30%;

     transition-duration: 0.5s;
 }

 .box img:hover {
     box-shadow: 1rem 1rem 3rem .1rem #d80f0f;
     opacity: .8;
     width: 22rem;
     height: 22rem;
 }

 .Border {
     border: solid;
     border-width: .5rem;
     border-color: #42DDE5;
 }

 .Skill {

     color: #3DCDD4;
     border: solid;
     border-width: 3px;
     border-color: #42DDE5;
     border-radius: 3px;
     padding: 5px;
     transition-duration: 0.4s;
     font-size: 24px;


 }

 .Skill:hover {
     background-color: #42DDE5;
     color: black;
     box-shadow: 0 0 15px 5px #267F84;
     padding: 0.5rem;
     font-size: 26px;
     cursor: pointer;
 }


 .Container_Skill {
     display: flex;
     margin: auto;
     flex-direction: row;
     width: auto;
     gap: 15px;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: flex-start;
     height: auto;
 }

 .skill_box {
     width: 75%;

 }

 .skill_box h2,
 h1 {
     text-align: left;
 }

 canvas {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 @keyframes appear {
     from {
         opacity: 0;
         scale: 0.1;
     }

     to {
         opacity: 1;
         scale: 1;
     }
 }

 .shine {
     background: linear-gradient(to right,
             hsl(0, 0%, 0%) 0,
             #6df8ff 10%,
             hsl(0, 0%, 0%) 20%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: titleShine 2s infinite linear;

     text-shadow: none;
 }

 @keyframes titleShine {
     0% {
         background-position: 0;
     }

     95% {
         background-position: 370px;
     }

     100% {
         background-position: 370px;
     }
 }



 #current-image {
     position: relative;
     display: block;
     height: 25rem;
     width: auto;
     border-radius: 1rem;
     transition: 0.5s;
     object-fit: fill;
     margin: auto;


 }

 #current-image:hover {
     box-shadow: 0rem 0rem 3rem .3rem gray;
     height: 30rem;
 }

 #image-thumbs {
     position: relative;
     display: flex;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     justify-content: center;
     border-radius: 3rem;

     gap: 0.3rem;
     padding: 2rem;
 }

 .thumb {

     width: 5rem;
     height: 5rem;
     object-fit: cover;
     cursor: pointer;
     opacity: .5;
     transition: .5s;
     border-style: solid;
     border-color: transparent;
     border-radius: 2rem;

 }


 .thumb:hover {
     opacity: 1;
     border-style: solid;
     border-color: #d80f0f;
     box-shadow: 0 0 15px 5px #d80f0f;
     margin: 1rem;
     border-radius: .5rem;
 }

 .gallery {
     flex-wrap: nowrap;
     flex-direction: column;
     display: flex;
     align-items: center;
 }