.main-content {
    justify-content: center;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
    padding-bottom: 5%;
}

.main-content h1 {
    font-family: 'Dongle', sans-serif;
    font-size: 450%;
}

.main-content .logo-image {
    width: 40%;
    padding-top: 0;
    margin: 0 auto;
}

.nav-bar h3 {
    font-family: 'Dongle', sans-serif;
    font-size: 200%;
    margin: 1%;
}

.highlight {
    font-family: 'Dongle', sans-serif;
    font-size: 100%;
    background: linear-gradient(to right, #bd771b, #be700a);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-bar h1 {
    font-family: 'Dongle', sans-serif;
    font-size: 350%;
    margin: 3%;
}

@media(prefers-color-scheme: light) {
    .nav-bar {
        transition: all 0.5s;
        background-color: #ffffff;
        color: #131522;
    }

    .nav-bar:hover {
        background: rgb(241, 241, 241);
    }

    .main-content {
        background: rgb(255, 255, 255);
    }
}

@media(prefers-color-scheme: dark) {
    .nav-bar {
        transition: all 0.5s;
        background: #14151a;
        color: #ffffff;
    }

    body {
        background: #14151a;
        color: #ffffff;
    }

    .main-content .example-block {
        background: rgb(17, 17, 17);
    }

}

.nav-bar {
    transition: all 0.5s;

    height: 10%;
    display: flex;
    align-items: center;
}

* {
    margin: 0%;
    padding: 0px;
    margin-bottom: 2%;
}

.explain-content {
    margin-left: 20%;
    margin-right: 20%;
}

.main-content .code-example .code-syntax {
    color: rgb(230, 85, 162);
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-size: larger;
}

.main-content .code-example .code-string {
    color: rgb(245, 221, 87);
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-size: larger;
}

.main-content .code-example .code-default {
    color: rgb(247, 245, 235);
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-size: larger;
}

.main-content .code-example .code-type {
    color: rgb(198, 127, 212);
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-size: larger;
}

.main-content .code-example {
    text-align: left;

    padding: 2%;
    width: 400px;
    height: 25%;

    border-radius: 5px;
}

.main-content .example-block {
    text-align: left;
    padding-top: 5%;
    display: flex;
    align-items: center;

    opacity: 0;
    transition: all 2s;
}

.main-content .example-block .explain {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
}


.main-content .example-block h3 {
    font-family: 'Dongle', sans-serif;
    font-size: 200%;
}

.main-content .example-block .explain .hot {
    font-family: 'Dongle', sans-serif;
    font-size: 100%;
    background: linear-gradient(to right, #ff0800, rgb(168, 0, 0));

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}