body {
    background-color: black;
    font-family: "FoundryGridnik Bold";
}

@font-face {
    font-family: "FoundryGridnik Bold";
    src: url("../font/FoundryGridnik Bold.otf");
}

@font-face {
    font-family: "albert";
    src: url("../font/Albert-Black.otf");
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
/*    overflow-x: hidden;*/
}

.box {
    width: 100%;
    background-color: black;
    position: relative;
    display: flex;
    flex-direction: column;
}

.box--row {
    flex-direction: row;
}

.box--full-height {
    min-height: 100vh;
}

.title {
    font-size: 11em;
    width: 100%;
    word-spacing: -0.6rem;
}

.small-text {
    color: grey;
    font-size: 3em;
    width: 100%;
    text-align: justify;
    text-justify: inter-word;
    word-spacing: -0.6rem;
}

.right-text {
    text-align: right;
    font-size: 10em;
}


.text-center {
    color: red;
    font-size: 12em;
    width: 100%;
    text-align: center;
    justify-content: center;
}

.clear-text {
    color: grey;
    font-size: 10em;
    width: 100%;
}

.foggy-text {
    transition: text-shadow 2s;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6), 0px 0px 30px rgba(255, 255, 255, 0.4), 0px 0px 50px rgba(255, 255, 255, 0.3), 0px 0px 180px rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0);
}

.foggy-text:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, .6);
}

body.flag-mobile .foggy-text.switch-in-view {
    border: 1px solid rgba(255, 0, 0, 1);
    text-shadow: 0 0 1px rgba(255, 255, 255, .6);
}



.title foggy-text2 {
    transition: text-shadow 0s;
    text-shadow: 0px 0px 100px rgba(255, 255, 255, 0.6), 0px 0px 30px rgba(255, 255, 255, 0.4), 0px 0px 50px rgba(255, 255, 255, 0.3), 0px 0px 180px rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0);
}

.foggy-text2:hover {
    text-shadow: 0 0 30px rgba(300, 300, 300, .6);
}

body.flag-mobile .foggy-text2.switch-in-view {
    border: 10px solid rgba(255, 0, 0, 1);
    text-shadow: 0 0 1px rgba(255, 255, 255, .6);
}



.text-pink {
    font-family: albert;
    color: mediumpurple;
    font-size: 5em;
    width: 100%;
    text-align: center;
    justify-content: center;
    background-color: darkblue;
    
}


.box__column {
    display: flex;
    flex-direction: column;
    width: 50%;
    border: solid 1px black;
}

.box__row {
    border: solid 1px black;
    height: 50%;
}

.box__row h1 {
    color: white;
}

.line-box-1 {
    border-top: solid 55px grey;
    border-right: solid 55px grey;
    margin-right: 100px;
    height: 100%;
    flex: 1 1 auto;
    filter: blur(10px);
    transition: filter 2s ease-in-out;
}

.line-box-2 {
    border-top: solid 55px grey;
    border-right: solid 55px grey;
    margin-right: 100px;
    height: 200px;
    flex: 1 1 auto;
    filter: blur(10px);
    transition: filter 2s ease-in-out;
}


.line-box-3 {
    border-bottom: solid 55px red;
    height: 100%;
    flex: 1 1 auto;



    transition: filter 2s ease-in-out;
}


.line-box-4 {
    border-top: solid 55px red;
    height: 0%;
    flex: 1 1 auto;


    transition: filter 2s ease-in-out;
}

.line-box-1:hover {
    filter: blur(0px);
}


.h1 {
    color: grey;
    font-size: 10em;
    width: 100%;
}

.image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-column {
    font-size: 3em;
    color: white;
}

.circle {
    margin-left: -100vh;
    margin-top: 90vh;
    border-radius: 20%;
    width: 200vw;
    height: 160vw;
    background-color: aqua;
    position: absolute;
    filter: blur(50px);
    mix-blend-mode: screen;
}

