@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
@import url('media_queries.css');
@import url('elements.css');

html {
    --dark-1: rgb(20, 16, 16);
    --dark-2: rgb(34, 29, 29);
    --dark-3: rgba(77, 73, 73, 0.671);
    --base-1: rgb(214, 131, 48);
    --base-2: rgb(234, 164, 0);
    --base-3: rgba(255, 166, 0, 0.86);
    --base-4: #955b108a;
    --bor: 1px solid var(--base-2);

    font-size: 17px;
    background-color: var(--dark-2);
    color: var(--base-2);
}
html * {
    box-sizing: content-box;
    margin: 0;
    padding: 0;

    font-family: 'Do Hyeon', sans-serif;
}

/* DEV */
#dev {
    display: flex;
    gap: 10px;
}
#dev>button {
    padding: 0 4px !important;
    font-size: 0.7rem;
}

/* MAIN HEADER */
body>header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2%;
    background-color: var(--dark-1);
}

/* MAIN FOOTER */
body > footer {
    padding: 4%;
    background-color: var(--dark-1);
}
body > footer i {
    margin-right: 2%;
}
body > footer hr {
    width: 40%;
    margin: 2% 0;
}

/* KEYS */
#keys-container {
    font-size: 1rem;
    margin-right: 10px;
}
#keys-container span {
    margin-right: 10px;
}
/* TUTO */
#tutorial-container > div {
    margin-bottom: 10px;
}


/* MAIN - ALL NODES ARE INCLUDES HERE */
main {
    padding: 2%;
}