/* ----------------------------------------------------- GENERAL -----------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

:root {
    --btn-color: rgb(53, 53, 53);
    --title-color: rgb(51, 51, 51);
    --paragraph-color: rgb(85, 85, 85);
    --subparagraph-color: rgb(103, 103, 103);
    --background-color: rgb(255, 255, 255);
    --spinner-border-color: rgba(0, 0, 0, 0.1);
    --links-color: rgb(0, 0, 0);
    --box-border: rgb(163, 163, 163);
    --box-color: rgb(250, 250, 250);
    --carousel-dot-color: rgb(204, 204, 204);
    --table-row-color: rgb(224, 224, 224);
    --table-row-color-even: rgb(243, 243, 243);
    --disabled-color: rgb(204, 204, 204);
    --table-hover-color: rgb(128, 128, 128);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --btn-color: rgb(230, 230, 230);
        --title-color: rgb(240, 240, 240);
        --paragraph-color: rgb(225, 225, 225);
        --subparagraph-color: rgb(190, 190, 190);
        --background-color: rgb(18, 18, 18);
        --spinner-border-color: rgba(225, 225, 225, 0.1);
        --links-color: rgb(255, 255, 255);
        --box-border: rgb(234, 234, 234);
        --box-color: rgb(39, 39, 39);
        --carousel-dot-color: rgb(110, 110, 110);
        --table-row-color: rgb(21, 21, 21);
        --table-row-color-even: rgb(60, 60, 60);
        --disabled-color: rgb(100, 100, 100);
        --table-hover-color: rgb(128, 128, 128);
    }
}

/*body {*/
/*    --btn-color: rgb(252, 186, 3) !important; !* Bright Amber *!*/
/*    --title-color: rgb(0, 128, 128) !important; !* Teal *!*/
/*    --paragraph-color: rgb(255, 69, 0) !important; !* Red-Orange *!*/
/*    --subparagraph-color: rgb(75, 0, 130) !important; !* Indigo *!*/
/*    --background-color: rgb(115, 115, 115) !important; !* Dark Grey *!*/
/*    --spinner-border-color: rgba(240, 128, 128, 0.3) !important; !* Light Coral *!*/
/*    --links-color: rgb(0, 191, 255) !important; !* Deep Sky Blue *!*/
/*    --box-border: rgb(182, 169, 101) !important; !* Gold *!*/
/*    --box-color: rgb(34, 139, 34) !important; !* Forest Green *!*/
/*    --carousel-dot-color: rgb(138, 43, 226) !important; !* Blue Violet *!*/
/*    --table-row-color: rgb(72, 61, 139) !important; !* Dark Slate Blue *!*/
/*    --table-row-color-even: rgb(173, 216, 230) !important; !* Light Blue *!*/
/*    --disabled-color: rgb(169, 169, 169) !important; !* Dark Grey *!*/
/*    --table-hover-color: rgb(255, 20, 147) !important; !* Deep Pink *!*/
/*}*/

* {
    margin: 0;
    padding: 0;
    /*border: 1px dashed rgb(255, 0, 0); !*For debugging*!*/
}

body {
    font-family: "Poppins", sans-serif;
    background: var(--background-color);
}

html {
    scroll-behavior: smooth;
}

p {
    color: var(--paragraph-color);
    font-size: 1.1rem;
}

/* ----------------------------------------------------- BUTTONS -----------------------------------------------------*/

.btn-container {
    display: flex;
    flex-wrap: wrap; /* allow buttons to wrap onto new lines */
    justify-content: center;
    gap: 1rem;
    margin-top: auto;
}

.btn {
    font-weight: 600;
    transition: all 300ms ease;
    width: auto;
    border-radius: 2rem;
    border: var(--btn-color) 0.1rem solid;
    background: none;
    padding: 1rem 1rem;
    white-space: nowrap;
    font-size: 1.1rem;
    color: var(--btn-color);
}

.btn:hover {
    cursor: pointer;
    background: var(--btn-color);
    color: var(--background-color);
    border: var(--background-color) 0.1rem solid;
}

/* ------------------------------------------------------ LINKS ------------------------------------------------------*/

a {
    color: var(--links-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

/* ---------------------------------------------------- NAVIGATION ---------------------------------------------------*/

.logo {
    color: var(--title-color);
    font-size: 2rem;
}

/* Navigation bar */
nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 17vh;
}

.nav-links {
    display: flex;
    color: var(--title-color);
    gap: 2rem;
    list-style: none;
    font-size: 1.5rem;
}

.menu-link,
footer .nav-links a {
    color: var(--title-color);
    text-decoration: none;
    text-decoration-color: var(--background-color);
    transition: all 0.25s ease;
}

.menu-link:hover,
footer .nav-links a:hover {
    text-decoration: underline;
    text-underline-offset: 0.5rem;
}

/* Hamburger menu */
#hamburger-nav {
    display: none;
    word-break: normal !important;
}

