@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

@font-face {
    font-family: 'my-font';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@media (min-width: 769px) {
    html, body {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
        width: 100vw;
        margin: 0;
        display: grid;
        align-items: center;
        justify-items: center;
        background: white;
        font-family: my-font, sans-serif;
        grid-template-rows: 1fr 10fr;
    }

    #content-section {
        display: grid;
        justify-items: center;
        align-items: center;
        width: 100vw;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        grid-template-columns: 1fr 2fr 1fr;
    }

    #ad-section {
        width: 60%;
        height: 70%;
        max-height: 70%;
        overflow: hidden;
    }

    #etc-section {
        flex-grow: 0.3;
        height: 100%;
        width: 100%;
        text-align: center;
    }
}


@media (max-width: 768px) {
    html, body {
        height: 100dvh;
        width: 100vw;
        margin: 0;
        background: white;
        font-family: my-font, sans-serif;
        overflow: hidden;
        display: grid;
        grid-template-rows: 15fr 85fr;
    }

    #content-section {
        overflow: hidden;
        width: 100%;
        display: grid;
        grid-auto-flow: row;
        grid-template-rows: 15fr 85fr;
    }

    #ad-section {
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        padding: 1%;
        box-sizing: border-box;
    }

    #etc-section {
        display: none;
    }
}