/* Imported fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend+Exa:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Akira Expanded */
@font-face {
    font-family: 'Akira Expanded';
    src: url('../fonts/AkiraExpanded.otf') format('opentype');
}

/* Nexa Bold */
@font-face {
    font-family: 'Nexa Bold';
    src: url('../fonts/NexaBold.otf') format('opentype');
}

/* Global Variables */
:root {
    --primary-color: #1B879F;
    --secondary-color: #D7C5B2;
    --tertiary-color: #F5EDE3;
    --quaternary-color: #AE8C66;
    --khaki: #C4B9AB;
    --dark-khaki: #938C82;
    --white: #FFFFFF;
}

/* Customized style when texts are highlighted */
::selection {
    background-color: #80B3BB;
    color: var(--tertiary-color);
}

* {
    /* Remove default margin */
    margin: 0;
    /* Remove default padding */
    padding: 0;
    /* Include padding and border in element's total width and height */
    box-sizing: border-box;
    /* Set default font */
    font-family: 'Lexend Exa', sans-serif;
    /* Smooth scroll */
    scroll-behavior: smooth;
    z-index: 2;
}

body {
    display: flex;
    /* Stack children vertically */
    flex-direction: column;
    /* Take up the full height of the viewport */
    min-height: 100vh;
}

main {
    /* Fill remaining space */
    flex-grow: 1;
    background-color: var(--secondary-color);
    position: relative;
    overflow: hidden;
}

