@font-face {
    font-family: 'TtangsBudaeJjigae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeB.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Presentation';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
}

body {
    background-color: rgb(45, 45, 45);
    display: flex;
    justify-content: center;
    align-items: center;
}

#main {
    width: 90%;
    max-width: 500px;
    padding: 30px;
    box-sizing: border-box;
    background-color: black;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#main h1 {
    color: white;
    text-align: center;
    margin: 0;
    margin-bottom: -17px;
    font-family: 'TtangsBudaeJjigae';
    font-size: clamp(1.2rem, 4vw, 1.8rem);
}

#main #information {
    color: white;
    text-align: center;
    margin: 0;
    font-family: 'Presentation';
    font-size: clamp(0.84rem, 2.8vw, 1.26rem);
}

#main .banner {
    background-color: white;
    width: 80%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
}

.banner p {
    font-weight: bold;
    margin: 0;
    font-family: 'TtangsBudaeJjigae';
    font-size: clamp(1rem, 8vw, 2.5rem);
    position: relative;
    top: 5px; /* 폰트의 시각적 중심을 맞추기 위한 미세 조정 */
}

#main button {
    width: 80%;
    aspect-ratio: 8 / 1;
    font-size: clamp(0.8rem, 3vw, 1.1rem);
    font-family: 'Presentation';
    font-weight: 900;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#main button:hover {
    background-color: rgb(182, 182, 182);
}