* {box-sizing: border-box; padding: 0; margin: 0;}
body, html {
    width: 100%;
    font-size: 10px;
    min-width: 420px;
}
body {
    background: url('/static/images/gran.png');
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Navbar */
nav {
    background-image: linear-gradient(#545846 1.5rem, #686d51 5rem);
    height: 5rem;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: 0;
    z-index: 100;
}

nav #logo {
    background-image: linear-gradient(#545846 1.5rem, #686d51 5rem, #686d51);
    border-bottom-right-radius: 60%;
    padding-top: 2rem;
    padding-left: 2rem;
    height: 14rem;
    width: 14rem;
    position: absolute;
    top: 0;
    left: 0;
}

nav #logo img {
    height: 9rem;
}

nav .links {
    display: flex;
    margin-left: 14rem;
    justify-content: space-evenly;
    font-size: 0;
}
nav .links a {
    margin: 0.5rem;
    line-height: 4rem;
    font-size: 1.9rem;
    text-decoration: none;
    color: #000000;
    padding: 0 1rem;
}

nav .links a:hover,
nav .links a:active {
    color: #fde6bb;
}

nav .links a.btn {
    color: #fde6bb;
}

nav .links a.btn:hover,
nav .links a.btn:active {
    color: #ffffff;
}

.btn {
    display: block;
    width: fit-content;
    text-decoration: none;
    background-image: linear-gradient(#673028, #532023);
    border-radius: 1rem;
    color: #fde6bb;
    margin: 0.5rem;
    line-height: 4rem;
    font-size: 1.9rem;
    padding: 0 1rem;
    border: 0;
    cursor: pointer;
}

.btn:hover,
.btn:active {
    background-image: linear-gradient(#aa4636, #6e3134);
    color: #ffffff;
}

/* Footer */
footer {
    height: 15rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: linear-gradient(#686d51 30%, #7d8559);

    color: #b6ad87;
    font-size: 1.5rem;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

footer .icons {
    align-items: center;
    display: flex;
}
footer .icons .icon {
    display: block;
    margin: 2rem 5rem;
    text-decoration: none;
    height: 40px; width: 40px;
    border-radius: 20px;
    background-image: url('/static/images/icons/footer-icons.png');
    overflow: hidden;
    background-position-y: 0;
    background-position-x: 0;
}

footer .icons .icon:hover {
    background-position-y: 40px;
}

footer .icons .icon.discord {
    background-position-x: 0;
}
footer .icons .icon.facebook {
    background-position-x: 40px;
}
footer .icons .icon.youtube {
    background-position-x: 80px;
}

footer .link {
    margin: 1.5rem 2.5rem 0;
    display: inline-block;
    line-height: 1em;
     color: inherit;
}

/* Content */
#content {
    background-color: #a59d76;
    padding: 5rem 5rem 12rem 5rem ;
    min-height: 100vh;
    margin: 0;
}



/* Section */
section {
    margin: 0 0 5rem;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5rem;
}

section .header, section .footer {
    background-image: linear-gradient(#673028, #532023);
    height: 2rem;
    width: 100%;
}


section .flex-1 { flex: 1;}
section .flex-1 img { margin: 0 auto; max-width: 100%;}

section#mainPageTop {
    margin-top: 0;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: flex-start ;
    padding-top: 0;
    color: #532023;
}

section#mainPageTop img.logo {
    max-height: 10rem;
    display: block;
}
section#mainPageTop img.dragon {
    max-height: 20rem;
    display: block;
}

section#mainPageTop .left {
    padding: 4rem;
    background: #fde6bb;
    margin: 0 auto;
    width: 80%;
}

section#mainPageTop .left h2 {
    font-family: 'Great Vibes', cursive;
    margin: 3rem 0;
    font-size: 4rem;
}

section#mainPageTop .left p {
     font-size: 1.9rem;
    padding-bottom: 5rem;
}

section#mainPageTop .left + .arrow {
    height: 10rem;
    width: 80%;
    margin: 0 auto;
    font-size: 0;
}

section#mainPageTop .left + .arrow .arr-left,
section#mainPageTop .left + .arrow .arr-right {
    width: 50%;
    height: 100%;
    display: inline-block;
}

section#mainPageTop .left + .arrow .arr-left {
    background: linear-gradient(to left bottom, #fde6bb 50%, transparent 50%);
}
section#mainPageTop .left + .arrow .arr-right {
    background: linear-gradient(to right bottom, #fde6bb 50%, transparent 50%);
}


section#mainPageTop a {
    color: #532023;
    margin: auto;
    text-decoration: underline;
}

section#mainPageTop a:hover {
    color: #aa4636;
    margin: auto;
    text-decoration: underline;
}

section#mainPageTop .left a {
    font-size: 3rem;
    font-weight: bold;

}

section#mainPageTop .right {
    width: 35rem;
    margin: 0 auto;
    padding-top: 5rem;
}

section#mainPageTop .right .arrow {
    width: 100%;
    background: #fde6bb;
    height: 6rem;
    margin: 2.5rem 2.5rem 2.5rem -2.5rem;
    position: relative;
    line-height: 5.5rem;
    text-align: center;
    display: block;
}