/* -------------------------- [GENERAL STYLES] ------------------------------- */
button {
    /* remove default style */
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.section-title {
    font-size: 2.25rem;
    padding: .5rem 1rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 900;
    font-family: 'Akira Expanded', sans-serif;
}

.two-columns {
    display: grid;
    /* 2 columns with equal width */
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 1rem;
    max-width: 1024px;
    margin: 0 auto;
}

.padding-top {
    padding-top: 7rem;
    /* Add space at the top */
}

a {
    text-decoration: none;
}

.text-right {
    text-align: right;
}

/* Reference: https://wavier.art/ */
/* Top waves */
.wave-top-1 {
    position: relative;
}

.wave-top-1::before {
    content: "";
    width: 100%;
    height: 41px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 41vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 22L33 19C82 13 133 14 200 29C267 44 333 67 400 70C467 74 533 59 600 40C667 22 733 0 800 0C867 0 933 22 1000 29C1067 37 1133 29 1167 26L1200 22V134H1167C1133 134 1067 134 1000 134C933 134 867 134 800 134C733 134 667 134 600 134C533 134 467 134 400 134C333 134 267 134 200 134C133 134 67 134 33 134H0V22.332Z' fill='%231b879f'/></svg>");
}

.wave-top-2 {
    position: relative;
}

.wave-top-2::before {
    content: "";
    width: 100%;
    height: 62px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 51vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 22L33 19C82 13 133 14 200 29C267 44 333 67 400 70C467 74 533 59 600 40C667 22 733 0 800 0C867 0 933 22 1000 29C1067 37 1133 29 1167 26L1200 22V134H1167C1133 134 1067 134 1000 134C933 134 867 134 800 134C733 134 667 134 600 134C533 134 467 134 400 134C333 134 267 134 200 134C133 134 67 134 33 134H0V22.332Z' fill='%237fb3bb'/></svg>");
}

/* Bottom waves */
.wave-bottom-1 {
    position: relative;
}

.wave-bottom-1::before {
    content: "";
    width: 100%;
    height: 41px;
    position: absolute;
    left: 0;
    transform: rotate(180deg);
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 41vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 22L33 19C82 13 133 14 200 29C267 44 333 67 400 70C467 74 533 59 600 40C667 22 733 0 800 0C867 0 933 22 1000 29C1067 37 1133 29 1167 26L1200 22V134H1167C1133 134 1067 134 1000 134C933 134 867 134 800 134C733 134 667 134 600 134C533 134 467 134 400 134C333 134 267 134 200 134C133 134 67 134 33 134H0V22.332Z' fill='%231b879f'/></svg>");
}

.wave-bottom-2 {
    position: relative;
}

.wave-bottom-2::before {
    content: "";
    width: 100%;
    height: 62px;
    position: absolute;
    left: 0;
    transform: rotate(180deg);
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 51vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 22L33 19C82 13 133 14 200 29C267 44 333 67 400 70C467 74 533 59 600 40C667 22 733 0 800 0C867 0 933 22 1000 29C1067 37 1133 29 1167 26L1200 22V134H1167C1133 134 1067 134 1000 134C933 134 867 134 800 134C733 134 667 134 600 134C533 134 467 134 400 134C333 134 267 134 200 134C133 134 67 134 33 134H0V22.332Z' fill='%237fb3bb'/></svg>");
}

.wave-space {
    background-color: var(--primary-color);
    padding: 2rem;
}

/* Reference: https://stackoverflow.com/questions/58541438/css-animated-wavy-line-not-displaying-properly-in-chrome */
/* Curly Lines */
.wavy-line {
    width: 50%;
    height: 50px;
    overflow: hidden;
    transform: translateY(-10px);
    position: relative;
}

.wavy-line.full-width {
    width: 95%;
    max-width: 1024px;
    margin: auto;
    transform: translateY(10px);
}

.wavy-line:before {
    content: attr(data-text);
    position: absolute;
    top: -35px;
    color: rgba(0, 0, 0, 0);
    width: calc(100% + 27px);
    font-size: 3em;
    text-decoration-style: wavy;
    text-decoration-color: var(--primary-color);
    text-decoration-line: underline;
}

.wavy-line-white:before {
    text-decoration-color: var(--tertiary-color);
}

/* Leaf image in background */
.top-leaf {
    position: absolute;
    top: 5rem;
    left: -100px;
    z-index: 1;
    width: 200px;
}

.bottom-leaf {
    position: absolute;
    bottom: -50px;
    right: -80px;
    z-index: 1;
    width: 200px;
}

/* ---------------------------- [NAVIGATION BAR] ---------------------------------- */
header {
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    /* Center the content */
    text-align: center;
}

/* Putting the header on top of all elements */
header,
header * {
    z-index: 3;
}

header nav {
    /* Display as block element */
    display: inline-block;
    width: auto;
    padding: 0.75rem 1.75rem;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 2rem;
}

header nav ul {
    /* Remove bullet points */
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Nav Links */
header nav ul li a {
    /* Display as block element */
    display: inline-block;
    color: var(--secondary-color);
    font-size: 0.85rem;
    font-family: 'Akira Expanded', sans-serif;
    /* Uppercase text */
    text-transform: uppercase;
    padding: 0.25rem 1.5rem;
    /* Rounded corners */
    border-radius: 2rem;
    /* background-color: var(--tertiary-color); */
    color: var(--primary-color);
    font-weight: 700;
    transition: background-color 0.3s ease;
}

/* Active nav link style */
header nav ul li a.active {
    background-color: var(--tertiary-color);
    color: var(--primary-color);
}

/* Hover nav link style */
header nav ul li a:hover {
    background-color: var(--tertiary-color);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: inline-block;
    /* Allow padding to work */
}

.dropdown-content {
    /* Hide the submenu by default */
    display: none;
    /* Position in the center */
    position: absolute;
    left: -1.5rem;
    right: -1.5rem;
    /* Position it below the dropdown */
    background-color: rgba(255, 255, 255);
    /* Ensure it appears above other elements */
    z-index: 3;
    border-radius: .5rem;
}

.dropdown:hover .dropdown-content {
    display: block;
    /* Show the submenu on hover */
}

.dropdown-content li {
    padding: 0.5rem;
}

.dropdown-content li a {
    color: var(--primary-color);
}

/* On hover for submenu items */
.dropdown-content li a:hover {
    background-color: var(--tertiary-color);
}

/* ----------------------- [FOOTER] --------------------------- */
footer {
    background-color: var(--quaternary-color);
    color: var(--tertiary-color);
    text-align: center;
    padding: 0.75rem;
}

footer p {
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* -------------------------------- [HOME] -------------------------------- */
/* Landing */
#landing {
    display: flex;
    flex-direction: column;
    /* Center children vertically */
    justify-content: center;
    /* Center children horizontally */
    align-items: center;
    /* Take up the full height of the viewport */
    height: 100vh;
    /* Setting the background */
    color: var(--tertiary-color);
    /* Fallback color */
    background-color: var(--primary-color);
    background-image:
        /* Gradient */
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 75%, #C7BCAF 100%),
        /* Image/GIF */
        url('../images/home/landing-bg.gif');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#landing-title {
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: .25rem;
    color: var(--white);
    font-family: 'Akira Expanded', sans-serif;
}

#landing-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--white);
    font-family: 'Nexa Bold', sans-serif;
}

#landing-btn {
    position: relative;
    overflow: hidden;
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.5rem 1.75rem;
    border-radius: 1rem;
    font-family: 'Akira Expanded', sans-serif;
}

