@font-face {
    font-family: "Pretendard Std";
    font-weight: 700;
    font-display: swap;
    src:
        local("Pretendard Std Bold"),
        url(/resources/woff2/PretendardStd-Bold.woff2) format("woff2");
}

@font-face {
    font-family: "Pretendard Std";
    font-weight: 400;
    font-display: swap;
    src:
        local("Pretendard Std Regular"),
        url(/resources/woff2/PretendardStd-Regular.woff2) format("woff2");
}

* {
    font-family: "Pretendard Std";
}

body {
    margin: 0px;
}

header {
    background: linear-gradient(30deg, #00eaff 0%, #0081ff 100%);
    border-radius: 5px;

    display: flex;
    align-items: center;

    position: sticky;
    top: 10px;
    margin: 10px;
    margin-top: 0px;

    color: cornsilk;
}

header > div:nth-child(1) > h1 {
    display: inline-block;
    text-align: center;
}

header div:nth-child(1) > h1:nth-child(1) {
    margin-left: 1em;
    margin-right: 0.75em;
    font-size: 2.5em;
    transform: rotate(350deg);
}

header > div:nth-child(2) {
    margin-left: auto;
    margin-right: 2em;
}

header > div:nth-child(2) > span:nth-child(1) {
    display: none;
}

@media (width >= 1024px) {
    header {
        background: linear-gradient(30deg, #00eaff 0%, #0081ff 100%);
        border-radius: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        top: 0;
        margin: 0;

        position: relative;
        height: 100vh;
    }

    header > div:nth-child(1) {
        transform: rotate(350deg) translateY(-50%);
        position: absolute;
        top: 40%;
    }

    header > div:nth-child(1) > h1:nth-child(1) {
        margin-left: 0;
        margin-right: 0;
        font-size: min(15vw, 30vh);
        transform: none;
    }

    header > div:nth-child(1) > h1:nth-child(2) {
        font-size: min(7.5vw, 15vh);
    }

    header > div:nth-child(2) {
        transform: translateY(-50%);
        position: absolute;
        top: 60%;
        left: 55%;
        margin-left: 0;
        margin-right: 0;
    }

    header > div:nth-child(2) > span {
        font-size: min(2.5vw, 5vh);
        text-align: left;
    }
    header > div:nth-child(2) > span:nth-child(1) {
        display: inline;
    }
}

main {
    padding: 10px;
}

main > h1:nth-child(1) {
    margin-top: 0px;
}

a {
    color: inherit;
}

.logo-icon {
    height: 1em;
    margin-right: 0.25em;
    vertical-align: middle;
}

.underline {
    text-decoration: underline;
}