section#mainPageTop .right .arrow::before,
section#mainPageTop .right .arrow::after {
    border-bottom: 3rem solid transparent;
    border-top: 3rem solid transparent;
    position: absolute;
    content: '';

}

section#mainPageTop .right .arrow::before {
    border-left: 5rem solid #a59d76;
    left: 0;
}


section#mainPageTop .right .arrow::after {
    border-left: 5rem solid #fde6bb;
    right: -5rem;
}

section#mainPageTop .right a {
    font-size: 1.9rem;
    padding-left: 2.5rem;

}



section .main {
    background-color: #fde6bb;
    width: 90%;
    color: #532023;
    padding: 2rem;
    font-size: 1.9rem;
    text-align: center;
    display: flex;
    flex-direction: column;
}

section .main h2 {
    font-family: 'Great Vibes', cursive;
    margin: 3rem 0;
    font-size: 4rem;
}

section .main h3 {
    text-align: left;
    margin: 1rem 0 0 0;
    font-size: 2rem;
}

section .main p {
    padding: 0 2rem 0.75rem;
    clear: both;
}

section .main .link {
    margin: 1.5rem auto;
    color: inherit;
    display: block;

}

section .main img {
    max-width: 70%;
    clear: both;
    display: block;
    margin: 5rem auto;
    object-fit: contain;
}

section .main h2 {
    font-family: 'Great Vibes', cursive;
    margin-bottom: 2.5rem;
    text-align: center;
    font-size: 4rem;
}

/* Slider */
section .main .about-slider {position: relative; width: 100%;}
section .main .about-slider em.arrow {z-index: 50; position: absolute; top: 0; bottom: 0; width: 2rem; height: 2rem; display: block; margin: auto; opacity: 0.4; transition: opacity 0.5s; cursor: pointer; border-radius: 2rem; background-color: #fde6bb; }
section .main .about-slider em.arrow::before {content: ""; border-top: 1rem solid transparent; border-bottom: 1rem solid transparent; font-size: 0; display: block;}
section .main .about-slider em.arrow:hover {opacity: 1;}

section .main .about-slider em.arrow.prev {left: 5px; padding-right: 0.5rem;}
section .main .about-slider em.arrow.next {right: 5px; padding-left: 0.5rem;}

section .main .about-slider em.arrow.prev::before {border-right: 1rem solid #532023;}
section .main .about-slider em.arrow.next::before {border-left: 1rem solid #532023;}

section .main .about-slider .slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    transition: margin-left 1s;
}

section .main .about-slider .slides {position: relative; overflow: hidden; display: flex; width: 100%;}
section .main .about-slider .slide .name {font-weight: 700;}

section .main .about-slider .slide:first-of-type {margin-left: 0;}

section .main .about-slider .about-slider-nav {margin: 1rem 0 0;}
section .main .about-slider .about-slider-nav em {width: 2rem; height: 2rem; border-radius: 1rem; background: #532023; display: inline-block; margin: 0 0.5rem; cursor: pointer; box-shadow: 1px 1px 2px rgba(0,0,0,0.9); opacity: 0.4; transition: opacity 0.5s;}
section .main .about-slider .about-slider-nav em:hover,
section .main .about-slider .about-slider-nav em.current {opacity: 1;}

section#loginPage .error {color: #ff0000; padding: 1rem; font-weight: 700;}
section#loginPage .link,
section#passwordReminder .link {margin: 0 0 0 25%; display: block; float: left; font-size: 1.25rem; }
section#loginPage .link.inline {display: inline; float: none; margin: 0; font-size: 1em; font-weight: 700;}
section#loginPage p.pt {padding: 1.2rem 0 0 0; text-align: left;}

.form-row {display: flex; flex-flow: row; padding-bottom: 1rem; clear:both;}
.form-row label {flex: 1 25%; text-align: right; padding: 0 1rem; user-select: none;}
.form-row > div {flex: 3 75%;}

.form-row.input input {width: 100%; line-height: 3rem; font-size: 1.5rem; border: 0; background-color: #ffffff; padding: 0 0.75rem;}
.form-row .error {color: #ff0000; text-align: left; padding: 0; font-size: 1.5rem; font-weight: 700;}

.form-row.submitButton {flex-direction: row-reverse;}
.form-row.submitButton > div {width: 75%; flex: initial;}
.form-row .btn {padding: 0 3rem;}

.form-row.checkbox {flex-direction: row-reverse;}
.form-row.checkbox > div {width: 75%; flex: initial; text-align: left;}
.form-row.checkbox > div input {display: none;}
.form-row.checkbox > div label {padding-left: 2.25rem; position: relative; cursor: pointer; font-size: 1.5rem;}
.form-row.checkbox > div em {position: absolute; width: 1.75rem; height: 1.75rem; display: block; background: #ffffff; top:0.2rem; left: 0; line-height: 1.75rem; font-size: 1.5rem; font-weight: 700; text-align: left; padding: 0 0.1rem; }
.form-row.checkbox > div input:checked + em::before { content:"✓"; }

.form-row.radiobutton {flex-direction: row-reverse;}
.form-row.radiobutton > div {width: 75%; flex: initial; text-align: left;}
.form-row.radiobutton > div input {display: none;}
.form-row.radiobutton > div label {padding-left: 2.25rem; position: relative; cursor: pointer; font-size: 1.5rem;}
.form-row.radiobutton > div em {position: absolute; width: 1.8rem; height: 1.8rem; border-radius: 0.9rem; display: block; background: #ffffff; top:0.2rem; left: 0; line-height: 1.75rem; font-size: 1.5rem; font-weight: 700; text-align: left; padding: 0 0.1rem; }
.form-row.radiobutton > div input:checked + em::before { content:""; position: absolute; display: block; border-radius: 0.6rem; height: 1.2rem; width: 1.2rem; background: #000000; top: 0.3rem; left: 0.3rem; }
/* Mobile first */

section#myAccountSettings .flex-1,
section#gameSettings .flex-1,
section#myAccountDelete .flex-1 {padding: 0 5rem;}

section#myAccountSettings .flex-1 form > p,
section#gameSettings .flex-1 form > p,
section#myAccountDelete .flex-1 form > p {padding: 1rem 0; text-align: left;}

section#myAccountSettings .form-row > div,
section#gameSettings .form-row > div { width: 100%;}

#rulesPage ol h3{
    display: inline;
}

#rulesPage ol {
    padding-left: 1.25rem;
    counter-reset: main-counter, sub-counter, sub-counter2;
    list-style-type:none;
    text-align: left;
    padding-bottom: 1rem;
}

#rulesPage li {
    counter-increment: main-counter;
    counter-reset: sub-counter;
}

#rulesPage li::before {
    font-weight: 700;
    content: counter(main-counter) ") ";
}

#rulesPage li li {
    counter-increment: sub-counter;
    counter-reset: sub-counter2;
}

#rulesPage li li::before {
    content: counter(main-counter) "." counter(sub-counter) " ";
}

#rulesPage li li li {
    counter-increment: sub-counter2;
    counter-reset: none;
}

#rulesPage li li li::before {
    content: counter(main-counter) "." counter(sub-counter) "." counter(sub-counter2) " ";

}