#landing-btn::after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    transform: translateY(100%);
    background: url('../images/home/btn-hover.png');
    transition: transform 0.3s ease;
}

#landing-btn:hover::after {
    transform: translateY(0);
}

/* Learning Outcomes */
#learning-outcomes {
    background: linear-gradient(#C7BCAF, var(--secondary-color));
    padding: 3rem 0;
}

/* Image container */
#image-gallery {
    /* Display as grid */
    display: grid;
    /* 5 columns with equal width */
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    max-width: 1024px;
    margin: 5rem auto 0rem;
}

#image-gallery figure {
    width: 100%;
    position: relative;
    transition: transform 0.3s ease;
}

#image-gallery figure a {
    display: block;
}

/* When the shell is hovered */
#image-gallery figure:hover {
    transform: translateY(-0.5rem);
    z-index: 1;
}

#image-gallery figure img {
    /* Take up the full width of the parent */
    width: 100%;
    filter: drop-shadow(4px 3px 2px rgba(0, 0, 0, 0.4));
}

#image-gallery figure figcaption {
    position: absolute;
    /* Positioning the text at the center */
    top: 50%;
    left: 1.5rem;
    right: 1.5rem;
    transform: translateY(-50%);
    font-size: 0.75rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--tertiary-color);
    cursor: pointer;
}

/* About Me */
#about-me {
    background-color: var(--primary-color);
    position: relative;
    margin-top: 3rem;
    padding-bottom: 3rem;
}

/* Image on the left side */
#about-me figure {
    text-align: center;
    padding: 0 1rem;
}

#about-me figure img {
    width: 100%;
    max-width: 350px;
    border-radius: .5rem;
}

/* Article on the right side */
#about-me article h2 {
    font-size: 6rem;
    text-transform: uppercase;
    color: var(--secondary-color);
    font-family: 'Akira Expanded', sans-serif;
    text-align: center;
}

#about-me article p {
    font-size: 0.9rem;
    text-align: justify;
    color: var(--secondary-color);
    font-weight: 400;
}

#skills-interests {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns with equal width */
    gap: 1rem;
    margin-top: 2rem;
}

.skills-interests-title {
    font-family: 'Akira Expanded', sans-serif;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

#skills-interests article {
    text-align: center;
}

#skills-interests article figure {
    display: flex;
    justify-content: center;
    /* Center items horizontally */
    flex-wrap: wrap;
    gap: 0.25rem;
    /* Spacing between items */
}

#skills-interests article figure img {
    max-width: 23%;
}

/* A slightyly larger width for interests icons */
#skills-interests article#interests figure img {
    max-width: 24%;
}

/* --------------------------- [PROJECTS]---------------------------------- */
#projects-container {
    background-color: var(--tertiary-color);
}

#projects .two-columns {
    padding: 3rem 1rem;
}

/* Image */
#projects .square-img-container {
    display: block;
    overflow: hidden;
    text-align: center;
}

#projects .square-img-container img {
    width: 100%;
    background-color: var(--khaki);
    max-width: 300px;
    aspect-ratio: 1/1;
    border-radius: .75rem;
    border: 3px solid var(--dark-khaki);
}

/* Article */
.proj-info {
    padding: 1rem;
}

.proj-title {
    font-size: 1.75rem;
    text-transform: uppercase;
    color: var(--primary-color);
    font-family: 'Akira Expanded', sans-serif;
    margin-bottom: 1rem;
}

.proj-info .holder {
    width: 50%;
    /* Adjusting the position */
    position: relative;
    bottom: -0.75rem;
}

.proj-desc {
    font-size: 0.9rem;
    text-align: justify;
    color: var(--primary-color);
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.proj-more-btn {
    position: relative;
    display: inline-block;
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5rem 1.75rem;
    border-radius: 1rem;
    overflow: hidden;

    transition: background-color 0.3s ease;
}

.proj-more-btn::after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-image: linear-gradient(to right, rgba(77, 157, 174, 0), #4D9DAE);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.proj-more-btn:hover::after {
    opacity: 1;
}

.colored-proj {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
    margin: 2rem 0;
}

/* Setting the font color for all children */
.colored-proj * {
    color: var(--tertiary-color);
}

.colored-proj .proj-more-btn {
    border-color: var(--tertiary-color);
    color: var(--primary-color);
    background-color: var(--tertiary-color);
}

.colored-proj .proj-more-btn:hover {
    background-color: var(--tertiary-color);
    color: var(--primary-color);
}

.colored-proj .square-img-container img {
    background-color: rgba(20, 90, 101, 0.32) !important;
    border: 3px solid #1B879F !important;
}

/* -------------------------- [SPECIFIC PROJECT] --------------------------------- */
/* Project Top */
#project-container {
    background-color: #4D9DAE;

    display: flex;
    flex-direction: column;
}

