:root{
    --bg: #023d3a;
    --space: 25px;
    --font-size: 20px;
    --color:rgb(243, 247, 225);
    --color-highlight: rgb(243, 247, 225);
}
body *{
    user-select: none;
}
body{
    margin:0;
    touch-action: none;
    background-color: var(--bg);
    color: var(--color);
    font-size: var(--font-size);
    font-family: "Yatra One", serif;
    font-optical-sizing: auto;
}
body.intro-body{
    touch-action: manipulation;
}
a, a:visited, a:link, a:focus{
    color:var(--color);
}
#home-intro{
    max-width: 100%;
    text-align: center;
    margin: var(--space);
}
.success-modal{
    position: fixed;
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;
    background-color: #023d3af5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
    color: var(--color-highlight);
    text-align: center;
    opacity: 0;
    transition: 2s;
    pointer-events: none;
}
.success-modal p{
    font-size: calc(var(--font-size) * 1.5);
}
.success-modal h1{
    font-size: calc(var(--font-size) * 2.2);
    margin-bottom: calc(var(--space)/2);
}
.success-modal .button{
    margin-top: calc(var(--space) * 4);
}
.success-modal svg{
    padding: calc(var(--space)) 0;
    padding-bottom: calc(var(--space) *2);
    text-shadow: 0px 0px 15px #00fff2;
    width: 150px;
    animation: squigglevision 0.4s infinite alternate;

        /* Similar syntax to box-shadow */
}
.success-modal svg.jala-svg{
    width: 100px;
}
.success-modal svg.jada{
    width: 50px;
}
.success-modal.on{
    opacity: 1;
    pointer-events: all;
}
.success-modal h1, .success-modal p{
    text-shadow: 0px 0px 45px #00fff2;
}
a:hover{
    color:powderblue;
}
body > button{
    position:fixed;
    bottom:15px;
    right:15px;
    

}
#about{
    position:fixed;
    bottom:0;
    text-decoration: none;
    right:0;
    background-color: var(--bg);
    padding:10px 15px;
}
#message #about{
    bottom:0;
    padding: var(--space);
    margin: 0;
}
img{
    filter:invert(1);
    max-height:60vh;
    margin-bottom: var(--space);
}

#gallery{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
#gallery a{
    position:relative;
    display: inline-block;
    flex-basis: calc(33.333% - (var(--space)));
}
#gallery a:hover{
    opacity: 0.8;
}
#gallery a .title em{
    background-color: rgba(0,0,0,0.8);
    padding: 8px 10px;
    font-style:normal;
    text-align: center;
    min-width: 25px;
    display: none;
    border-radius: 100%;
}
#gallery a .title{
    display: flex;
    width: 100%;
    height: calc(100% - var(--space));
    position:absolute;
    z-index: 1;
    /* background-color: rgba(0,0,0,0.8); */
    top:0;
    left:0;
    text-shadow: #023d3a 0 0 50px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
#gallery img{
    width: 100%;
    height: auto;
    max-height: none;
    filter:none;
}
img.chart{
    max-height: 50vh;
}
main{
    margin: var(--space);
}
h2{
    font-weight: normal;
}
input{
    font-size: var(--font-size);
    padding: 3px 5px;
    max-width: calc(100% - 50px);
    margin-top:24px;
    color:var(--color);
    text-transform: lowercase;
    background-color: var(--bg);
    border:1px dotted var(--color);
    position:relative;
    font-family: inherit;
    z-index: 1;
}
button,select{
    background-color: #023d3acc;
    color:var(--color);
    border:1px dotted var(--color);
    padding: 3px 10px;
    font-size: var(--font-size);
    font-family: inherit;
    position:relative;
    z-index: 1;
    cursor: pointer;
    margin: calc(var(--space)/2);
    border:none;
    text-decoration: underline;
}
button:hover{
    color:powderblue;
}
canvas{
    display: block;
    z-index: 0;
    margin:0 auto;
    overflow: hidden;
}
#flip{
    display: none;
}
#grid{
    left:0;
    width: calc(100vw - 100px);
    height: calc(100vh - 50px);
    overflow: scroll;
    top:0;
    position: absolute;
    padding: 50px;
    padding-top: 0;
    background-color: #023d3a;
}
#scene1, #scene2{
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
}
#encode{
    position: fixed;
    background-color: #023d3a;
    z-index: 2;
    border: 1px solid;
    bottom:var(--space);
    left: var(--space);
    border:none;
    text-decoration: underline;
}
#about{
    position: fixed;
    background-color: #023d3a;
    z-index: 2;
    padding:3px 10px;
    border: 1px solid;
    bottom:var(--space);
    right: var(--space);
    border:none;
    text-decoration: underline;
}
#encode a, #about a{
    text-decoration: none;
}
.instruction-modal button a, .about-modal button a{
    text-decoration: none;
}
.instruction-modal, .about-modal{
    position:fixed;
    top:0;
    left:0;
    background-color: #023d3af5;
    padding: var(--space);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9;
    height: calc(100vh - (var(--space)*2));
    width: calc(100vw - (var(--space)*2));
}
.instruction-modal p, .about-modal p{
    max-width: 800px;
}
#info{
    user-select: none;
    margin:0;
}
#info{
    padding: var(--space);
    position: fixed;
    top:0;
    left:0;
}
main .instruction-modal, main .about-modal{
    display: flex;
}
main .instruction-modal.close, main .about-modal.close{
    display: none;
}