@media screen and (max-width: 511px) {
    #content {
        padding: 5rem 1.5rem 12rem 1.5rem;
    }

}

@media screen and (max-width: 768px) {
    nav {
        min-height: 5rem;
        height: auto;
    }
    nav .links {
        margin-left: 0;
        display: none;
    }
    nav .links a {
        display: block;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
    }
    nav #logo {
        padding-top: 0.5rem;
        padding-left: 0.5rem;
        height: 4rem;
        width: 4rem;
    }
    nav #logo img {
        height: 4rem;
    }


    nav #burger {
        z-index: -1;
        opacity: 0;
        position: absolute;
        display: block;
    }
    nav .burger {
        display: block;
        position: absolute;
        top: 0.75rem;
        right: 1.25rem;
        width: 3.5rem;
        height: 3.5rem;
        cursor: pointer;
        z-index: 10;
    }
    nav .burger em {
        display: block;
        width: 3.5rem;
        height: 0.5rem;
        border-radius: 0.25rem;
        background-color: #000000;
        margin: 0.5rem 0;
    }

    nav #burger:checked + .burger + .links {
        display: block;
    }

    nav #burger:checked + .burger > em {
        position: absolute;
        top: 1rem;
    }

    nav #burger:checked + .burger > em:nth-child(1) {
        display: none;
    }

    nav #burger:checked + .burger > em:nth-child(2) {
        transform-origin: center center;
        transform: rotate(45deg);
    }

    nav #burger:checked + .burger > em:nth-child(3) {
        transform-origin: center center;
        transform: rotate(-45deg);
    }

    section#mainPageTop {
        flex-direction: column;
        align-items: center;
    }
    section#mainPageTop .left,
    section#mainPageTop .right {
        width: 100%;
        padding: 2rem 2rem 4rem;
    }

    section#mainPageTop .left + .arrow {
        display: none;
    }
    section#mainPageTop .right {
        padding-bottom: 2rem;
    }

    section {
        padding-top: 0rem;
        margin-bottom: 3rem;
    }

    .form-row {flex-flow: column;}
    .form-row label {text-align: left; padding: 0.25rem 0;}
    .form-row.checkbox > div {width: 100%;}
    .form-row.submitButton > div {width: 100%; text-align: center;}
    .form-row.submitButton > div .btn {width: 100%;}

    section .sm {display: none;}

    section#myAccountSettings .flex-1,
    section#gameSettings .flex-1,
    section#myAccountDelete .flex-1 {padding: 0;}
}

@media screen and (min-width: 769px) {
    nav #burger,
    nav .burger {
        display: none;
    }
}
@media screen and (min-width: 1025px) {
    #content {
        margin: 0 4rem;
    }
    nav .links a {
        padding: 0 3rem;
    }
}
@media screen and (min-width: 1201px) {
    section .main {flex-direction: row;}
    section .main .about-slider .slide { flex-direction: row; }
}
@media screen and (min-width: 1541px) {

    #content {
        max-width: 146em;
        margin: 0 auto;
    }
}