.hamburger-menu {
    position: relative;
    display: inline-block;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 24px;
    width: 30px;
    cursor: pointer;
}

.hamburger-icon span {
    width: 100%;
    height: 2px;
    background-color: var(--title-color);
    transition: all 0.25s ease-in-out;
}

.menu-links {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--background-color);
    width: fit-content;
    max-height: 0;
    overflow: hidden;
    transition: all 0.25s ease-in-out;
}

.menu-links a {
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
    color: var(--title-color);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.menu-links li {
    list-style: none;
}

.menu-links.open {
    max-height: 1000px;
}

.hamburger-icon.open span:first-child {
    transform: rotate(45deg) translate(10px, 5px);
}

.hamburger-icon.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-icon.open span:last-child {
    transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child {
    transform: none;
}

.hamburger-icon span:first-child {
    opacity: 1;
}

.hamburger-icon span:first-child {
    transform: none;
}

/* ----------------------------------------------------- SECTIONS ----------------------------------------------------*/

section { /* Used for sections of the website */

    /* Adds space at the bottom of the section, proportional to the viewport height */
    padding-top: 0;
    padding-bottom: 14vh;

    /* Adds horizontal margins, fixed at 6rem on both sides */
    margin-left: 6rem;
    margin-right: 6rem;
    margin-bottom: 6rem;

    /* Ensures padding and border are included in the element's total width and height */
    box-sizing: border-box;

    /* Sets the height to fit the content without exceeding it */
    height: fit-content;
}

/*Section intro text*/
.section-intro-title {
    font-size: 1.5rem;
    text-align: center;
}

/*Section title text*/
.section-title {
    color: var(--title-color);
    font-size: 3rem;
    text-align: center;
}

/*Container containing the content of each section. Switched to rows display for small screen*/
.section-content-container {
    justify-content: center;
    display: flex;
    gap: 4rem;
    height: 80%;
    margin-top: 2rem;
}

/*Container containing the sub-content of each section*/
.section-subcontent-container {
    display: flex;
    gap: 2rem;
    height: 80%;
}

/*Regular text container in the about section*/
.description-text {
    text-align: justify;
    margin-top: 2rem;
}

/*Container for pictures placed in a section content container*/
.section-pic-container {
    display: flex;
    height: 400px;
    width: 400px;
    margin: auto 0;
}

.section-description-text {
    text-align: center;
    margin-top: 1rem;
    font-size: 1.2rem;
    font-style: italic;
}


/* ----------------------------------------------------- WEB-APPS ----------------------------------------------------*/

#webapps {
    position: relative;
}

#projects {
    position: relative;
}

/* ----------------------------------------------------- PROFILE -----------------------------------------------------*/

#profile {
    flex: fit-content;
    display: flex;
    justify-content: center;
    gap: 5rem; /* Gap between the picture and the text */
    height: 83vh;
    padding-top: 13vh;
}

.circle-img {
    width: 100%;
    height: 100%;
}

#socials-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    column-gap: 3rem;
    gap: 1rem;
}

.icon {
    cursor: pointer;
    height: 3rem;
    padding: 0.5rem;
}


body.dark-mode .icon {
    filter: invert(0.9);
}

body.dark-mode .img-reverse {
    filter: invert(0.8);
}

.profile-text {
    align-self: center;
    text-align: center;
}

.profile-text p {
    font-weight: 600;
}

.job-title-text {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}


/* ------------------------------------------------------ ABOUT ------------------------------------------------------*/


#about {
    position: relative;
}

.border-container {
    padding: 1.5rem;
    flex: 1;
    background: var(--background-color);
    border-radius: 2rem;
    border: 0.1rem solid var(--box-border);
    text-align: center;
}

.about-details-container {
    justify-content: center;
    flex-direction: column;
    display: flex;
}

.about-pic {
    border-radius: 2rem;
}


.about-text {
    font-size: 0.9rem;
    color: var(--subparagraph-color);
}


/* ------------------------------------------------------ SKILLS -----------------------------------------------------*/

#skills {
    position: relative;
}

/* ----------------------------------------------------- SPINNER -----------------------------------------------------*/

.spinner-container-div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.spinner {
    border: 4px solid var(--spinner-border-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--btn-color);
    animation: spin 1s linear infinite;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.footer-copyright {
    text-align: center;
    padding: 20px;
}