@font-face {
    font-family: 'Temposmono';
    src:  url('/assets/fonts/TemposRomanMono.woff') format('woff2');
    font-weight: 400;
  }

body{
    padding: 0;
    margin: 0;
    font-family: 'Temposmono', Courier, monospace;
    font-variant-numeric: oldstyle-nums;

}


:root{
    --colorMain: black;
    --bgColorMain: white;
}

body{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

}



.drawing-board {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    background-color: var(--bgColorMain);
}
.drawing-board canvas{
    height: 100%;
    width: 100%;
}

#toolbar, #adress{
    z-index: 100000;
}

h1{
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    text-align: center;
    pointer-events: none;
    user-select: none;
    background: yellow;
}

main.home{
    overflow: scroll;
    pointer-events: all;
    user-select: all;
}

.text{
    padding: 5px;
    font-family: 'Temposmono', Courier, monospace;
    text-transform: uppercase;
    pointer-events: all;
    position: fixed;
    top: var(--offsetTop);
    left: 50vw;
    transform: translateX(-50%);
    width: 100vw;
    font-size: 13px;
    letter-spacing: 0.2em;
    line-height: 1.1;
}



@media screen and (min-width: 720px) {
    .text {
        font-size: clamp(16px, 1.4vw, 36px);
        letter-spacing: 0.2em;
        line-height: 1.1;
    }
}

  




 button, p a{ 
    border:none; 
    appearance: none; 
    background: none;
    font-family: 'Temposmono', Courier, monospace;
    text-transform: uppercase;
    pointer-events: all;
    cursor: pointer;
    transition: all 150ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    z-index:1000000;
    position: relative;
    display: inline-block;
    font-weight: normal;
    font-size: inherit;
    color: inherit;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 0;
}  

button:hover,
p a:hover{
    letter-spacing: 0.25em;
    transition: all 150ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

button::before,
p a::before{ 
    content: '[';
    position: absolute;
    top: -0.1em;
    left: -1em;
    z-index: -1;
}   

button::after,
p a::after{ 
    content: ']';
    position: absolute;
    top: -0.1em;
    right: -1em;
    z-index: -1;
}  

button ,
p a  {
    margin-left: 1em;
    margin-right: 1em;
}

p{
    padding: 0;
    margin: 0;
    text-align: center;
    color: var(--colorMain);
}

a, button{
    color: var(--colorMain);
    text-decoration: none;
    pointer-events: all;
    cursor: pointer;
}


.home .text p {
    padding-bottom: 0.25em;
    pointer-events: all;
}

.logo{
    pointer-events: none;
    z-index:-1;
    user-select: none;
}


#toolbar{
    text-align: center;
    pointer-events: all;
}

svg {
	width: 100vw;
	height: 100vh;
	touch-action: none;
}
svg path{
    fill: var(--colorMain);
}
canvas{
    display: block;

}

#canvas {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

#logo {
    width: 100%;
    height: 100%;
}

#overlay{
    display: block;
    height: 100vh;
    width: 100vw;
    background: #ffffff;
    position: fixed;
    top: 0;
    z-index: 100000000;
    mix-blend-mode: difference;
    pointer-events: none;
    opacity: 1;

    animation-duration: 1200ms;
    animation-name: fadeOut;
    animation-direction: forwards;
    animation-fill-mode: forwards;
    animation-delay: 2600ms;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.visible{
    visibility: visible;
    opacity: 1!important;
}

.hidden{
    visibility: hidden;
    opacity: 0!important;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
      /* opacity: 1; */
    }

    100% {
      opacity: 0;
    }
}

#adress{
    opacity: 0;
    /* transform: translateY(200px); */

    animation-duration: 600ms;
    animation-name: fadeIn;
    animation-direction: forwards;
    animation-fill-mode: forwards;
    animation-delay: 1600ms;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);

}

@keyframes fadeIn {
    0% {
      opacity: 0;
        /* transform: translateX(-200px); */
    }
    100% {
      opacity: 1;
    /* transform: translateX(0); */
    }
}

p{
    padding-top: 0.1em;
}

p:first-child{
    padding-top: 0;
}

@media screen and (min-width: 720px) {
    p{
        padding-top: 0.15em;
    }
    
    p:first-child{
        padding-top: 0;
    }
}

#adress{
    overflow: hidden;
}


#adress > *{
    /* transform: translateY(200px); */
    transform: translateY(100px);
    animation-duration: 600ms;
    animation-name: slideIn;
    animation-direction: forwards;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.77,0,.175,1);

}

#adress > *:nth-child(1){
    animation-delay: 1600ms;
}

#adress > *:nth-child(2){
    animation-delay: 1700ms;
}

#adress > *:nth-child(3){
    animation-delay: 1800ms;
}

@keyframes slideIn {
    0% {
        transform: translateY(100px);
    }
    100% {
    transform: translateY(0);
    }
}






#canvas{
    transform: scale(1);      

    animation-duration: 600ms;
    animation-name: scale;
    animation-direction: forwards;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
    animation-timing-function: cubic-bezier(.77,0,.175,1);

}

@keyframes scale {
    0% {
        transform: scale(1);      
    }
    100% {
        transform: scale(1);      

    }
}