@import "color-themes.css";

@keyframes fanPageText {
    0%      {color: var(--secundary-text-color, aqua);}
    100%    {color: whitesmoke;}
}

:root {
    --header-height: 8rem;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    color: var(--primary-text-color);

    scrollbar-width: thin;
    scrollbar-color: var(--secundary-theme-color) var(--primary-theme-color);
    scroll-padding-top: calc(var(--header-height) + 4rem);
    scroll-behavior: smooth;
}

h1 {
    font-size: 3.2rem;
}

h2 {
    font-size: 2.6rem;
}

h3 {
    font-size: 2.0rem;
}

p, a, li {
    font-size: 1.8rem;
}

body {
    width: 100%;
    height: fit-content;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--background-color);
    overflow-x: hidden;
}

header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--primary-theme-color);
    color: var(--secundary-theme-color);
    z-index: 1000;
}

header a span {
    animation-name: fanPageText;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
}

.header__title {
    font-size: 2.5rem;
}

.header__navigation {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__navigation a {
    width: 100%;
    display: block;
    font-size: 2rem;
    text-align: center;
    padding: 1rem;
    transition: all 0.2s cubic-bezier(0.76, 0, 0.24, 1);
}

.header__navigation a:hover {
    background-color: var(--secundary-theme-color);
    color: var(--primary-text-color);
}

main {
    width: 100%;
    padding: 5%;
    margin-top: var(--header-height);
    box-sizing: border-box;
    flex: 1;
}

footer {
    width: 100%;
    height: fit-content;
    min-height: 10rem;
    box-sizing: border-box;
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    flex: 0;
    background-color: var(--tertiary-theme-color);
    color: var(--secundary-theme-color);
    font-size: 1.2rem;
}

footer div {
    width: fit-content;
    min-width: 10%;
}

footer div p {
    font-size: 1.5rem;
}

footer a:hover {
    text-decoration: underline;
}

form{
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 10px;
}

form div{
    display: flex;
    flex-wrap: wrap;
}

form input{
    flex: 1;
    background-color: var(--secundary-theme-color);
    color: var(--primary-text-color);
}

label{
    margin: auto 0;
    text-align: center;
    flex: 1;
}

@media only screen and (max-width: 900px) {
    .menu__toggle {
        height: 8rem;
        aspect-ratio: 1 / 1;
    }

    #navigation__toggle__button {
        height: 100%;
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        appearance: unset;
        background-color: transparent;
    }

    #navigation__toggle__button:checked {
        appearance: unset;
    }

    .menu__toggle svg {
        height: 5rem;
        aspect-ratio: 1 / 1;
        margin: calc((8rem - 5rem) / 2);
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    .menu__toggle svg path {
        stroke: var(--secundary-text-color);
    }

    .menu__toggle #navigation__toggle__button + svg {
        transition: rotate 0.3s cubic-bezier(0.37, 0, 0.63, 1);
    }

    .menu__toggle #navigation__toggle__button:checked + svg {
        rotate: 90deg;
        transition: rotate 0.3s cubic-bezier(0.37, 0, 0.63, 1);
    }

    .menu__toggle:has(#navigation__toggle__button) ~ .header__navigation {
        display: none;
    }

    .menu__toggle:has(#navigation__toggle__button:checked) ~ .header__navigation {
        display: flex;
    }

    header:has(.menu__toggle #navigation__toggle__button:checked) {
        height: fit-content;
    }
}

@media only screen and (min-width: 900px) {
    header {
        flex-wrap: nowrap;
    }

    .menu__toggle {
        visibility: hidden;
    }
    
    .header__title {
        margin-left: 4rem;
    }
    
    .header__navigation {
        width: 75%;
        margin-left: 2rem;
        flex-direction: row;
    }

    .header__navigation a {
        border-radius: 1rem;
    }

    footer {
        justify-content: space-evenly;
    }
}