/* Header. */
#header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#logo {
    margin: var(--standard-margin);
    display: flex;
    align-items: center;
    cursor: pointer;
}

#logo img {
    width: var(--logo-size);
    margin: 0 var(--standard-margin) 0 0;
}

#logo span {
    font-size: var(--logo-font-size);
}

#header nav {
    margin: var(--standard-margin);
    display: flex;
    align-items: center;
}

#header nav a {
    margin: 0 var(--standard-margin);
    font-size: var(--title-font-size);
    text-decoration: none;
}

#header nav div {
    background-image: linear-gradient(
        180deg,
        hsla(0, 0%, 50%, 0),
        white,
        hsla(0, 0%, 50%, 0)
    );
    width: 1px;
    height: 100%;
}

/* Index. */
.wholePageTitleSection {
    min-height: calc(100svh - var(--header-height));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.wholePageTitleSection h1 {
    max-width: calc(min(800px, 80%));
}

.readMore {
    max-height: 0px;
    animation: readMore 1s 2s forwards;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@keyframes readMore {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 60px;
    }
}

.scrollDown {
    animation: scrollDown 0.5s linear 3s 4 forwards;
    position: relative;
    transform: rotate(90deg);
    display: inline-block;
}

@keyframes scrollDown {
    0% {
        top: 0px;
    }
    25% {
        top: 2px;
    }
    50% {
        top: 0px;
    }
    75% {
        top: -2px;
    }
    100% {
        top: 0px;
    }
}