*:not(html) {
    font-family: inherit;
    box-sizing: inherit;
    text-decoration: inherit;
    color: inherit
}

html {
    text-decoration: none;
    box-sizing: border-box;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    --background-color: rgba(248, 248, 248, 1);
    --ln-color: rgba(217, 217, 217, .5);
    --background-sub-color: #d9d9d9;
    --background-active-color: rgba(199, 208, 216, .8);
    --background-active-color-light: rgba(199, 208, 216, .55);
    --text-color: #222;
    --text-color-sub: #444;
    --accent-color-light: rgba(53, 132, 246, 1);
    --accent-color: rgba(53, 132, 246, 1);
    --border-color: #888;
    --c: rgb(47, 77, 126);
    --mouse-size: .2em;
    cursor: default;
    height: 100%
}

body {
    position: relative;
    padding: 0;
    margin: 0;
    min-width: 290px;
    width: 100%;
    height: 100%;
    min-height: unset;
    color: var(--text-color);
    background-color: var(--background-color)
}

::-webkit-scrollbar {
    width: 4px;
    border-radius: 2px
}

::-webkit-scrollbar-track {
    background: #174D82
}

::-webkit-scrollbar-thumb {
    background: #174D82
}

::-webkit-scrollbar-thumb:hover {
    background: #174D82
}

input {
    cursor: text
}

input:focus {
    outline: 0
}

input[type=submit] {
    cursor: auto
}

.hide {
    display: none
}

.logo {
    position: relative;
    display: flex;
    width: 100vw;
    height: 100%;
    padding: 10vw
}

.on .logo {
    display: none
}

svg {
    width: 100%
}

.page {
    position: absolute;
    top: 0;
    padding-bottom: 5vh;
    width: 100vw
}

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

body.on {
    background-color: #174D82;
    color: #F1FAFF;
    font-family: 'Montserrat'
}

.content {
    margin: 12.5%;
    margin-bottom: 0;
    font-size: 2em
}

a {
    font-weight: 600
}

footer {
    color: #F1FAFF;
    margin-left: 12.5%;
    padding-top: 10%;
    font-size: .8em
}

.assetico {
    height: .5em;
    min-height: 20px
}

#mouse {
    position: absolute;
    display: block;
    overflow: hidden;
    border: var(--mouse-size) solid var(--c);
    border-radius: 50em;
    --mouse-height: calc(var(--mouse-size) * 12);
    height: var(--mouse-height);
    width: calc(var(--mouse-height) * .66);
    bottom: 1em;
    left: calc(50% - (var(--mouse-height) / 2) + var(--mouse-size))
}

#mouse span {
    display: block;
    background: var(--c);
    height: var(--mouse-size);
    width: 100%;
    margin-top: 65%
}

#mouse::after {
    content: '';
    -webkit-animation: 3s 2s infinite click ease-in;
    animation: 3s 2s infinite click ease-in;
    position: relative;
    display: block;
    top: -55%;
    width: calc(50% - var(--mouse-size));
    height: calc(55% - var(--mouse-size));
    border-right: var(--mouse-size) solid var(--c)
}

@-webkit-keyframes click {
    0% {
        background-color: rgba(0, 0, 0, 0)
    }
    30% {
        background-color: rgba(0, 0, 0, 0)
    }
    35% {
        background-color: rgba(0, 0, 0, 1)
    }
    40% {
        background-color: rgba(0, 0, 0, 0)
    }
    55% {
        background-color: rgba(0, 0, 0, 0)
    }
    60% {
        background-color: rgba(0, 0, 0, 1)
    }
    65% {
        background-color: rgba(0, 0, 0, 0)
    }
}

@keyframes click {
    0% {
        background-color: rgba(0, 0, 0, 0)
    }
    30% {
        background-color: rgba(0, 0, 0, 0)
    }
    35% {
        background-color: rgba(0, 0, 0, 1)
    }
    40% {
        background-color: rgba(0, 0, 0, 0)
    }
    55% {
        background-color: rgba(0, 0, 0, 0)
    }
    60% {
        background-color: rgba(0, 0, 0, 1)
    }
    65% {
        background-color: rgba(0, 0, 0, 0)
    }
}

@media only screen and (min-width:600px) {
    html,
    body {
        font-size: min(2vw, 22px)
    }
}

@media only screen and (min-width:900px) {
    .content {
        margin-right: 25%
    }
}