* {
         box-sizing: border-box;
         padding: 0;
         margin: 0;
         text-wrap: pretty;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         text-decoration: none;
         color-scheme: light dark;

         & p {
             line-height: 1.5;
             font-size: 1.25rem;
         }

         & ul {
             line-height: 23px;
             font-size: 1.25rem;
             padding: 1rem 1rem 0 2.5rem;

             & li {
                 padding: 5px;
                 line-height: 1.5;
             }
         }

         & h2 {
             color: #353353;
         }

         & h3 {
             color: #334155;
             font-size: 1.5rem;
             font-weight: bolder;
             padding: 1rem 0;
             line-height: 28px;
         }
     }

     html {
         scroll-behavior: smooth;
     }

     body {
         display: flex;
         flex-direction: row;
         justify-content: center;
     }



     main {
         max-width: 70%;
         border-radius: 10px;
         background-color: #f0f0fe;

         & section:not(:first-child) {
             padding: 5rem 2rem;

         }

         & .header-section {
             display: flex;
             flex-flow: row nowrap;
             justify-content: left;
             align-items: center;
             gap: 0.5rem;

             .icon-svg {
                 width: 2.5rem;
                 height: auto;
             }
         }

         background-color: transparent;


     }

     @keyframes scaler {
         0% {
             scale: 1.0;
         }

         50% {
             scale: 1.05
         }

         100% {
             scale: 1.0;
         }
     }

     nav {
         padding: 5px;
         min-width: 100%;
         background-color: #353353;
         display: flex;
         flex-flow: row nowrap;
         justify-content: center;
         gap: 42px;
         font-size: 0.90rem;
         box-sizing: border-box;

         & a {
             text-decoration: none;
             color: #f0f0fe;
             padding: 1px;
             transition: all 500ms;

             &:hover {
                 opacity: 0.8;
             }
         }
     }

     .profile {
         display: flex;
         flex-direction: row;
         align-items: center;
         gap: 2.5rem;
         padding: 5rem;
         background-color: #353353;
         color: #ddd;
         width: 100%;

         & img {
             border-radius: 99999%;
             border: solid #fff 10px;
             width: 12rem;
             height: 12rem;
             object-fit: cover;

             box-shadow: 0px -1px 3px 3px rgba(191, 191, 191, 0.75);
             -webkit-box-shadow: 0px -1px 3px 3px rgba(191, 191, 191, 0.75);
             -moz-box-shadow: 0px -1px 3px 3px rgba(191, 191, 191, 0.75);
         }

         & .description {
             display: flex;
             flex-flow: column wrap;
             gap: 1rem;

             & h1 {
                 flex-wrap: wrap;
                 display: flex;
                 align-items: center;
                 justify-content: left;
                 flex-direction: row;
                 text-wrap: nowrap;
                 gap: 10px;


                 & span {
                     font-size: 2rem;
                     text-wrap: nowrap;

                     color: #f0f0fe;
                 }

                 & a {
                     font-size: 0.8rem;
                     text-decoration: none;
                     font-weight: 300;
                     background-color: #a7f3d0;
                     color: black;
                     padding: 7px;
                     border: solid 1px #4cd4ad;
                     border-radius: 25px;
                     text-wrap: nowrap;
                     animation: infinite 1.5s scaler;
                 }


             }

             & p {
                 font-size: 1rem;

                 & strong {
                     color: #f0f0fe
                 }
             }

             & .links-description {
                 display: flex;
                 flex: 1fr 1fr 1fr;
                 gap: 1rem;

                 & a {
                     color: #f0f0fe;
                     background-color: #334155;
                     border: solid 1px #f0f0fe;
                     padding: 5px 10px;
                     border-radius: 20px;
                     font-size: 0.8rem;
                     transition: all 500ms;

                     &:hover {
                         background-color: #f0f0fe;
                         color: #334155;
                     }
                 }
             }
         }


     }


     #technologies {
         --content-text: 'HTML';
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         justify-content: space-evenly;
         max-height: fit-content;
         background-color: #353353;
         padding: 2rem 0;
         border-radius: 0 0 25px 0;


         & .svg-container {
             width: 3rem;
             position: relative;

             &:hover {
                 &:after {
                     content: var(--content-text);
                     position: absolute;
                     left: 50%;
                     transform: translateX(-50%);
                     top: -30px;
                     margin: 0 auto 0 auto;
                     font-weight: 100;
                     color: #ddd;
                     background-color: black;
                     font-size: 0.75rem;
                     padding: 5px;
                     text-align: center;
                     border-radius: 5px;
                     width: fit-content;

                 }
             }

         }




     }

     #experience {
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     #studies {
         display: flex;
         flex-direction: column;
         gap: 1rem;

         & h2 {
             color: #353353;
         }

         & h3 {
             color: #334155;
             font-size: 1.5rem;
             font-weight: bolder;
             padding: 1rem 0;
             line-height: 28px;
         }

         & ul {
             padding: 1rem 1rem 0 2.5rem;

             li {
                 padding: 5px;
             }
         }

         p {
             line-height: 23px;
         }
     }


     #projects {
         display: flex;
         flex-direction: column;
         gap: 1rem;
         width: 100%;

         & .cards {
             display: flex;
             flex-wrap: wrap;
             flex-direction: column;
             gap: 3rem;
             min-width: 100%;
         }

         & .card {
             display: flex;
             flex-direction: row;
             gap: 1rem;
             min-width: 100%;

             & .background-img {
                 min-width: 300px;
                 min-height: 200px;
                 flex-shrink: 0;
                 flex-grow: 0;
                 background-color: #353353;
                 position: relative;
                 overflow: hidden;
                 border-radius: 10px;

                 & img {
                     max-width: 100%;
                     min-width: 100%;
                     min-height: 100%;
                     max-height: 100%;
                     right: 0;
                     bottom: 0;
                     object-fit: cover;
                     border-radius: 10px 10px 0 0;
                     position: absolute;
                     flex-grow: 1;
                     transform: translate(10%, 20%);

                     transition: 400ms all;

                     &:hover {
                         transform: translate(5%, 10%);
                     }
                 }
             }

             .card-description {
                 display: flex;
                 flex-wrap: wrap;
                 flex-direction: column;
                 align-items: start;
                 justify-content: start;
                 gap: 10px;
                 flex-grow: 1;

                 & p {
                     font-weight: 400;
                     color: #000000a1;
                     flex-grow: 0;
                     flex-shrink: 0;
                 }

                 a {
                     color: #FFF8F3;
                     background-color: #353353;
                     padding: 10px 25px;
                     border-radius: 5px;
                     text-decoration: none;
                     font-weight: bold;
                     margin-top: auto;
                     align-self: end;
                     transition: 100ms all;

                     &:hover {
                         margin-right: 10px;
                     }
                 }


             }
         }


     }

     footer {
         padding: 2rem;
         max-width: 100%;
         margin: auto;
         background-color: #353353;
         color: white;
         border-radius: 10px;

         & p {
             font-size: 0.75rem;
             font-weight: bolder;
         }
     }

     @media (max-width: 1100px) {
         main {
             min-width: 100%;
         }

         & .profile {
             flex-wrap: wrap;
             justify-content: center;
             font-size: 1rem;

             & img {
                 flex-shrink: 1;
             }

             & .description {
                 & h1 {
                     justify-content: center;
                     flex-flow: column wrap;
                     flex-shrink: 1;
                     flex-grow: 1;
                 }

                 & p {
                     font-size: 1rem;
                 }
             }

             & .links-description {
                 justify-content: center;
                 flex-flow: row wrap;
             }
         }


         #projects {
             & .cards {
                 .card {
                     flex-direction: column;
                     flex-wrap: wrap;

                     & .background-img {

                         flex-grow: 1;
                         flex-basis: 300px;
                     }
                 }


             }

         }



     }