/* ITERATIONS */

    @font-face {
        font-family: 'New Edge';
        src: url('NewEdgeTM-Regular.otf') format('opentype');
    }

    @font-face {
        font-family: 'Times Now';
        src: url('JHA - TimesNow-ExtraLight.otf') format('opentype');
    }

     :root {
        --brown: #441D01;
        --red: #E30F00;
        --grey: #DACCCC;
        --purple: #C1B3FE;
        --blue: #555577;
        --pink: #FEB8D5;
        --black: #000000;

     }
    :root {
        --main: var(--brown);
        --black: #441D01;
        --white: var(--red);
    }

    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--main);
        overflow: hidden;
    }

    .container-ellipse.absolute {
        /* position: absolute; */
        /* background: #0f0; */
        /* border-radius: 50%; */
    }
    .container-ellipse {
        width: 92vmin;
        height: 92vmin;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        /* border-radius: 40%; */
        /* outline: 1px solid red; */
    }

    .sub-container {
        position: absolute;
        width: 60vmin;
        height: 90%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        flex-grow: 1;
        flex-shrink: 1;
        /* outline: 1px solid blue; */
        overflow: hidden;
    }

    .ellipse {
        position: relative;
        width: 100%;
        height: 400px;
        border-radius: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 40px;
        background-size: 200% 200px;
        min-height: 40px;
        background: var(--main);
        background-repeat: no-repeat;
    }

    .ellipse.shade {
        background: var(--main);
    }

    .sub-container .ellipse {
        animation: grow 5s cubic-bezier(0.6, 0, 0.2, 1) infinite;
    }

    @keyframes grow {

        0%,
        100% {
            height: 0px;
        }

        50% {
            height: 500px;
        }
    }
    
    html, body {
        padding: 0;
        margin: 0;
        font-size: 3vw;
        height: 100vh;
        width: 100vw;
        line-height: 1;
        font-family: 'New Edge', monospace;
        /* color: #CBFD54; */
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
    }


    pre {
        position: absolute;
        margin:0;
        padding:0;
        left:0;
        top:0;
        width:100vw;
        height:100vmin;
        font-family: inherit;
    }
    a {
        text-decoration: none;
        color: inherit;
        z-index: 999;
    }
    a:hover {
        text-decoration: underline;
    }

    .container-outer {
        /* background: var(--black); */
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100vmin;
        height: 100vmin;
        /* background-color: #CBFD54; */
    }
    .texture {
        position: absolute;
        display: block;
        width: 100vw;
        height: 100vh;
        mix-blend-mode: overlay;
        pointer-events: none;
        background:  url(noise.jpg);
        background-repeat: repeat;
        background-size: 260px 260px;
        opacity: 0.3;
        z-index: 9999;
    }

    .container {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: stretch;
        width: 100vmin;
        height: 92vmin;
        background-color: var(--main);
    }


    .ellipses {
        position: relative;
        display: block;
        float: left;
        width: calc(100vmin - 8vmin);
        height: 100%;
        /* background-color: #CBFD54; */
    }




    .edge {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        /*background: red;*/
        width: 4vmin;
        height: 100%;
    }
    .edge.left-edge {
        left: 0;
        /* margin-left: -40px; */
    }
    .edge.right-edge {
        /* right: -60px; */
    }
    .cardboard {
        border-radius: 20px;
        background: var(--white);
        margin: 10px;
        width: 15px;
        height: 15px;
        /* opacity: 0; */
    }
    .cardboard.long {
        height: 25px;
    }


    .text {
        position: absolute;
        color: var(--white);
    }
    .iterations {
        top: -2.3vmin;
        left: -1.5vmin;
        font-family: 'New Edge', sans-serif;
        font-size: 17.9vmin;
        /*letter-spacing: -15px;*/
        letter-spacing: -1.4vmin;
        /*z-index: 1;*/
        pointer-events: none;
        z-index: 1;
        /* opacity: 0; */

    }
    .times {
        bottom: 13.2vmin;
        width: 200vmin;
        margin-left: -1vmin;
        line-height: 0;
        letter-spacing: -5vmin;
        /* letter-spacing: -5.5vmin; */
        font-size: 38vmin;
        text-align: center;
        font-family: 'Times Now', sans-serif;
        font-weight: lighter;
        pointer-events: none;
        z-index: 20;
        /* opacity: 0; */

    }
    .extra-1 {
        /*letter-spacing: -100px;*/
        letter-spacing: -6vmin;
        display: inline-block;
        /* color: transparent; */
        /* transform: scale(0.6, 2) translateY(-1.2vmin); */
        /* height: 100px; */
        /* border-bottom: 5px solid var(--white); */
    }


    .extra-2 {
        letter-spacing: -1.5rem;
    }

    .extra-3 {
        /*letter-spacing: -72px;*/
        letter-spacing: -19.7vmin;
        transform: scale(0.55, 1) translateY(1.1vmin);
        display: inline-block;
    }
    .extra-4 {
        letter-spacing: -5.7vmin;
    }
    .extra-5 {
        letter-spacing: -7.1vmin;
    }

    .extra-6 {
        letter-spacing: -6.5vmin;
    }
    

    .min {
        letter-spacing: 0px;
    }
    .right {
        text-align: right;
        left: auto;
        right: -0vmin;
    }
    .small {
        font-family: 'New Edge', sans-serif;
        font-size: 2.5vmin;
        letter-spacing: -.1vmin;
        text-transform: uppercase;
        color: var(--white);
        height: 4vmin;
        width: 100%;
        padding: 0 4vmin;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* opacity: 0; */
    }

    .transparent {
        color: transparent;
    }

    .z-1 {
        z-index: 4;
    }
    .z-5 {
        z-index: 5;
    }
    .z-10 {
        z-index: 14;
    }