:root {
    --green: #035A2A;
    --l-blue: #4F89B3;
    --ll-blue: #93cbf3;
    --d-blue: #0063C1;
    --dd-blue: #0A4C81;
    --orange: #FF7026;
    --purple: #AB4B77;
    --lilac: #D796E7;
    --l-lilac: #dda8eb;
    --pink: #FE9ED2;
    --peach: #E78884;
    --yellow: #FFA24E;
    --red: #FC2F17;
    --black: #000000;
    /* --border: #5d2c69; */
    --about: #f7f6fb;
    --border: #16ffa9;
    --timing: 0.25s;
    --bezier: cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes fade {
    0% {
      opacity: 0;
      transform: translate(0, 30px);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
}
@keyframes border {
    0% {
        border-color: rgba(215, 150, 231, 0); 
    }
    100% {
        border-color: rgba(215, 150, 231, 1); 
    }
}
.container, header h1, header nav, .about {
    animation: fade var(--timing) var(--bezier) both;
}
.container {
    animation-delay: var(--timing)
}
header h1 {
    animation-delay: calc(3 * var(--timing));
  }
header nav {
    animation-delay: calc(4 * var(--timing));
}
.about {
    animation-delay: calc(5 * var(--timing));
}
body {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    /* font-weight: <weight>; */
    font-style: normal;

    color: #000000;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}
body.body {
    overflow-y: hidden;
}
body.open{
    height: auto;
    transition: background-color 1s ease;
    background-color: var(--about);
}
a {
    color: #000000;
}

.container {
    background-color: var(--black);
    min-width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
}
.container div, .coming-soon {
    overflow: hidden;
}
.box-4 {
    position: relative;
}
.box-5 {
    width: 55%;
    top: 25%;
    left: 20%;
}

.research {
    background-color: var(--green);
}


.gr-des {
    background-color: var(--l-blue);
}

.art {
    background-color: var(--d-blue);
}
.code {
    background-color: var(--purple);
}
.political {
    background-color: var(--orange);
}
.speculative {
    background-color: var(--peach);
}
.hitting{
    background-color: var(--yellow); 
}
.coming {
    background-color: var(--pink);
}
.ekaterina {
    background-color: var(--dd-blue);
}
.aka {
    background-color: var(--lilac);
}
.katya {
    background-color: var(--red);
}
.volkova {
    background-color: var(--d-blue);
}
span.headlineH, span.headlineV {
    display: inline-block;
    flex: 0 0 auto;
}

.about {
    width:100vw;
    min-height: 100vh;
    transition: all 0.5s 0.5s;
}
.about-text a {
    text-decoration: none;
    border-bottom: .125rem solid var(--border);
    padding-top: .05rem;
    padding-bottom: .02rem;
    background: linear-gradient(to bottom, var(--border) 0,var(--border) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 0 0;
    transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
}
.measure-k {
    max-width: 35em;
}
.banner a {
    border-bottom: 4px solid var(--border);
}
.about a:hover {
    background-size: 3.125rem 3.125rem;
}
header h1 {
    transition: all 0.5s 0.5s;
}
span.headlineH svg {
    height:100%;
}

span.headlineV svg {
    width: 100%;
}

div.circle {
    border-color: var(--border);
    /* transition: border 0.2s 0.2s ; */
    animation: border calc(7 * var(--timing)) var(--bezier) calc(5 * var(--timing)) infinite;
}


@media (max-width: 959px) {
            .box-5 {
                width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            }
        .box-5 .katya {
            left: 50%;
            top: 25%;
        }
        .box-5 .volkova {
            background-color: var(--orange);
        }
        .box-5 .ekaterina {
            background-color: var(--yellow);
        }

       








}