:root {
    --my-header-color: color(from blue srgb 0.25 0.1 0.67);
    --light-background-color: color-mix(in hsl, hsl(200 50 80), rgb(50, 88, 58));
    --dark-background-color: color(from black srgb 0.07451 0.121568 0.129412);

    --small-font: 12px;
    --medium-font: 18px;
    --large-font: 20px;

    color-scheme: light dark;
}

header {
    z-index: 2;
}

body {
    font-family: swansea, Helvetica, sans-serif;
    background-color: light-dark(var(--light-background-color, lightblue), var(--dark-background-color, black));
    font-size: var(--small-font, 12px);
    animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

img {
    max-width: 33%;
    height: auto;
}

aside img {
    max-width: 33%;
    height: auto;
}

iframe#mlsite {
    width: 75%;
    height: 100%;
}

header {
    border: 1px solid var(--my-header-color, lightblue);
    padding-bottom: 5dvh;
    padding-left: 2dvw;
    padding-right: 2dvw;
    background-color: var(--my-header-color, lightblue);
    position: sticky;
    top: 0;
}

nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    & a {
        position: relative;
        display: inline-block;
        font-size: 1em;
        border-radius: 25px;
        padding: 0.5em 1em;
        color: white;
        text-decoration: none;
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0%;
            background-color: green;
            z-index: -1;
            transition: height 0.4s ease;
            border-radius: 25px;
        }

        &:hover::before {
            height: 100%;
        }

        &:hover {
            color: blue;
        }
    }

}

nav.links {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    align-items: center;
    
}

nav.site-links {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    align-items: center; 
}

form {
    background-color: lightslategray;
}

form#feedback-form {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    align-items: center; 
}

form:has(input:invalid) {
    button:hover {
        border: 2px solid red;
    }
}

button {
    size: 2em;
}


@media screen and (min-width: 600px) {
    body {
        font-size: var(--medium-font, 18px);
    }

    button {
        font-size: 1.5em;
    }
}

@media screen and (min-width: 900px) {
    body {
        font-size: var(--large-font, 20px);
    }

    nav a {
        font-size: 1.5em;
    }

    section.about-me {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr;
        justify-items: center;
        & aside {
            grid-column: 1 / 2;
        }
        & article {
            grid-column: 2 / 3;
        }
    }

    section.my-experience {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        justify-items: center;
        & section#my-resume {
            grid-column: 1 / 2;
        }
        & section#my-skills {
            grid-column: 2 / 3;
        }
        & section#education {
            grid-column: 3 / 4;
        }
    }

    main#projects-page {
        section.project {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 4fr;
            justify-items: center;

            & h3 {
                grid-column: 1 / 3;
                grid-row: 1 / 2;
            }

            & img {
                grid-column: 1 / 2;
                grid-row: 2 / 6;
            }

            & iframe {
                grid-column: 1 / 2;
                grid-row: 2 / 6;
            }

            & p:not(.special) {
                grid-column: 2 / 3;
                grid-row: 2 / 6;
            }

            & p.special {
                grid-column: 1 / 3;
                grid-row: 2 / 6;
            }
        }
    }

    button {
        font-size: 0.5em;
    }

    aside img {
        max-width: 100%;
        height: auto;
    }
}


footer {
    background-color: rgb(66, 203, 45);
    border: 1px solid var(--light-background-color, bisque);
    padding-top: 0.75rem;
}

footer.form-foot {
    display: grid;
    grid-template-rows: 1fr 1fr 5fr;
}

button:hover {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}

@font-face {
  font-family: swansea;
  src: url(../assets/swansea-font/Swansea-q3pd.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: swansea;
  src: url(../assets/swansea-font/SwanseaBold-D0ox.ttf);
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: swansea;
  src: url(../assets/swansea-font/SwanseaItalic-AwqD.ttf);
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: swansea;
  src: url(../assets/swansea-font/SwanseaBoldItalic-p3Dv.ttf);
  font-weight: bold;
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
    body {
        /* background-color: black; */
        color: white;
    }

    footer {
        background-color: lightseagreen;
        border-color: var(--dark-background-color, lightseagreen);
    }

}

img#colab-img {
    filter: contrast(1.25);
    z-index: 1;
}