:root {
    --theme-color:#6b6e4c;
    --theme-color-lighter:#bbb584;
    --theme-color-variation:#ede622
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box
}

body {
    background-color:#000;
    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    font-size:1em;
    color:#fff
}

a {
    transition:.2s;
    color:#d3d3d3;
    text-decoration:none
}

a:hover {
    color:var(--theme-color-lighter)
}

header {
    display:flex;
    border-bottom:thick solid rgba(255,255,255,.1);
    width:100%;
    box-shadow:2px 7px 5px rgba(0,0,0,.3),0 -4px 10px rgba(0,0,0,.3);
    background-color:rgba(0,0,0,.15)
}

header div {
    padding:1rem
}

main {
    margin-bottom:2em
}

h1,h2,h3 {
    text-shadow:2px 7px 5px rgba(0,0,0,.3),0 -4px 10px rgba(0,0,0,.3)
}

main p {
    font-size:x-large;
    margin-bottom:1em
}

main h1,main h2 {
    margin-bottom: .6em
}

main h2 {
    margin-top:1em
}

b {
    font-weight:600
}

h2 {
    font-weight:400;
    color:var(--theme-color-lighter)
}

#everythingHelper {
    position:relative
}

#mainHelper {
    padding-top:3rem;
    max-width:50vw;
    margin:auto;
    display:flex
}

#headerSubtitle {
    color:#fff;
    opacity:.6
}

#logo {
    height: 2em;
    margin: auto 0 auto 1em;
}

.noWrap {
    text-wrap-mode: nowrap;
}

@keyframes ellipsis-loader {
    0%,25% {
        transform:translateX(0)
    }

    100% {
        transform:translate(20px)
    }
}

@keyframes ellipsis-loader__dot {
    0% {
        animation-timing-function:cubic-bezier(.23,1,.32,1);
        transform:translateX(0)
    }

    55% {
        animation-timing-function:cubic-bezier(.785,.135,.15,.86);
        opacity:1;
        transform:translateX(98px)
    }

    100%,75% {
        transform:translateX(212px)
    }

    90% {
        opacity:.2
    }
}

@keyframes fadeIn {
    to {
        opacity:1
    }
}

@keyframes fadeOut {
    to {
        opacity:0
    }
}

@media screen and (max-width:1280px) {
    body {
        font-size:2vh
    }

    header {
        padding-top:1.4rem;
    }

    header div {
        margin-right: auto;
    }

    main {
        max-width:90vw
    }

    main h1 {
        font-size:3vh
    }

    #mainHelper {
        flex-direction:column;
        max-width:90vw
    }

    #logo {
        margin: auto 0 auto auto;
        padding-left: 2em;
    }
}

