:root {
  --bg-color: #787878;
  --bg-color-dark:#787878;
  --bg-color-light:#787878;
  --fg-color: #787878;
  --fg-color-dark: #787878;
  --fg-color-light: #787878;

  --accent-1: #787878;
  --accent-1-dark: #787878;
  --accent-1-light: #787878;
  --accent-2: #787878;
  --accent-2-dark: #787878;
  --accent-2-light: #787878;

  --size-w:90dvh;
  --size-mw:90vw;
  --size-h:90dvh;
  --size-mh:90vw;

  --font-size: 28px;
  --frame-width: 16px;

  --smallest-line: .5px;

  --scoreLeft: 4em;
  --score-shadow-start-x:.25em;
  --score-shadow-start-y:-.25em;
  --score-shadow-end-x:-.25em;
  --score-shadow-end-y:.25em;

  --shadow-color: rgba(80,80,80,1);

}

@font-face {
    font-family: 'Micro 5';
    src: url('Micro5-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Apple Emoji';
    src: url('AppleColorEmoji_Subset.ttf') format('truetype');
}

html{ height:100%; }
body {
    background-color:var(--bg-color); /*rgba(0,0,0,1);*/
    /*background-image: repeating-linear-gradient(-35deg, rgba(13,13,13,1), rgba(100,100,100,1));*/
    font-family: 'Micro 5',Arial,sans-serif;
    font-size:var(--font-size);
    color:white;
    min-height: 100%;
    display:grid;
    place-items: center;
    padding:0;
    margin:0;

    background-image: url('noise1.svg');
    background-size: 50%;

    text-shadow: 0 .06em 0px var(--shadow-color);
}
@media (max-width:767px) {
    body {
        font-size:24px;
    }
}

a {
    text-decoration:none;
    color:inherit;
    border-bottom: dotted 1px;
}

button,a.button {
    font-family: 'Micro 5',Arial,sans-serif;
    font-size:inherit;
    border:none;
    outline:none;
    padding:1em 2em;
    background-color: black;
    color:white;
}
button[disabled],a.button[disabled] {
    opacity: .4;
}


iframe {
    border:none;
    outline:none;
    width:calc(100vw - calc(100vw - calc(1200px + 4em)));
    height:calc(100vw - calc(100vw - calc(1200px + 4em)));
}
@media (max-width:1200px) {
    iframe {
        width:100vw;
        height:100vw;
    }
}

section:nth-child(2) {
    background-color: var(--fg-color);
}


#animalDiv1,#animalDiv2 {
    background-image: radial-gradient(circle at center, var(--fg-color) 31%, transparent 32%);
    width:100%;
    height:100%;
    display: grid;
    place-items: center;
}
@media (max-width:767px) {
    #animalDiv1,#animalDiv2 {
        min-height:100vw;
    }
}

#animal1,#animal2 {
    font-size:4.4em;
    margin-top: 0em;
    margin-bottom: 0;
    text-align: center;
    z-index: 102;
    text-shadow: 0 .0625em 0 rgba(80,80,80,.9); /*rgba(0,0,0,.25);*/
    width:fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;

    font-family: 'Apple Emoji';
}
#animal2 {
    transform:rotateY(180deg);
}

#signature {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    max-width: 60%;
}
#signature + h1 {
    position: relative;
    z-index: 1;
}


.columns {
    display: grid;
    gap: 1em;
    align-items: center;
}
.columns.two {
    grid-template-columns: 1fr 1fr;
}
@media (max-width:767px) {
    .columns.two {
        grid-template-columns: 1fr;
    }
    .columns.two > div:nth-child(2) {
        
         grid-row-start: 1;
    }
}


.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

    padding:2em;
    position: relative;
}


.information {
    background-color: var(--fg-color);
    padding: 1em 10vw;
    /*width:calc(1200px - 4em);
    max-width:96vw;*/
}
.information button {
    display: block;
    margin-left:auto;
    margin-right:auto;
}



.texture {
    /*position: absolute;
    left:0;
    top:0;
    right:0;
    left:0;
    width:100%;
    height:100%;*/
    /*background-color: var(--fg-color);*/
    background-image: url('noise1.svg');
    background-size: 100%;
}