.circle:nth-child(1) {
/*    top: 200px;*/
/*    left: 100px;*/
    background-color: rgb(0, 0, 255);
    animation-name: circle1;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

.circle:nth-child(2) {
/*    top: 200px;*/
/*    left: 100px;*/
    background-color: rgb(138, 43, 226);
    animation-name: circle1;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

.circle:nth-child(3) {
/*    top: -200px;*/
/*    left: -100px;*/
    background-color: rgb(138, 43, 226);
    animation-name: circle2;
    animation-duration: 13s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

@keyframes circle1 {
    0% {
        left: 0%;
        transform: rotate(0deg);
    }

    50% {
        left: 50%;
        transform: rotate(180deg);
    }

    100% {
        left: 0%;
        transform: rotate(360deg);
    }
}

@keyframes circle2 {
    0% {
        left: 0%;
        transform: rotate(0deg);
    }

    50% {
        left: 50%;
        transform: rotate(-180deg);
    }

    100% {
        left: 0%;
        transform: rotate(-360deg);
    }
}

.anim {
    position: relative;
    width: 100%;
    overflow: hidden
    /* background-color: blue; */
}

/* -webkit-box-align: center;
          align-items: center;
  background-color: ;
  display: -webkit-box;
  display: flex;
  height: 200vh;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); */
/* } */

.letter-x {
    width: 100%;
    height: auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.line {
    fill: none;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.line-1 {
    stroke: url(#linear-gradient);
    -webkit-transform: translateY(calc(var(--line) * -3px)) translateX(calc(var(--line) * -2px));
    transform: translateY(calc(var(--line) * -3px)) translateX(calc(var(--line) * -2px));
    -webkit-animation: line-1 5s infinite calc(var(--line) * .05s);
    animation: line-1 5s infinite calc(var(--line) * .05s);
}

.line-2 {
    stroke: url(#linear-gradient-2);
    -webkit-transform: translateY(calc(var(--line) * 3px)) translateX(calc(var(--line) * 2px));
    transform: translateY(calc(var(--line) * 3px)) translateX(calc(var(--line) * 2px));
    -webkit-animation: line-2 5s infinite calc(var(--line) * .05s);
    animation: line-2 5s infinite calc(var(--line) * .05s);
}

.last-box .line-1 {
    stroke: url(#linear-gradient-last);
    -webkit-transform: translateY(calc(var(--line) * -3px)) translateX(calc(var(--line) * -2px));
    transform: translateY(calc(var(--line) * -3px)) translateX(calc(var(--line) * -2px));
    -webkit-animation: line-1 5s infinite calc(var(--line) * .05s);
    animation: line-1 5s infinite calc(var(--line) * .05s);
}

.last-box .line-2 {
    stroke: url(#linear-gradient-2-last);
    -webkit-transform: translateY(calc(var(--line) * -3px)) translateX(calc(var(--line) * -2px));
    transform: translateY(calc(var(--line) * -3px)) translateX(calc(var(--line) * -2px));
    -webkit-animation: line-2 5s infinite calc(var(--line) * .05s);
    animation: line-2 5s infinite calc(var(--line) * .05s);
}

@-webkit-keyframes line-1 {

    33%,
    70% {
        -webkit-transform: translateX(calc(var(--line) * -9px));
        transform: translateX(calc(var(--line) * -9px));
        opacity: 1;
    }
}

@keyframes line-1 {

    33%,
    70% {
        -webkit-transform: translateX(calc(var(--line) * -9px));
        transform: translateX(calc(var(--line) * -9px));
        opacity: 1;
    }
}

@-webkit-keyframes line-2 {

    33%,
    70% {
        -webkit-transform: translateX(calc(var(--line) * 9px));
        transform: translateX(calc(var(--line) * 9px));
        opacity: 1;
    }
}

@keyframes line-2 {

    33%,
    70% {
        -webkit-transform: translateX(calc(var(--line) * 9px));
        transform: translateX(calc(var(--line) * 9px));
        opacity: 1;
    }
}