* {

    box-sizing: border-box;

}

body {

    margin: 0px;

}

html {

    scroll-behavior: smooth;

}

main {

    max-width: 700px;
    margin: 0px auto;
    padding: 15px;

}

hr {

    width: 70%;
    margin: 0px auto;
    border: 0.5px solid grey;

}

header {

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 80vh;
    text-align: center;

}

h1, h2, h3 {

    font-family: 'Assistant', sans-serif;
    font-weight: bold;
    /*color: #00546C;*/

}

p, a, li, summary, button {

    font-family: 'Roboto Condensed', sans-serif;
    line-height: 140%;
    cursor: pointer

}

li {

    margin-bottom: 25px;

}


h1 span {

    display: block;
    animation-name: introAnim;

}

h1 span:nth-child(1) {

    font-size: 200%;
    animation-duration: 1s;

}

h1 span:nth-child(2) {

    font-size: 50%;
    animation-duration: 0.8s;

}

h1 span:nth-child(3) {

    font-size: 80%;
    animation-duration: 1.5s;

}

h1 span:nth-child(4) {

    font-size: 300%;
    animation-duration: 2s;

}

h2 {

    text-align: center;
    margin-top: 150px;

}

@keyframes introAnim {

    0% {

        font-size: 0px

    }

}

nav {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;

}

nav a {

    padding: 15px 25px;
    color: black;
    text-decoration: none;
    transition: 0.4s;
    border-bottom: 2px solid transparent;
    width: 100%;
    border-radius: 12px;
    text-align: center;

}

nav a:hover {

    box-shadow: 0px 3px 10px rgba(0,0,0,0.08);

}

@media screen and (max-width: 600px) {

    nav {

        flex-direction: column;
    }

}

code {

    display: block;
    font-family: 'Courier New', Courier, monospace;
    background: #000c18; /* backup if highlight.js doesn't load */
    color: #6688ee; /* backup if highlight.js doesn't load */
    border-radius: 20px;
    padding: 30px;
    margin: 10px 0px;
    line-height: 110%;
    font-size: 80%;
    
}

code .comment {

    color: #223390;

}

details {

    margin: 15px auto;
    padding: 15px;
    border-radius: 15px;
    background: #f3f3f3;

}

.spoiler .spoiler-card {

    display: none;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.08);
    padding: 35px;

}

.spoiler:focus .spoiler-card {

    display: block;

}

section:target {

    display: block;

}

section {

    display: none;

}

button {

    margin: 15px auto;
    padding: 12px 15px;
    border-radius: 15px;
    background: #f3f3f3;
    border: none;
    
}

.editor-console-layout {

    display: grid;
    grid-template-columns: 49% 49%;
    gap: 15px;
    padding: 50px;
    padding-top: 5px;
    height: 95vh;

}

#console {

    padding: 20px;
    border-radius: 20px;
    background: #f3f3f3;
    border: none;
    height: 100%;
    font-family: 'Assistant';
    font-size: 16px;
    white-space: pre;

}

#editor {

    /*background: transparent;
    font-family: 'Assistant';
    color: white;
    height: 100%;
    background: #282c34;
    border-radius: 20px;
    padding: 20px;
    font-size: 16px;
    resize: none;*/
    border-radius: 20px;
    font-size: 15px;

}