@font-face { font-family: 'NanumGothic';
src: url('/fonts/NanumGothic.eot');
src: url('/fonts/NanumGothic.eot') format('embedded-opentype'),
url('/fonts/NanumGothic.woff') format('woff');}

@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

.noto-serif-kr {
  font-family: "Noto Serif KR", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


/* font-family: 'NanumSquareRoundLight';
font-family: 'NanumSquareRound';
font-family: 'NanumSquareRoundBold';
font-family: 'NanumSquareRoundExtraBold'; */

/* font-family: 'NanumGothicLight';
font-family: 'NanumGothic';
font-family: 'NanumGothicBold';
font-family: 'NanumGothicExtraBold'; */

:root {
    --background: #F5F3ED;
    --highlight: #783202;

    --flute: #766A20;
    --bandoneon: #803C0B;
}

::selection {
    background-color: var(--highlight);
    color: #eeeeee;
}

/* ================================
|             SHARED              |
==================================*/

html {

    background-color: var(--background);
    color: var(--highlight);
    display: flex;
    justify-content: center;
    scroll-behavior: smooth;
}

body {
    width: 90vw; min-height: 100lvh;
    max-width: 1080px;
    min-width: 375px;
    margin-top:0;
    padding: 20px 40px;

    position: relative;

    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    font-family: 'NanumSquareRound';
    color: var(--highlight);
}

#container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    
    flex-direction: row;
    font-size: 14px;
    gap: 10px;
}

aside {
    /* max-width: 40%;
    min-width: 30%; */
    border-radius: 5%;
    display: flex;
    justify-content: center;
}

#main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: baseline;
    gap: 10px;
    /* background-color: var(--background); */

    /* font-family: 'Noto Serif KR'; */
    h3 { margin: 10px;}
    p { margin: 5px; margin-top: 0; font-size: 12px;}
}

hr { width: 100%; border: 0.25px solid var(--highlight);}

h1 { font-family: 'Noto Serif Kr'; font-size: 40px; margin: 10px;}

header {
    width: 100%; height: 200px;
    display: flex;
    flex-direction: column;
    align-items: end;
}

nav {
    min-width: 60%;
    max-width: 100%;
    margin: 5px;
    font-style: italic;
    display: flex;
    flex-direction: row;
    justify-content: right;
    gap: 5px;

    div {
        width: 20%;
        padding-left: 10px;
        border-left: 1px solid var(--highlight);
        font-size: 14px;
        font-family:'Noto Serif KR';
    }
    div:hover {
        background-color: var(--background);
        transition: all 0.25s;
        text-decoration: dashed;
        /* font-weight: bold; */
    }
   
}

#logo {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 200px;
}

.box {
    width: 100%; height: max-content;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
}

a {
    text-decoration: none;
    color: var(--highlight);
}

ul {
    padding-left: 20px;

    li {
        margin-bottom: 10px;
    }
}

footer {
    width: 100%; min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: #eeeeee;

    position: absolute;
    bottom: 0%;

    a {
        font-size: 10px;
    }
}

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/* ================================
|              INDEX               |
==================================*/

#banner {
    width: 728px; height: 90px;
    background-color: var(--background);
    display: flex;
    justify-content: center;
    align-items:center;
    color: #bfbfbf;
}

/* ================================
|            CHARACTER             |
==================================*/
.character-icon {
    width: 50px; height: 50px;
    border-radius: 50%;
    text-align: center;
    img { width: 100%;}
}
.character-icon:hover {
    width: 60px; height: 60px;
    background-color: #f5f5f5;
    transition: all 0.15s;

}

.icon-name {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    width: 100px;
    text-align: center;
    text-decoration: none;
    color: var(--highlight);
    font-family: 'nanumsquareroundb';
}

.character-column {
    hr { 
        margin: 0;
        border: 1px solid #dddddd;
    }
}

.character-row {
    width: 100%; height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}