#go-scene1{
   position:fixed;
   top:0;
   border:none;
   left:0;
   border-bottom:1px dotted;
   padding:0;
}
#message{
    background-color: #023d3acc;
    margin-top: var(--space);
    padding: var(--space);
    position: fixed;
    top:0;
    margin:0 auto;
    z-index: 2;
    left:auto;
    right:0;
    width:calc(25% - (var(--space) * 2));
}
#message > *{
    max-width: 900px;
}
#message > span{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
main #message{
  display: block;
}
#num{
    background-color: transparent;
    color: var(--color);
    padding: 5px;
    min-height: 1em;
    margin-top: var(--space);
    margin-bottom: 0;
    text-align: center;
    font-size: calc(var(--font-size) * 1.3);
}

#copy-text{
    border:none;
    width: 25px;
    height: 25px;
    overflow: visible;
    margin: 0;
    padding: 0;
    margin: 0;
    display: none;
    margin-top:3px;
}
#copy-text:hover{
    opacity: 0.8;
}
#copy-text svg{
    height:25px;
    width: 25px;
}
canvas{
    opacity: 1;
}
video{
    width: 50%;
}
.figcaption{
    font-size: calc(var(--font-size)/1.2);

}

main.on canvas{
    opacity: 1;
    z-index: 1;
    position: relative;
    left:auto;
    top:auto;
    transform: none;
}
#ok{
    border:1px solid;
    text-decoration: none;
}
#zero.on, #one.on{
    color: yellow;
}
#progress{
    font-size: calc(var(--font-size)/1.1);
    text-align: center;
    font-weight: normal;
    text-shadow: 0px 0px 28px #00fff2;
}
#grid{
    /* touch-action: none; */
    touch-action: pan-x pan-y;
}
#grid.panning{
    touch-action: pan-x pan-y;
}
#pan-tool{
    pointer-events: none;
    display: none;
    position: fixed;
    right: calc(50vw - 31px);
    z-index: 2;
    bottom: calc((50vh - 184px)/2);
}
main{
    touch-action: none;
}
main.intro-body{
    touch-action: auto;
}
html, body {touch-action: none;}
/* canvas{
    touch-action: pan-x pan-y pinch-zoom;
} */
body.intro-body, html.intro-body{
    touch-action: auto;
}
.settings{
    display: flex;
    position:fixed;
    top:0;
    z-index: 9;
    right:0;
    padding: var(--space);    
    font-style: italic;
    justify-content: space-between;
}
#intro{
    position: fixed;
    top:var(--space);
    width: 100%;
    text-align: center;
    
}

/* select{
    background-color: transparent;
    border:1px solid var(--color);
    padding: 
} */
 #mobile-only{
    display: none;
 }
