:root {
    --my-header-color: rgb(84, 178, 212);
    --my-header-color-dark: rgb(7, 1, 176);
    --light-background-color: rgb(169, 233, 231);
    --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; */
}

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; }
}

@view-transition {
    navigation: auto;
}

@supports not (navigation: auto) {
    body {
        animation: fadeIn 0.8s ease-in;
    }
}

@keyframes fade-out-up {
    from {
    opacity: 1;
    transform: translateY(0%);
    }
    to {
    opacity: 0;
    transform: translateY(100%);
    }
}
@keyframes fade-in-down {
    from {
    opacity: 0;
    transform: translateY(-100%);
    }
    to {
    opacity: 1;
    transform: translateY(0%);
    }
}

::view-transition-old(root) {
    animation: 0.4s ease-out both fade-out-up;
}


::view-transition-new(root) {
    animation: 0.4s ease-out both fade-in-down;
}

::view-transition-old(root),
::view-transition-new(root) {
    /* keep background consistent while animating */
    background: transparent;
}


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

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

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

header {
    z-index: 2;
    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: black;
        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: 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;
    /* a {
        color:grey;
    } */
}

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 {
        color: white;
    } */
    /* header {
        background-color: blue;
    } */

    nav a {
        color: white;
    }

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

}

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