@font-face {
    font-family: 'HP Simplified Regular';
    src: url('../fonts/HP Simplified/HP Simplified Regular.ttf');
}

@font-face {
    font-family: 'HP Simplified Light';
    src: url('../fonts/HP Simplified/HP Simplified Light.ttf');
}

@font-face {
    font-family: 'Anton';
    src: url('../fonts/Anton/Anton-Regular.ttf');
}

:root {
    --back-color: #fffcf0;
    --black-font-color: #333333;
    --dark-brown-color: #794c15;
    --dim-brown-color: #b76300;
    --feature-color: #ffb100;
    --feature-item-color-1: #3ba032;
    --feature-item-color-2: #307ed8;
    --feature-item-color-3: #a46104;
    --footer-color: #ffb100;
    --group-title-margin: 35px;
    --header-height: 55px;
    --header-right-color: #4f3815;
    --light-brown-color: #c97d29;
    --quotation-color: #f9f3c2;
    --top-color: #ffb100;
    --top-top-color: #f3d300;
    --white-font-color: #ffffff;
}

body {
    background-color: var(--back-color);
    color: var(--black-font-color);
    display: flex;
    flex-direction: column;
    font-family: 'HP Simplified Regular';
    margin: 0;
}

.light-font {
    font-family: 'HP Simplified Light';
}

.noselect {
    user-select: none;
}

div.header {
    background: linear-gradient(to right, var(--dark-brown-color) 0px, var(--dark-brown-color) calc(var(--width) - 25px), var(--header-right-color) calc(var(--width) - 20px), var(--header-right-color) var(--width));
    border-bottom: 1px solid var(--back-color);
    display: flex;
    font-size: 20px;
    height: var(--header-height);
    justify-content: space-between;
    --width: 100%;
    width: var(--width);
}

div.header-side {
    align-items: center;
    display: flex;
}

div.header-side:last-of-type {
    margin-right: 38px;
}

div.header-icon {
    background-image: url('../img/ches_logo.svg');
    background-position: center;
    background-repeat: no-repeat;
    height: var(--icon-size);
    --icon-size: calc(var(--header-height) * .6);
    margin: 0 calc((var(--header-height) - var(--icon-size)) / 2);
    width: var(--icon-size);
}

div.header-langname {
    color: var(--white-font-color);
}

div.header-langname-short {
    color: var(--white-font-color);
    display: none;
}

a.header-menuitem {
    align-items: center;
    color: var(--white-font-color);
    cursor: pointer;
    display: flex;
    font-size: 18px;
    height: 50%;
    margin-right: 15px;
    text-decoration: none;
}

a.header-menuitem:hover {
    text-decoration: underline;
}

a.header-menuitem:last-of-type {
    margin: 0;
}

div.top {
    align-items: center;
    background: linear-gradient(to bottom, var(--top-top-color) 0px, var(--top-color) calc(var(--height) - 20px), var(--dim-brown-color) calc(var(--height) - 18px), var(--back-color) var(--height));
    color: var(--white-font-color);
    display: flex;
    --height: 100%;
    height: var(--height);
    justify-content: center;
    padding: 35px 0;
    width: 100%;
}

div.top-content {
    display: flex;
    flex-direction: column;
    margin: 0 25px 55px;
    overflow: hidden;
}

div.top-title {
    font-family: 'Anton';
    font-size: 70px;
    transform: scale(1.3, 1);
    transform-origin: top left;
    width: 400px;
}

div.top-subtitle {
    font-size: 34px;
    letter-spacing: .5px;
    line-height: 110%;
    margin-bottom: 3px;
}

div.top-description {
    font-size: 20px;
    margin-top: 5px;
}

div.top-menu {
    display: flex;
    flex-wrap: wrap;
}

div.top-menu-buttonlist {
    display: flex;
    flex-wrap: wrap;
    margin-right: 30px;
}

div.top-menu-buttonlist-item {
    border-radius: 4px;
    cursor: pointer;
    font-size: 22px;
    margin-right: 20px;
    margin-top: 15px;
    padding: 8px 18px;
}

div.top-menu-buttonlist-item:hover {
    text-decoration: underline;
}

div.top-menu-buttonlist-item:last-of-type {
    margin-right: 0;
}

div#topDownloadButton {
    background-color: var(--dim-brown-color);
}

div#topLearningButton {
    background-color: var(--light-brown-color);
}

div.top-menu-logolist {
    display: flex;
    flex-wrap: wrap;
}

div.top-menu-logolist-item {
    background-color: #f3d300;
    cursor: pointer;
    height: 50px;
    margin-right: 20px;
    margin-top: 15px;
    width: 120px;
}

div.top-menu-logolist-item:last-of-type {
    margin-right: 0;
}

div.group {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

div.group-title {
    font-size: 30px;
    margin: var(--group-title-margin) 0;
}

div.quotation {
    background-color: var(--quotation-color);
    border-radius: 5px;
    font-size: 20px;
    line-height: 140%;
    margin-top: calc(var(--group-title-margin) * 1.5);
    padding: 20px;
    text-align: center;
    width: 50%;
}

div.feature-list, div.feature-item {
    --item-margin-side: 1.5vw;
    --item-margin-top: calc(var(--item-margin-side) * 2);
    --item-min-margin-side: 5px;
    --item-min-margin-top: calc(var(--item-min-margin-side) * 2);
}

div.feature-list {
    bottom: var(--item-margin-top);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: calc(var(--item-margin-top) * -1);
    position: relative;
    text-align: center;
    width: 100%;
}

div.feature-item {
    align-items: center;
    background-color: var(--feature-color);
    border-radius: 5px;
    color: var(--white-font-color);
    display: flex;
    flex-direction: column;
    margin: 0 max(var(--item-margin-side), var(--item-min-margin-side));
    margin-top: max(var(--item-margin-top), var(--item-min-margin-top));
    max-width: 300px;
    min-height: 15vw;
    min-width: 230px;
    padding: 5px 10px;
    width: 23vw;
}

div.feature-item:nth-of-type(1) div.feature-title {
    border-bottom-color: var(--feature-item-color-1);
}

div.feature-item:nth-of-type(2) div.feature-title {
    border-bottom-color: var(--feature-item-color-2);
}

div.feature-item:nth-of-type(3) div.feature-title {
    border-bottom-color: var(--feature-item-color-3);
}

/* 
div.feature-item:nth-of-type(1) {
    border-top: var(--border-radius) solid var(--feature-item-color-1);
}

div.feature-item:nth-of-type(2) {
    border-top: var(--border-radius) solid #000;
}

div.feature-item:nth-of-type(3) {
    border-top: var(--border-radius) solid #000;
} */

div.feature-title {
    border-bottom-style: solid;
    border-bottom-width: 4px;
    font-size: 27px;
    margin: 10px 0;
    padding: 0 10px;
}

div.feature-description {
    font-size: 20px;
    line-height: 125%;
}

div.footer {
    background-color: var(--footer-color);
    height: 220px;
    width: 100%;
}

@media screen and (max-width: 700px) {
    div.header-langname {
        display: none;
    }

    div.top-menu {
        justify-content: center;
    }

    div.top-menu > div {
        margin-right: 30px;
    }

    div.quotation {
        width: 80%;
    }
}

@media screen and (max-width: 450px) {
    div.header-langname-short {
        display: block;
    }

    div.header-side:last-of-type {
        display: none;
    }
}