#copy-success{
    pointer-events: none;
    position: fixed;
    opacity: 0;
    z-index: 2;
    margin:0;
    margin-top:-40px;
    margin-left:40px;
    transition:0.2s;
    color: var(--color-highlight);
}
#copy-success.on{
    opacity: 1;
}
#back-to-all{
    position:fixed;
    bottom:0;
    left:0;

}
#nav-about{
    background: linear-gradient(180deg,rgba(2, 61, 58, 1) 85%, rgba(255, 255, 255, 0) 100%);;
    width: calc(100% - var(--space) * 2);
    top:0;
    left:0;
    padding: var(--space);
    position: fixed;
    display: flex;
    z-index: 2;
    justify-content: space-between;
}
#back-to-all a{
    text-decoration: none;
}

@keyframes squigglevision {
  0% {
    filter: url("#turbulence-1") drop-shadow( 0px 0px 15px #00fff2);
    -webkit-filter: url("#turbulence-1") drop-shadow( 0px 0px 15px #00fff2);
  }
  25% {
    filter: url("#turbulence-2") drop-shadow( 0px 0px 15px #00fff2);
    -webkit-filter: url("#turbulence-2") drop-shadow( 0px 0px 15px #00fff2);
  }
  50% {
    filter: url("#turbulence-3") drop-shadow( 0px 0px 15px #00fff2);
    -webkit-filter: url("#turbulence-3") drop-shadow( 0px 0px 15px #00fff2);
  }
  75% {
    filter: url("#turbulence-4") drop-shadow( 0px 0px 15px #00fff2);
    -webkit-filter: url("#turbulence-4") drop-shadow( 0px 0px 15px #00fff2);

}
  100% {
    filter: url("#turbulence-5") drop-shadow( 0px 0px 15px #00fff2);
    -webkit-filter: url("#turbulence-5") drop-shadow( 0px 0px 15px #00fff2);
  }
}



@media(max-width: 900px){
    :root{
        --space: 15px;
        --font-size: 17px;
    }
    canvas{
      margin-top:-24px;
    }
    main{
        margin-top:var(--space);
        
    }
    #scene1{
        margin: calc(var(--space) * 4) var(--space);
    }
    #scene2{
        margin-top: calc(var(--space) * 3);
    }
    #pan-tool{

        display: flex;
        z-index: 3;
        user-select: none;
        padding: 5px;
        display: none;
    }
    #message #about{
        bottom: auto;
        top: 0;
        padding: var(--space);
        margin: 0;
    }
    #pan-tool svg{
        width: 50px;
        height: 50px;
    }
    video{
        width: 80%;
        margin:0 auto;
        display: block;
    }
    img.chart{
        max-height: 35vh
    }
    #pan-tool.on {
        transform: scale(1.2);
        box-shadow:rgb(243, 247, 225) 0px 0px 12px;
    }
    #message{
        left:0;
        right:auto;
        width:calc(100% - (var(--space) * 2));
    }
    #mobile-only{
        display: inline;
    }
    img{
        max-height: 50vh;
        margin-bottom:0;
    }
    #mobile-only svg{
        width: 20px;
        height:20px;
        padding:0 5px;
    }
    #adjust-image{
        margin-top:var(--space);
    }
    .settings{
        font-size: 16px;
    }
    #grid{
        left:0;
        width: calc(100vw );
        height: calc(100vh - 200px);
        overflow: scroll;
        top:0;
        position: absolute;
        padding: 0;
        padding-top: 180px;
        background-color: #023d3acc;
    }
    .settings button{
        padding: 3px 8px;
        font-size: 16px;
    }
    .instruction-modal, .about-modal{
        max-width: none;
        padding: calc(var(--space)* 2);
        height: calc(100vh - (var(--space)*4));
        width: calc(100vw - (var(--space)*4));
    }
    .instruction-modal p, .about-modal p{
        text-align: center;
    }
    
    #message{
        padding: var(--space);
        padding-bottom: 0;
    }
    #back-to-all{
        left: 50%;
        transform: translateX(-50%);
        margin:var(--space) 0;
    }
    #gallery{
        flex-direction: column;
        align-items: center;
    }
    #gallery a{
        flex-basis: 26%;
        width: 26vh;
        height: 26vh;
        margin-bottom: var(--space);
        text-align: center;
    }
    
    #gallery a img{
        width: auto;
        height: 26vh;
    }
    #gallery a {
        margin-bottom:0;
    }
}