.project-info {
    padding: 1rem;
}

.project-title {
    font-size: 2.25rem;
    text-transform: uppercase;
    color: var(--tertiary-color);
    font-family: 'Akira Expanded', sans-serif;
    margin-bottom: 1rem;
}

.project-desc {
    font-size: 1rem;
    text-align: justify;
    color: var(--tertiary-color);
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* Image */
#project-top .square-img-container {
    display: block;
    text-align: center;
    margin: 0 1rem;
}

#project-top .square-img-container img {
    width: 100%;
    height: 100%;
    max-width: 400px;
    aspect-ratio: 16/9;
    background-color: var(--primary-color);
}

/* Project Bottom */
#project-bottom {
    background-color: var(--primary-color);
    margin-top: 3rem;
    flex: 1;
    /* Fill the remaining space */
    display: flex;
    flex-direction: column;
}

#more-info {
    background-color: var(--tertiary-color);
    width: 95%;
    /* Limit the width */
    max-width: 1024px;
    /* Center the content */
    margin: 1rem auto 0;
    padding: 2rem 3rem 1rem;
    border-top-left-radius: 1.75rem;
    border-top-right-radius: 1.75rem;
    flex: 1;
    /* Fill the remaining space */
}

#more-info h2 {
    margin-bottom: 1rem;
}

#more-info .title {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--primary-color);
    font-family: 'Akira Expanded', sans-serif;
    margin-bottom: 1rem;
}

#more-info .desc {
    text-align: justify;
    color: var(--primary-color);
    font-weight: 200;
    margin-bottom: 1.5rem;
}

#more-info .desc a {
    color: #52DEF4;
    text-decoration: underline;
}

#project-bottom .holder {
    /* Adjusting the position */
    position: relative;
    bottom: -0.8rem;
}

/* ---------------------- [OUTCOMES] ------------------------------ */
#outcomes-container {
    background-color: var(--tertiary-color);
}

.outcome-top,
.outcome-bottom {
    max-width: 1024px;
    width: 95%;
    margin: 1rem auto 0;
}

.outcome-desc {
    text-align: center;
    max-width: 700px;
    /* Center */
    margin: 1rem auto 0;
    color: #145A65;
    font-weight: 700;
    font-size: 1.5rem;
}

#outcomes-container .holder {
    width: 95%;
    max-width: 1024px;
    margin: 3rem auto 0;
}

.outcome-more-info {
    color: var(--primary-color);
    font-weight: 300;
}

.outcome-bottom {
    padding-bottom: 5rem;
}

.outcome-bottom section {
    margin-top: 2rem;
}

.outcome-title {
    background-color: var(--primary-color);
    display: inline-block;
    padding: .5rem 2.5rem;
    border-radius: 2rem;
    color: var(--tertiary-color);
    font-family: 'Lexend Exa', sans-serif;
    text-transform: uppercase;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.evidences-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.evidences-container figure {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--primary-color);
    cursor: pointer;
}

.evidences-container img {
    opacity: 0.5;

    transition: opacity 0.3s ease;
}

.evidences-container figure.active img {
    opacity: 1;
}

.evidences-container figure.active figcaption {
    font-weight: 800;
    color: #4D9DAE;
}

.evidence {
    background-color: var(--primary-color);
    padding: 0 1rem 6rem;
    position: relative;
    display: none;
}

.evidence .container {
    max-width: 1024px;
    margin: 0 auto;
}

/* Only show when there is a classname .show */
.evidence.show {
    display: block;
}


/* Close button */
.close-btn {
    position: absolute;
    right: 2rem;
    top: -3rem;
}

.close-btn img {
    width: 40px;
}

.evidence .section-title {
    color: var(--tertiary-color);
}

.evidence-desc {
    color: var(--tertiary-color);
    text-align: justify;
    font-weight: 300;
    line-height: 1.5rem;
}

.evidence-image-container {
    margin-top: 3rem;
    padding: 10px; /* Add padding to create space around content */
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scrolling */
    white-space: nowrap; /* Prevent wrapping of content */
    text-align: center;
}

