@import "fonts.css";

body, html {
    font: 100 20px/1.5 'Alegreya Sans', sans-serif;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 20px;
    overflow: hidden;
}

body {
    /*background: rgb(15,32,39);*/
    /*background: linear-gradient(0deg, rgba(15,32,39,1) 0%, rgba(32,58,67,1) 59%, rgba(44,83,100,1) 100%);*/
    /*background: rgb(235,51,73);*/
    /*background: linear-gradient(0deg, rgba(235,51,73,1) 0%, rgba(244,92,67,1) 100%);*/
    background: rgb(0,4,40);
    background: linear-gradient(0deg, rgba(0,4,40,1) 0%, rgba(0,78,146,1) 100%);
    width: 100vw;
    height: 100vh;
}

@media (max-width: 767px) {
    body, html {
        font: 100 16px/1.5 'Alegreya Sans', sans-serif;
    }
}

main {
    position: relative;
    height: 100vh;
    max-width: 660px;
    margin: 0 auto;
    padding: 0 1rem;
}

strong {
    font-weight: 400;
}

.logo {
    width: 100%;
    padding-top: 8rem;
}

.logo svg {
    display: block;
    max-width: 660px;
    width: 100%;
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-miterlimit: 10;
}

.logo svg .k {
    stroke-dasharray: 1247 1249;
    stroke-dashoffset: 1248;
    animation: cTRtJeXh_draw 2500ms ease-in-out 500ms forwards;
}

.logo svg .o {
    stroke-dasharray: 976 978;
    stroke-dashoffset: 977;
    animation: cTRtJeXh_draw 2500ms ease-in-out 666ms forwards;
}

.logo svg .s {
    stroke-dasharray: 1009 1011;
    stroke-dashoffset: 1010;
    animation: cTRtJeXh_draw 2500ms ease-in-out 833ms forwards;
}

.logo svg .t {
    stroke-dasharray: 859 861;
    stroke-dashoffset: 860;
    animation: cTRtJeXh_draw 2500ms ease-in-out 1000ms forwards;
}

.logo svg .n {
    stroke-dasharray: 1086 1088;
    stroke-dashoffset: 1087;
    animation: cTRtJeXh_draw 2500ms ease-in-out 1166ms forwards;
}

.logo svg .t {
    stroke-dasharray: 859 861;
    stroke-dashoffset: 860;
    animation: cTRtJeXh_draw 2500ms ease-in-out 1333ms forwards;
}

.logo svg .n {
    stroke-dasharray: 1086 1088;
    stroke-dashoffset: 1087;
    animation: cTRtJeXh_draw 2500ms ease-in-out 1500ms forwards;
}

@keyframes cTRtJeXh_draw {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes cTRtJeXh_fade {
    0% {
        stroke-opacity: 1;
    }

    94.44444444444444% {
        stroke-opacity: 1;
    }

    100% {
        stroke-opacity: 0;
    }
}

section.description {
    max-width: 660px;
    margin-top: 2rem;
    padding-top: 2rem;
    text-align: center;
}

footer {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 15px;
    width: 100%;
    max-width: 660px;
    text-align: center;
}

footer .pos-helper {
    width: 330px;
    display: flex;
    justify-content: space-between;
}

footer,
footer a,
footer p {
    font-size: 0.85rem;
    color: rgb(61, 105, 123);
}

p, a, ul, li {
    font-size: 1rem;
    color: #fff;
    font-weight: 100;
}

ul {
    padding-left: 1rem;
}

ul li {
    position: relative;
    padding-left: 0.65rem;
}

ul li:before {
    content: '';
    position: absolute;
    width: 0.25rem;
    height: 0.25rem;
    background: #fff;
    left: 0;
    top: 0.65rem;
}

a {
    font-weight: 300;
    text-decoration: none;
    transition: all 0.2s ease;
}

@media (max-width: 767px) {
    a {
        word-break: break-all;
    }
}

a:hover,
a:focus {
    color: #bd1a19;
}

h1, h2, h3, h4 {
    color: #fff;
    font-weight: 100;
}

h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
    margin-top: 1.2rem;
    margin-bottom: 0.7rem;
}

h3 {
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}