/* declarations */
:root {
    --flutter-blue: rgb(0, 199, 250);
    --flutter-dark-blue: rgb(0, 67, 123);
    --flutter-blue: rgba(0, 199, 250, 0.8);
    --flutter-dark-blue: rgba(0, 67, 123, 0.8);
    --rust-orange: rgb(167, 92, 0);
    --rust-dark-orange: rgb(151, 44, 6);
    --rust-orange: rgba(167, 92, 0, 0.8);
    --rust-dark-orange: rgba(151, 44, 6, 0.8);
    overscroll-behavior: none;
}

@keyframes entranceAnimation {
    0% {
        transform: translateY(-250vmin);
        opacity: 0;
    }

    80% {
        transform: translateY(7.5vmin);
        opacity: 1;
    }

    100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes appearAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.nw {
    white-space: nowrap;
}

.backgroundLogo {
    width: 100vmin;
    animation-delay: 0.1s;
    position: fixed;
    top: 0;
    left: calc(50% - 50vmin);
}

.background {
    height: max(61.89vw, 110vh);
    width: auto;
    position: fixed;
    top: -5vh;
    left: calc(50% - max(55vw, 97.78vh));
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.visible {
    transform: translateY(calc(-250vmin));
    opacity: 0;
    animation-name: entranceAnimation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.5, 0, .5, 1);
}

.top {
    background-size: cover;
    display: block;
    text-align: center;
    position: absolute;
    overflow-x: hidden;
    overflow-y: visible;
    top: 0;
    left: calc(50% - var(--screen-width) / 2);
    width: var(--screen-width);
    height: 100vmin;
}

.top>.design {
    background-color: var(--black-transparent);
    position: absolute;
    border: 1vmin solid white;
    border-radius: 15vmin;
    top: -25%;
    left: 0;
    height: 115%;
    width: calc(100% - 2vmin);
}

.top>p {
    margin: 0;
    padding: 0 2vmin;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s;
    position: absolute;
}

.top>.blueAnimation:hover {
    color: blue;
}

.top>.yellowAnimation:hover {
    color: yellow;
}

.top>.introduction {
    font-size: var(--font-size);
    animation-delay: 0.25s;
    top: 1vmin;
    left: 1vmin;
}

.top>.name {
    font-size: calc(2.5 * var(--font-size));
    animation-delay: 0.75s;
    top: calc(2 * var(--font-size));
    left: 6vmin;
}

.top>.nickname {
    font-size: var(--font-size);
    animation-delay: 1.25s;
    top: calc(5 * var(--font-size));
    right: 1vmin;
}

.top>.description {
    font-size: calc(1.5 * var(--font-size));
    top: calc(50% - 5 * var(--font-size));
    animation-delay: 2s;
}

.top>.title {
    font-size: calc(2 * var(--font-size));
    bottom: 20vmin;
    animation-delay: 3.5s;
}

.bottom {
    position: absolute;
    top: 105vmin;
    left: calc(50% - 0.5 * var(--screen-width));
    width: var(--screen-width);
}

.flutter {
    border-color: var(--flutter-blue);
    animation-delay: 6s;
}

.flutter>.description {
    background-color: var(--flutter-blue);
}

.flutter>a>.hoverable:hover {
    background-color: var(--flutter-dark-blue)
}

.rust {
    border-color: var(--rust-orange);
    animation-delay: 6s;
}

.rust>.description {
    background-color: var(--rust-orange);
}

.rust>a>.hoverable:hover {
    background-color: var(--rust-dark-orange)
}

.hoverable {
    transition: background-color 0.2s;
}

.section>.description {
    width: 100%;
    height: calc(2 * var(--font-size));
    font-size: calc(2 * var(--font-size));
    padding: 0 0 calc(var(--font-size) / 2) 0;
    line-height: normal;
    user-select: none;
}