@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

:root {
    /* Base font size */
    font-size: 10px;
    /* Heading height variable*/
    --heading-height: 30em;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    min-height: 100vh;
    background-color: #101010;
    margin: 0;
}

header.top-head {
    position: fixed;
    width: 100%;
    height: var(--heading-height);
}

/* Create angled background with 'before' pseudo-element. Picture: https://images.unsplash.com/photo-1495464101292-552d0b52fe41?auto=format&fit=crop&w=1350&q=80 */
header.top-head::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 6em;
    width: 100%;
    height: calc(var(--heading-height) + 10em);
    z-index: -1;
    transform: skewY(-3.5deg);
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('../../../images/wargaming.net/title/CopyrightWargaming.jpg') no-repeat center, linear-gradient(#4e4376, #2b5876);
    background-size: cover;
    border-bottom: .2em solid #fff;
}

a {
    color: #b50404;
}

details summary {
    color: white;
    font-size: medium;
}

h1 {
    font-size: calc(2.8em + 2.6vw);
    font-weight: 700;
    letter-spacing: .01em;
    padding: 10rem 0 0 4.5rem;
    text-shadow: .022em .022em .022em #111;
    color: #fff;
}

main {
    padding: calc(var(--heading-height) + 1.5vw) 4em 0;
}

p {
    font-size: calc(2em + .25vw);
    font-weight: 400;
    line-height: 2;
    margin-bottom: 1.5em;
    color: #fcfcfc;
}

.alternation-gray-text {
    letter-spacing: .1rem;
    color: darkgray;
}

.created-border {
    width: fit-content;
    line-height: 4 !important;
    padding: 0 4rem 0 4rem;
    border-color: #fff /*rgba(75, 75, 75, 0.12)*/;
    border-style: solid;
    border-width: 1px;
    border-radius: 4rem;
    background-color: none /*rgba(75, 75, 75, 0.12)*/;
}

/*WebKit Scrollbar*/
::-webkit-scrollbar-button {
    background-image: /*url('')*/ none;
    background-repeat: no-repeat;
    width: /*5px*/ auto;
    height: /*0*/ auto;
}

::-webkit-scrollbar-track {
    background-color: /*#ecedee #32312e*/ none;
    box-shadow: 0px 0px 3px #000 inset;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #646464;
    box-shadow: 0px 1px 1px #666 inset;
    background-image: none;
    background-position: 0 0;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #b50404;
}

::-webkit-resizer {
    background-image: url('');
    background-repeat: no-repeat;
    width: 4px;
    height: 0px
}

::-webkit-scrollbar {
    width: 6px;
    background: #000;
    position: absolute;
}