/* global */

@import url('https://fastly.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128&display=swap');

@font-face {
    font-family: 'PFStardust';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/PFStardust.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'PFStardustS';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/PFStardustS.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    cursor: url('cursor/default.cur'), auto;
}

body {
    font-family: 'Galmuri9', 'GalmuriMono9', sans-serif;
    font-size: 10pt;
    color: #2f333d;
    background-color: #9088ff;
}

a {
    color: #8AAEFF;
    text-decoration: none;
    cursor: url('cursor/pointer.cur'), pointer;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}


/* modal */

.modal {
    display: none;
    position: fixed;
    background: #FCFCFC;
    border: 2px solid #8AAEFF;
    box-shadow: 4px 4px 0 #8AAEFF;
    z-index: 1000;
}

.modal:hover {
    box-shadow: none;
}

.modal.show {
    display: block;
}

.modal-header {
    background: #c8d8ff;
    padding: 10px;
    font-weight: bold;
    cursor: url('cursor/move.cur'), move;
    user-select: none;
}

.modal-body {
    padding: 10px;
}

.close-btn {
    float: right;
    background: none;
    border: none;
    font-size: 16px;
    cursor: url('cursor/pointer.cur'), pointer;
}

nav {
    top: 20px;
    right: 20px;
    width: 120px;
}

nav ul {
    margin-left: 24px;
    list-style-type: square;
}


/* section */

section {
    background: #FCFCFC;
    border: 2px solid #8AAEFF;
    box-shadow: 4px 4px 0 #8AAEFF;
}

section:hover {
    box-shadow: none;
}

.section-header {
    background: #c8d8ff;
    padding: 10px;
    font-weight: bold;
}

.section-body {
    padding: 10px;
    overflow-y: scroll;
}


/* front */

#front {
    background-color: #9088ff;
    background-image: url('./image/purplenoise.png');
}

.front-dim {
    height: 110vh;
    background: linear-gradient(to bottom, rgba(144, 136, 255, 0.4), rgba(144, 136, 255, 1));
}

#front h1 {
    padding: 36px 48px 24px 48px;
    font-family: 'Galmuri14', sans-serif;
    font-size: 120pt;
}

#front h1 div {
    text-align: right;
}

#front h1 span {
    letter-spacing: -10pt;
}

.front-line {
    height: 8px;
    margin: 24px 0;
    background-color: #2f333d;
}

#front hr {
    height: 8px;
    margin: 0 48px 12px 48px;
    border: 0;
    background-color: #2f333d;
}

header p {
    padding-right: 42px;
    text-align: right;
}


/* bookmarks */
#bookmark {
    width: 1280px;
    height: 720px;
    margin: 0 auto;
}

/* keyword */

fieldset {
    margin: 24px;
    border: 0;
}

legend {
    padding-bottom: 6px;
    font-family: 'Galmuri7', 'GalmuriMono7', sans-serif;
    color: #F2F2F2;
}

input {
    padding: 0.5em;
    background-color: #FCFCFC;
    border: 2px solid #E3AEFF;
    box-shadow: 4px 4px #E3AEFF;
    font-family: 'Galmuri9', 'GalmuriMono9', sans-serif;
}

form button {
    padding: 0.5em;
    background-color: #E3AEFF;
    border: 2px solid #E3AEFF;
    box-shadow: 4px 4px #E3AEFF;
    font-family: 'Galmuri9', 'GalmuriMono9', sans-serif;
}

form button:active {
    background-color: #c792e4;
    box-shadow: none;
}


/* 404 */

.error-main {
    background-color: #9088ff;
    background-image: url('./image/purplenoise.png');
    background-blend-mode: soft-light;
    height: 100vh;
    align-content: center;
}

.error-main section {
    margin: 0 auto;
    width: 240px;
}