/* Chapter 1: Declaration
 * Chapter 2: General
 * Chapter 3: Class & ID
 * Chapter 4: Query
 */

/* Chapter 1:
 *    ___          __              __  _         
 *   ╱ _ ╲___ ____╱ ╱__ ________ _╱ ╱_(_)__  ___ 
 *  ╱ ╱╱ ╱ ─_) __╱ ╱ _ `╱ __╱ _ `╱ __╱ ╱ _ ╲╱ _ ╲
 * ╱____╱╲__╱╲__╱_╱╲_,_╱_╱  ╲_,_╱╲__╱_╱╲___╱_╱╱_╱
 * Variables! */

:root {
    --primary-color: #f8f8f8;
    --accent-color: #c7b6e4;
    --translucent-accent-color: #c7b6e42d;

    --primary-bg-color: #171818;
    --secondary-bg-color: #222424;

    --border-color: #303234;
    --link-color: #6896d5;

    --base-rem: 1rem;
    --smaller-rem: 0.3rem;

    --bigger-rem: 3rem;
    --base-rem: 1.5rem;
    --smaller-rem: 0.3rem;

    --custom-em: 0.1em;
}

/* Chapter 2:
 *   _____                      __
 *  ╱ ___╱__ ___  ___ _______ _╱ ╱
 * ╱ (_ ╱ ─_) _ ╲╱ ─_) __╱ _ `╱ ╱ 
 * ╲___╱╲__╱_╱╱_╱╲__╱_╱  ╲_,_╱_╱  
 * Resets and general elements. */

/* 글자 들어간 거랑 웬만한 거 초기화 */
html, body, p, h1, h2, h3, h4, h5, h6, a, ul, ol, li, div, span, img,
header, nav, main, footer, section, article,
button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* box-sizing 속성을 기본값 content-box로 두면
    padding과 border가 width, height에 포함되지 않음. */

    color: var(--primary-color);
    font-family: Verdana;
    transition: color 0.3s;

    scrollbar-width: auto;
    scrollbar-color: var(--translucent-accent-color) var(--primary-bg-color);
}

/* primary-bg 초기화 */
html, body, header, nav, main, footer, article,
button, .make-it-opaque {
    background-color: var(--primary-bg-color);
    transition: background-color 0.3s;
}

/* secondary-bg 초기화
 * .cosmetic-roundy-border-wrapper {
 *     background-color: var(--secondary-bg-color);
 *     transition: background-color 0.3s;
 * }
 */

html {
    scroll-behavior: smooth;
}

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

a:hover {
    text-decoration: underline;
}

a:visited {
    color: var(--link-color);
}

header {
    padding: 1em 0;
    border-bottom: 1px solid var(--border-color);
}

button {
    background-color: var(--secondary-bg-color);
    border: 1px solid var(--border-color);
    padding: 0.5em;
}

/* Chapter 3:
 *   _______               ____      _______ 
 *  ╱ ___╱ ╱__ ____ ___   ╱ __╱___  ╱  _╱ _ ╲
 * ╱ ╱__╱ ╱ _ `(_─<(_─<   > _╱_ _╱ _╱ ╱╱ ╱╱ ╱
 * ╲___╱_╱╲_,_╱___╱___╱  │_____╱  ╱___╱____╱ 
 * Do classes come earlier than general elements? */

.header--main {
    height: 10vh;
    min-height: 100px;
    overflow: hidden;
    text-align: center;
    align-content: center;
}

.container--margin05 {
    width: 90%;
    margin: 0 5%;
}

.container--margin20 {
    width: 60%;
    margin: 0 20%;
}

.consistant-spacer-10rem {
    margin-bottom: 10rem;
}

.consistant-spacer-5rem {
    margin-bottom: 5rem;
}

.consistant-spacer-1rem {
    margin-bottom: 1rem;
}

.cosmetic-roundy-border-wrapper {
    border: 1px solid var(--border-color);
    border-radius: var(--base-rem);
    height: fit-content;
    overflow: hidden;
}

.cosmetic-roundy-border-wrapper header {
    background-color: var(--secondary-bg-color);
    padding-left: 1em;
    padding-right: 1em;
}

.hover-to-reveal {
    background-color: var(--primary-bg-color);
    color: var(--primary-bg-color);
    transition: background-color 0.3s, color 0.3s;

    border: 1px solid var(--border-color);
    border-radius: var(--smaller-rem);
    padding: var(--custom-em);
}

.hover-to-reveal:hover {
    background-color: inherit;
    color: inherit;
    border: none;
}

a.hover-to-reveal {
    display: inline-block;
}

a.hover-to-reveal:hover {
    color: var(--link-color);
}

/* Chapter 4:
 *   ____                   
 *  ╱ __ ╲__ _____ ______ __
 * ╱ ╱_╱ ╱ ╱╱ ╱ ─_) __╱ ╱╱ ╱
 * ╲___╲_╲_,_╱╲__╱_╱  ╲_, ╱ 
 *                   ╱___╱  
 * Media queries! */

/* @media (prefers-color-scheme: light) {
    :root {
        --primary-color: #25282a;
        --primary-bg-color: #f8f8f8;
        --secondary-bg-color: #efefef;
    }
} */

/* 패드 */
@media (max-aspect-ratio: 1/1) {
    .container--margin20 {
        width: 90%;
        margin: 0 5%;
    }
}