/* WebKit browsers styling */
.evidence-image-container::-webkit-scrollbar {
    width: thin; /* Width of vertical scrollbar */
}

.evidence-image-container img {
    background-color: var(--tertiary-color);
    width: 48%;
    min-width: 270px;
    margin-right: 1rem;
    /* Maintain aspect ratio */
    aspect-ratio: 16/9;
    border-radius: .5rem;
}

/* ---------------------- [CONTACT] ------------------------------ */
#contact-container {
    background-color: var(--primary-color);
    background-image:
        /* Gradient */
        linear-gradient(to bottom, rgba(255, 255, 255, 0) 75%, #C7BCAF 100%),
        /* Image/GIF */
        url('../images/home/landing-bg.gif');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;

    /* To make the first child element consume all the possible space */
    display: flex;
    flex-direction: column;
}

#contacts {
    /* Consume all the possible space */
    flex: 1;
}

#contacts .section-title {
    color: var(--tertiary-color);
}

#contacts #contact-details {
    background-color: rgba(229, 223, 216, 0.9);
    width: 95%;
    /* Limit the width */
    max-width: 1024px;
    /* Center the content */
    margin: 1rem auto 2rem;
    border-radius: 1.75rem;
    padding: 3rem 2rem;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 2rem;
}

#contacts #contact-details figure {
    display: flex;
    align-items: center;
}

#contacts #contact-details figure .circle-img-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 1rem;
    overflow: hidden;
    background-color: var(--primary-color);
    /* Center child */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

#contacts #contact-details figure img {
    width: 70%;
}

#contacts #contact-details figure figcaption {
    background-color: var(--tertiary-color);
    flex: 1;
    transform: translateX(-1rem);
    text-align: center;
    padding: 1rem 2rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    color: var(--primary-color);
    /* Break letters */
    word-break: break-all;
}

#contacts #contact-details figure figcaption a {
    color: var(--primary-color);
    text-decoration: underline;
}

#feedback {
    background-color: var(--primary-color);
    margin-top: 5rem;
}

#feedback section {
    display: flex;
    justify-content: center;
    align-items: center;
}

#feedback .section-title {
    color: var(--tertiary-color);
}

#feedback figure {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#feedback figure img {
    width: 25%;
    max-width: 200px;
}

/* ---------------------------- [MEDIA QUERIES] ----------------------------- */
/* Medium devices (landscape tablets, 768px to 991px) */
@media only screen and (max-width: 991px) {

    /* Image container */
    #image-gallery {
        grid-template-columns: repeat(3, 1fr);
        max-width: 700px;
    }

    #contacts #contact-details {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }
}

/* Wave */
@media(max-width:850px) {
    .wave-top-1::before {
        height: 20.5px
    }

    .wave-top-2::before {
        height: 20.5px
    }

    .wave-bottom-1::before {
        height: 20.5px
    }

    .wave-bottom-2::before {
        height: 20.5px
    }
}

/* Small devices (portrait tablets and large phones, 600px to 767px) */
@media only screen and (max-width: 767px) {

    .padding-top {
        padding-top: 9rem;
    }

    .two-columns {
        grid-template-columns: 1fr;
    }

    #landing-title {
        font-size: 3.25rem;
    }

    #landing-subtitle {
        font-size: 1.25rem;
    }

    #landing-btn {
        font-size: 1rem;
    }

    /* Reverse order for specific items */
    .colored-proj .grid-item:nth-child(1) {
        order: 2;
    }

    .colored-proj .grid-item:nth-child(2) {
        order: 1;
    }

    .proj-info {
        text-align: center;
    }

    .proj-info .holder {
        width: 100%;
    }

    .evidences-container {
        grid-template-columns: repeat(2, 1fr);
    }

    #feedback section {
        flex-direction: column;
    }
}

/* Small devices (phones, 468px to 600px) */
@media only screen and (max-width: 600px) {

    #landing-title {
        font-size: 2.75rem;
    }

    #landing-subtitle {
        font-size: 1rem;
    }

    #landing-btn {
        font-size: .8rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    /* Image container */
    #image-gallery {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #about-me article h2 {
        font-size: 4rem;
    }

    #skills-interests {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin: 0 auto;
    }

    #feedback figure img {
        width: 50%;
    }
}

/* Extra small devices (phones, 468px and down) */
@media only screen and (max-width: 468px) {
    .padding-top {
        padding-top: 11rem;
    }

    footer p {
        font-size: 0.75rem;
    }

    .evidences-container {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}