@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");@import url("https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css");@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Oswald:wght@200..700&family=Pacifico&family=Quicksand:wght@300..700&display=swap");:root {--beige-shade: rgb(254, 249, 255);--pink-light-shade1: #fbd7e1;--pink-light-shade2: #e39bc4;--pink-medium-shade1: #e7709c;--pink-medium-shade2: #bc518c;--purple-light-shade1: #b8a7cbff;--purple-light-shade2: #b089be;--purple-dark-shade: #614e6c;--main-font: "Oswald", sans-serif;--secondary-font1: "Quicksand", sans-serif;--secondary-font2: "Lato", sans-serif;}@keyframes move {100% {transform: translate3d(0, 0, 1px) rotate(360deg);}}@keyframes wiggle {0% {transform: rotateZ(0);}20% {transform: rotateZ(-15deg);}40% {transform: rotateZ(10deg);}60% {transform: rotateZ(-10deg);}80% {transform: rotateZ(6deg);}100% {transform: rotateZ(-4deg);}}@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}* {margin: 0;padding: 0;box-sizing: border-box;scroll-behavior: smooth !important;}body {margin: 0;padding: 0;overflow-x: hidden;&::-webkit-scrollbar {width: 12px;}&::-webkit-scrollbar-track {background: var(--pink-light-shade1);border-radius: 25px;}&::-webkit-scrollbar-thumb {background: var(--purple-dark-shade);border-radius: 25px;border: 1px solid #fbd7e1;}@supports not selector(::-webkit-scrollbar) {body {scrollbar-color: var(--purple-dark-shade) var(--pink-light-shade1);}}}::selection {background-color: var(--pink-light-shade2);color: white;}main {display: flex;flex-direction: column;justify-content: center;align-items: center;}h2 {font-size: 2.5rem;font-family: var(--main-font);color: var(--purple-dark-shade);}.splash-screen {position: fixed;top: 50%;left: 0;height: 100%;width: 100%;background-color: var(--pink-light-shade1);z-index: 1001;display: flex;flex-direction: column;justify-content: center;align-items: center;transform: translateY(-50%);& p {width: 35rem;font-size: 4rem;letter-spacing: 1rem;font-family: monospace;color: var(--purple-light-shade1);text-shadow: 2px 1px 0px var(--purple-dark-shade);font-weight: bold;margin-bottom: 2rem;text-align: center;clip-path: inset(0 5ch 0 0);animation: loader 1s steps(5) infinite;}.eyes {width: 35rem;display: flex;justify-content: center;align-items: center;display: inline-flex;gap: 2rem;}.eyes:before, .eyes:after {content: "";height: 5rem;aspect-ratio: 1;border-radius: 50%;background: radial-gradient(farthest-side, var(--purple-dark-shade) 95%, #0000) 35% 35%/10px 10px no-repeat #fff;animation: move-eyes 3s infinite;}}@keyframes loader {to {clip-path: inset(0 -1ch 0 0) }}@keyframes move-eyes {0%, 11% {background-position: 35% 35% }14%, 36% {background-position: 65% 35% }38%, 61% {background-position: 65% 65% }64%, 86% {background-position: 35% 65% }88%, 100% {background-position: 35% 35% }}.hidden-splash {transform: translateY(100%);transition: all .75s ease;}.cursor-circle {position: fixed;z-index: 10;border-radius: 50%;border: 3px solid var(--purple-light-shade2);--cursor-size: 2.7rem;width: var(--cursor-size);height: var(--cursor-size);top: calc(-1 * var(--cursor-size) / 2);left: calc(-1 * var(--cursor-size) / 2);pointer-events: none;transition: transform 0.1s ease;}.up-button {position: fixed;bottom: 20px;right: 20px;padding: 0.6rem 0.8rem;font-size: 20px;border-radius: 50%;border: 2px solid var(--purple-dark-shade);color: var(--purple-dark-shade);background: var(--beige-shade);z-index: 100;&:hover {color: var(--pink-light-shade2);border: 2px solid var(--pink-light-shade1);box-shadow: 3px 3px 2px 2px var(--pink-light-shade2);transition: 0.3s;}}.circles-background {position: fixed;z-index: -100;width: 100vw;height: 100%;top: 0;left: 0;background: var(--beige-shade);overflow: hidden;& span {width: 30vmin;height: 30vmin;border-radius: 30vmin;backface-visibility: hidden;position: absolute;animation: move;animation-timing-function: linear;animation-iteration-count: infinite;box-shadow: 60vmin 0 8vmin currentColor;&:nth-child(1) {color: var(--pink-light-shade1);top: 69%;left: 2%;animation-duration: 55s;animation-delay: -11s;transform-origin: -21vw 16vh;}&:nth-child(2) {color: var(--pink-light-shade2);top: 47%;left: 95%;animation-duration: 41s;animation-delay: -39s;transform-origin: 0vw 12vh;box-shadow: -60vmin 0 8vmin currentColor;}&:nth-child(3) {color: var(--pink-medium-shade1);top: 94%;left: 55%;animation-duration: 41s;animation-delay: -22s;transform-origin: -7vw -17vh;}&:nth-child(4) {color: var(--pink-medium-shade2);top: 74%;left: 16%;animation-duration: 51s;animation-delay: -2s;transform-origin: 10vw 0vh;box-shadow: -60vmin 0 8vmin currentColor;}&:nth-child(5) {color: var(--purple-light-shade1);top: 76%;left: 35%;animation-duration: 9s;animation-delay: -43s;transform-origin: 13vw -8vh;}&:nth-child(6) {color: var(--purple-light-shade2);top: 46%;left: 47%;animation-duration: 45s;animation-delay: -15s;transform-origin: -12vw 7vh;box-shadow: -60vmin 0 8vmin currentColor;}&:nth-child(7) {color: var(--purple-light-shade1);top: 74%;left: 73%;animation-duration: 25s;animation-delay: -35s;transform-origin: 6vw -19vh;box-shadow: -60vmin 0 8vmin currentColor;}&:nth-child(8) {color: var(--purple-light-shade2);top: 48%;left: 19%;animation-duration: 32s;animation-delay: -15s;transform-origin: 11vw 12vh;box-shadow: -60vmin 0 8vmin currentColor;}&:nth-child(9) {color: var(--pink-light-shade1);top: 98%;left: 49%;animation-duration: 46s;animation-delay: -1s;transform-origin: 17vw -18vh;}&:nth-child(10) {color: var(--pink-light-shade2);top: 95%;left: 58%;animation-duration: 6s;animation-delay: -43s;transform-origin: -16vw -3vh;}}}header {font-family: var(--secondary-font2);position: fixed;z-index: 1000;top: 0;left: 0;width: 100vw;height: 4rem;display: flex;align-items: center;justify-content: space-between;padding: 0 2rem;opacity: 0.8;transition: background-color 0.4s linear;& a {color: var(--purple-dark-shade);text-decoration: none;}& .logo {letter-spacing: 0.3rem;& a:hover {transition: 0.3s;letter-spacing: 0.5rem;}}& nav {width: 25rem;& ul {display: flex;justify-content: space-between;list-style: none;& li a {border-radius: 20px;padding: 0.5rem;box-shadow: inset 0 0 0 0 var(--beige-shade);transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;&:hover {color: var(--purple-dark-shade);box-shadow: inset 100px 0 0 0 var(--beige-shade);transition: 0.5s;}}& li .current-page {color: var(--purple-dark-shade);box-shadow: inset 100px 0 0 0 var(--beige-shade);}}& .menu-label, .menu-toggle {display: none;}& .menu-button, .menu-button::before, .menu-button::after {background-color: var(--purple-dark-shade);position: absolute;height: 3px;width: 30px;transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);border-radius: 2px;}& .menu-button {&::before {content: '';margin-top: -8px;}&::after {content: '';margin-top: 8px;}}& .menu-toggle:checked+.menu-label .menu-button::before {margin-top: 0px;transform: rotate(405deg);}& .menu-toggle:checked+.menu-label .menu-button {background: rgba(255, 255, 255, 0);}& .menu-toggle:checked+.menu-label .menu-button::after {margin-top: 0px;transform: rotate(-405deg);}}}.sections-header {background-color: var(--purple-dark-shade);& a {color: var(--beige-shade);}& .menu-button, .menu-button::before, .menu-button::after {background-color: var(--beige-shade);}}main .home-page {padding-top: 6rem;height: 100vh;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-image: url("../images/backgrounds/home-page-background.gif");background-position: center;background-repeat: no-repeat;background-size: cover;border-bottom-right-radius: 15rem;border-bottom: 10px solid var(--pink-light-shade1);& h1 {font-size: 5rem;letter-spacing: 1rem;font-family: var(--main-font);color: var(--purple-light-shade1);text-shadow: 4px 2px 0px var(--purple-dark-shade);position: relative;padding-bottom: 1rem;margin-bottom: 1rem;text-align: center;&:before, &:after {position: absolute;content: "";left: 50%;transform: translateX(-50%);background-color: var(--purple-dark-shade);}&:before {width: 5rem;height: 0.4rem;bottom: -2.5px;}&:after {width: 70%;height: 0.1rem;bottom: 0;}}& .description {text-align: center;padding-top: 1.5rem;font-family: var(--secondary-font1);& h2 {font-size: 1.5rem;padding-bottom: 0.3rem;font-family: var(--secondary-font2);}}& .buttons-container {margin-top: 3rem;display: grid;grid-template-columns: repeat(2, 13rem);grid-template-rows: 3rem;gap: 5rem;a {text-decoration: none;text-transform: uppercase;text-align: center;font-weight: bolder;font-family: var(--secondary-font2);font-size: 0.75rem;letter-spacing: 0.1rem;border-radius: 10px;display: flex;justify-content: center;align-items: center;cursor: pointer;color: var(--purple-dark-shade);background: #fff0f0;border: 2px solid #b18597;transform-style: preserve-3d;transition: transform 150ms cubic-bezier(0, 0, 0.58, 1);&::before {position: absolute;content: "";width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: #f9c4d2;border-radius: inherit;box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;transform: translate3d(0, 0.75em, -1em);transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);}&:hover {background: #ffe9e9;transform: translate(0, 0.25em);}&:hover::before {box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;transform: translate3d(0, 0.5em, -1em);}&:active {background: #ffe9e9;transform: translate(0em, 0.75em);}&:active::before {box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;transform: translate3d(0, 0, -1em);}}}}main .about-page {width: 100%;padding: 7rem;display: flex;align-items: center;justify-content: center;& .border-div {width: 75rem;max-height: 95rem;display: flex;align-items: center;justify-content: center;padding: 2rem;border-radius: 2rem;border: 1px solid rgba(255, 255, 255, 0.125);background: rgba(255, 255, 255, 0.65);box-shadow: 0 0.75rem 2rem 0 rgba(0, 0, 0, 0.5);& .img-container {position: relative;margin-right: 3rem;max-width: 25rem;border-radius: 15px;border: 3px solid var(--pink-light-shade2);&::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.07);}&:hover {transition: 0.3s;box-shadow: 0 8px 16px 0 var(--purple-dark-shade);}& img {max-width: 100%;height: auto;display: block;border-radius: 15px;}}& article {display: flex;flex-direction: column;justify-content: center;align-items: center;& h2 {width: 100%;display: flex;justify-content: center;align-items: center;font-size: 2.5rem;color: var(--pink-light-shade2);border-bottom: 5px solid var(--pink-light-shade2);padding: 1rem 0rem;margin-bottom: 2rem;&:hover {animation-play-state: paused;cursor: pointer;}}& p {font-size: 1em;text-align: justify;color: var(--purple-dark-shade);font-family: var(--secondary-font1);padding-bottom: 1rem;}& mark {color: var(--purple-dark-shade);background-color: var(--pink-light-shade1);}}}}main .skills-page {width: 100%;height: 40rem;padding: 4rem 10rem;background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);background: linear-gradient(to right, #E9E4F0, #dacce3);border-top: 10px solid var(--pink-light-shade1);border-bottom: 10px solid var(--pink-light-shade1);display: flex;flex-direction: column;justify-content: center;align-items: center;& h2 {text-align: center;padding-bottom: 1rem;& i {font-size: 3rem;display: inline-block;margin: 0 2rem;animation: spin 7s linear infinite;&:hover {transition: 1s;cursor: pointer;color: var(--purple-light-shade2);}}}& h3 {font-family: var(--secondary-font2);color: var(--purple-dark-shade);text-align: center;padding-bottom: 2.5rem;}& ul {height: fit-content;list-style: none;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;& li {padding-left: 1.2rem;width: 12rem;height: 4.2rem;margin: 0.5rem;font-family: var(--secondary-font1);font-weight: 500;display: flex;justify-content: left;align-items: center;border-radius: 10px;border: 2px solid var(--beige-shade);color: var(--beige-shade);box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;background-size: 200% auto;background-image: linear-gradient(to right, var(--pink-light-shade2) 0%, var(--purple-light-shade1) 31%, var(--pink-light-shade1) 90%);transition: all .5s ease;& i {font-size: 1.8rem;padding-right: 1rem;}&:hover {cursor: pointer;font-weight: 900;background-position: right center;}}}}main .projects-page {width: 100%;padding: 4rem 0;& h2 {text-align: center;padding-bottom: 2rem;& i {margin: 0 2rem;color: var(--purple-dark-shade);animation: wiggle 2s linear infinite;&:hover {transition: 1s;cursor: pointer;color: var(--purple-light-shade2);}}}& .projects {list-style: none;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;padding: 0 1rem;gap: 2rem 4rem;font-family: var(--secondary-font1);& .project {width: 35rem;min-height: 25rem;padding: 1rem;background-color: rgba(255, 255, 255, 0.892);border-radius: 1rem;border: 2px solid var(--pink-light-shade1);box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);display: flex;flex-direction: column;overflow: hidden;&:hover {box-shadow: 10px 20px 40px 10px var(--purple-light-shade1);& img {filter: contrast(100%);}}& img {width: 100%;height: 13rem;object-fit: contain;border-top-left-radius: 0.7rem;border-top-right-radius: 0.7rem;filter: contrast(85%);object-fit: cover;}& .project-title {font-size: 1.25rem;padding-top: 0.8rem;padding-bottom: 0.6rem;color: var(--pink-medium-shade1);text-transform: capitalize;}& .topics {list-style: none;display: flex;flex-wrap: wrap;align-items: center;justify-content: left;margin-bottom: 0.5rem;& li {cursor: pointer;font-size: 0.85rem;padding: 0.3rem;margin-right: 0.4rem;border-radius: 5px;color: var(--pink-medium-shade2);background-color: var(--pink-light-shade1);border: 1px solid var(--pink-light-shade2);box-shadow: rgba(255, 255, 255, .7) 1px 1px 1px 1px inset;&:hover {transform: translateY(-1px);box-shadow: 0 4px 0 var(--pink-medium-shade1);}}}& .project-text {height: 5.5rem;text-align: justify;color: var(--purple-dark-shade);font-size: 1rem;padding-bottom: 1rem;}.projectsButtons {margin-top: auto;display: flex;align-items: center;justify-content: center;gap: 0rem 1rem;& a {width: 50%;}}& a {margin-top: auto;text-decoration: none;text-align: center;font-family: var(--secondary-font1);cursor: pointer;padding: 0.65rem;border-radius: 0.5rem;color: white;background-color: var(--pink-medium-shade1);border-style: none;border: 1px solid transparent;&:hover, :focus {transition: 0.3s;font-weight: bold;color: var(--pink-medium-shade2);background-color: var(--pink-light-shade1);border: 1px solid var(--pink-light-shade2);}}}}}main .contact-page {width: 100%;padding: 4rem 2rem;background-image: url("../images/backgrounds/contact-page-background.gif");background-position: center;background-repeat: no-repeat;background-size: cover;border-top-left-radius: 15rem;border-top: 10px solid var(--pink-light-shade1);display: flex;flex-direction: column;align-items: center;justify-content: center;& h2 {color: var(--pink-light-shade1);}& .contact-info-container {margin-top: 2rem;width: 65rem;height: 32rem;padding: 2rem;display: flex;align-items: center;justify-content: center;justify-content: space-between;border-radius: 2rem;border: 1px solid rgba(255, 255, 255, 0.125);background: rgba(255, 255, 255, 0.65);box-shadow: 4px 4px 8px 2px var(--purple-dark-shade);&:hover {transition: 0.3s;box-shadow: 8px 8px 16px 8px var(--purple-dark-shade);}& form {width: 45%;padding: 2rem 1rem;display: grid;grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));grid-template-rows: auto;grid-row-gap: 0.5rem;grid-column-gap: 1rem;justify-content: center;border-radius: 15px;border: 1px solid var(--pink-light-shade2);background-color: var(--pink-light-shade1);box-shadow: 1px 4px 8px 1px rgba(0, 0, 0, 0.2);&:hover {transition: 0.3s;box-shadow: 0 8px 16px 0 var(--purple-dark-shade);}& .row {display: flex;flex-direction: column;label {font-family: var(--secondary-font1);color: var(--purple-dark-shade);}input, textarea {padding: 0.5rem;font-family: var(--secondary-font1);color: var(--purple-dark-shade);border: 1px solid var(--purple-light-shade2);&:focus {outline-color: var(--purple-light-shade2);}}input {height: 2rem;}textarea {height: 9rem;resize: none;}}& .name-container {grid-area: 1 / 1 / 2 / 2;}& .email-container {grid-area: 1 / 2 / 2 / 3;}& .subject-container {grid-area: 2 / 1 / 3 / 3;}& .message-container {grid-area: 3 / 1 / 4 / 3;padding-bottom: 0.5rem;}& input[type="reset"] {grid-area: 4 / 1 / 5 / 2;}& input[type="submit"] {grid-area: 4 / 2 / 5 / 3;}& input[type="reset"], input[type="submit"] {height: 2.8rem;cursor: pointer;text-decoration: none;text-transform: uppercase;text-align: center;font-family: var(--secondary-font2);font-size: 0.75rem;letter-spacing: 0.1rem;display: flex;justify-content: center;align-items: center;color: var(--beige-shade);border-radius: 5px;border: 1px solid var(--beige-shade);background-color: var(--purple-dark-shade);box-shadow: 1px 3px 0 0 inset var(--beige-shade);&:hover, &:focus {transition: 0.5s;background-color: var(--pink-light-shade1);color: var(--purple-dark-shade);border: 1px solid var(--purple-dark-shade);box-shadow: 1px 3px 0 0 inset var(--purple-dark-shade);}&:focus {border: 4px solid var(--beige-shade);box-shadow: 0 0 0 4px var(--purple-light-shade1);}}}& article {width: 55%;margin-left: 2rem;font-style: normal;font-family: var(--secondary-font1);color: var(--purple-dark-shade);& h3 {font-size: 1.6rem;color: var(--purple-dark-shade);font-family: var(--secondary-font2);padding-bottom: 0.8rem;}& p {text-align: justify;padding-bottom: 1rem;}& .info-list {list-style: none;display: grid;grid-template-columns: 1fr 1fr;padding-top: 1rem;& li {display: flex;margin-bottom: 1.5rem;& span {display: block;width: 3rem;height: 3rem;border-radius: 50%;display: flex;justify-content: center;align-items: center;border: 0.15rem dashed var(--purple-dark-shade);background: var(--beige-shade);margin-right: 1rem;animation: spin 15s linear infinite;& i {font-size: 1.3rem;animation: spin 15s linear infinite reverse;}}& .info-container {width: 12rem;& h4 {font-family: var(--secondary-font2);font-size: 1.1rem;}}}}& .social-media {margin-top: 3rem;display: flex;justify-content: center;list-style: none;& li {margin-right: 1rem;a {position: relative;background: var(--beige-shade);border-radius: 50%;width: 3rem;height: 3rem;font-size: 1.5rem;color: var(--purple-dark-shade);display: flex;justify-content: center;align-items: center;box-shadow: 0 10px 10px rgba(50, 16, 49, 0.416);cursor: pointer;& .tooltip {position: absolute;top: 0px;font-size: 0.8rem;background: var(--beige-shade);color: var(--purple-dark-shade);padding: 5px 8px;border-radius: 5px;box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);opacity: 0;pointer-events: none;transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);&::before {position: absolute;content: "";height: 0.5rem;width: 0.5rem;background: var(--beige-shade);bottom: -3px;left: 50%;transform: translate(-50%) rotate(45deg);transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}}&:hover {box-shadow: 5px 15px 15px var(--pink-light-shade2);& .tooltip {top: -2.5rem;opacity: 1;visibility: visible;}}}}}}}}footer {height: 5rem;display: flex;flex-direction: column;align-items: center;justify-content: center;font-family: var(--secondary-font1);color: var(--beige-shade);background-color: var(--purple-dark-shade);}@media (max-width: 385px) {html {font-size: 9px;}header {padding: 0 1.5rem;& nav {width: 20rem;& ul {position: absolute;top: 0;left: 0;margin-top: 4rem;width: 100%;flex-direction: column;justify-content: center;align-items: center;border-top: 1px solid var(--beige-shade);& li {width: 100%;height: 3em;color: var(--beige-shade);background-color: var(--purple-dark-shade);overflow: hidden;&:not(:last-child) {border-bottom: 0.5px solid var(--beige-shade);}& a {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;color: var(--beige-shade);&:hover {box-shadow: inset 0px 0 0 0 var(--beige-shade);background-color: var(--beige-shade);transition: 0.5s;}}& .current-page {color: var(--beige-shade);background-color: var(--purple-dark-shade);box-shadow: inset 0 0 0 0 var(--beige-shade);}}}& .menu-label {cursor: pointer;display: flex;justify-content: end;align-items: center;}& .menu-toggle~ul li {height: 0;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}& .menu-toggle:checked~ul li {height: 3em;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}}}main .home-page {height: 60rem;padding-top: 15rem;border-bottom-right-radius: 0;& h1 {font-size: 4.5rem;letter-spacing: 0.2rem;}& .description {padding-left: 1rem;padding-right: 1rem;& h2 {padding-bottom: 0.5rem;}}& .buttons-container {grid-template-columns: repeat(2, 12rem);grid-template-rows: 3.5rem;gap: 4rem;a {font-size: 0.8rem;}}}main .about-page {padding: 7rem 3rem;& .border-div {width: 90vw;flex-direction: column;border-radius: 1rem;padding-top: 3rem;padding-bottom: 1.5rem;& .img-container {margin-right: 0rem;margin-bottom: 1rem;max-width: 20rem;border-radius: 0.5rem;& img {border-radius: inherit;}}& article {& h2 {border-radius: 0.5rem;padding: 0.5rem;margin-bottom: 1.5rem;}}}}main .skills-page {padding: 3rem 0;height: fit-content;& h3 {padding-bottom: 2rem;}}main .contact-page {border-top-left-radius: 6rem;& .contact-info-container {width: 30rem;height: fit-content;flex-direction: column;& form {width: 100%;}& article {width: 100%;margin: 2rem 1rem 0 1rem;& .info-list {grid-template-columns: auto;padding-top: 0.2rem;& li {margin-bottom: 0.5rem;& .info-container {width: auto;}}}& .social-media {margin-top: 1.5rem;margin-bottom: 1rem;& li {margin-right: 1rem;}}}}}}@media (min-width: 385px) and (max-width: 600px) {html {font-size: 11px;}header {padding: 0 1.5rem;& nav {width: 20rem;& ul {position: absolute;top: 0;left: 0;margin-top: 4rem;width: 100%;flex-direction: column;justify-content: center;align-items: center;border-top: 1px solid var(--beige-shade);& li {width: 100%;height: 3em;color: var(--beige-shade);background-color: var(--purple-dark-shade);overflow: hidden;&:not(:last-child) {border-bottom: 0.5px solid var(--beige-shade);}& a {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;color: var(--beige-shade);&:hover {box-shadow: inset 0px 0 0 0 var(--beige-shade);background-color: var(--beige-shade);transition: 0.5s;}}& .current-page {color: var(--beige-shade);background-color: var(--purple-dark-shade);box-shadow: inset 0 0 0 0 var(--beige-shade);}}}& .menu-label {cursor: pointer;display: flex;justify-content: end;align-items: center;}& .menu-toggle~ul li {height: 0;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}& .menu-toggle:checked~ul li {height: 3em;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}}}main .home-page {height: 60rem;padding-top: 15rem;border-bottom-right-radius: 0;& h1 {font-size: 4.5rem;letter-spacing: 0.2rem;}& .description {padding-left: 1rem;padding-right: 1rem;& h2 {padding-bottom: 0.5rem;}}& .buttons-container {grid-template-columns: repeat(2, 12rem);grid-template-rows: 3.5rem;gap: 4rem;a {font-size: 0.8rem;}}}main .about-page {padding: 7rem 4rem;& .border-div {max-width: 90vw;flex-direction: column;border-radius: 1rem;padding-top: 3rem;padding-bottom: 1.5rem;& .img-container {margin-right: 0rem;margin-bottom: 1rem;max-width: 20rem;border-radius: 0.5rem;& img {border-radius: inherit;}}& article {& h2 {border-radius: 0.5rem;padding: 0.5rem;margin-bottom: 1.5rem;}}}}main .skills-page {padding: 3rem 0;height: fit-content;& h3 {padding-bottom: 2rem;}}main .contact-page {border-top-left-radius: 6rem;& .contact-info-container {width: 30rem;height: fit-content;flex-direction: column;& form {width: 100%;}& article {width: 100%;margin: 2rem 1rem 0 1rem;& .info-list {grid-template-columns: auto;padding-top: 0.2rem;& li {margin-bottom: 0.5rem;& .info-container {width: auto;}}}& .social-media {margin-top: 1.5rem;margin-bottom: 1rem;& li {margin-right: 1rem;}}}}}}@media (min-width: 600px) and (max-width: 951px) {html {font-size: 13px;}header {& nav {& ul {position: absolute;top: 0;left: 0;margin-top: 4rem;width: 100%;flex-direction: column;justify-content: center;align-items: center;border-top: 1px solid var(--beige-shade);& li {width: 100%;height: 3em;color: var(--beige-shade);background-color: var(--purple-dark-shade);overflow: hidden;&:not(:last-child) {border-bottom: 0.5px solid var(--beige-shade);}& a {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;color: var(--beige-shade);&:hover {box-shadow: inset 0px 0 0 0 var(--beige-shade);background-color: var(--beige-shade);transition: 0.5s;}}& .current-page {color: var(--beige-shade);background-color: var(--purple-dark-shade);box-shadow: inset 0 0 0 0 var(--beige-shade);}}}& .menu-label {cursor: pointer;display: flex;justify-content: end;align-items: center;}& .menu-toggle~ul li {height: 0;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}& .menu-toggle:checked~ul li {height: 3em;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);}}}main .home-page {height: 60rem;padding-top: 10rem;border-bottom-right-radius: 0%;& h1 {letter-spacing: 0.1rem;}& .buttons-container {grid-template-rows: 3.5rem;}}main .about-page {& .border-div {max-width: 80vw;flex-direction: column;border-radius: 2.5rem;& .img-container {margin-right: 0rem;margin-bottom: 1rem;border-radius: 1.5rem;}& article {& h2 {border-radius: 0.5rem;padding: 0.5rem;margin-bottom: 1.5rem;}}}}main .skills-page {padding: 5rem 2rem;height: fit-content;& ul {& li {& i {font-size: 2rem;padding-right: 0.7rem;}}}}main .contact-page {border-top-left-radius: 6rem;& .contact-info-container {width: 38rem;height: fit-content;flex-direction: column;& form {width: 100%;}& article {width: 100%;margin: 2rem 3rem 0 3rem;& .info-list {grid-template-columns: auto;padding-top: 0.2rem;& li {margin-bottom: 0.5rem;& .info-container {width: auto;}}}& .social-media {margin-top: 1.5rem;margin-bottom: 1rem;& li {margin-right: 1rem;}}}}}}@media (min-width: 951px) and (max-width: 1350px) {main .about-page {width: 65rem;padding: 12rem 5rem;}main .skills-page {width: 100%;height: fit-content;padding: 4rem 5rem;}main .contact-page {border-top-left-radius: 10rem;& .contact-info-container {width: 55rem;height: 30rem;border-radius: 1.5rem;& form {width: 46%;}& article {width: 54%;margin-left: 1rem;& .info-list {& li {margin-right: 0.4rem;& .info-container {width: max-content;}}}}}}}