* {
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;}
a {
    cursor: pointer;}
body {
    height: 100vh;
    max-height: 100%;
    width: 100vw;
    max-width: 100%;
    overflow: hidden;
    background-color: black;}
.matte {
    position: absolute; 
    height: 100%;
    width: 100%;
    background-color: black;
    z-index: 999;
    display: none;
    pointer-events: none;}

.left {
    position: absolute;
    width: 50vw;
    max-height: 100%;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    height: 100vh;
    left: 0;
    z-index: 998;
    pointer-events: all;}
.right {
    position: absolute;
    width: 50vw;
    max-height: 100%;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    height: 100vh;
    right: 0;
    z-index: 998;
    pointer-events: all;}

#green.left {
    cursor: url("../dis-media/cursorLeft.png"), auto;}
#green.right {
    cursor: url("../dis-media/cursorRight.png"), auto;}

#red.left {
    cursor: url("../dis-media/cursorLeftRed.png"), auto;
    display: none;}
#red.right {
    cursor: url("../dis-media/cursorRightRed.png"), auto;
    display: none;}

#blue.left {
    cursor: url("../dis-media/cursorLeftBlue.png"), auto;
    display: none;}
#blue.right {
    cursor: url("../dis-media/cursorRightBlue.png"), auto;
    display: none;}

p {
    font-size: 5vw;
    z-index: 999;}

.header,.infoHeader {
    position: fixed;
    font-family: Andale Mono,AndaleMono,monospace; 
    color: white;
    top: 2.5vw;
    left: 2.5vw;
    text-decoration: none;
    z-index: 998;}

.infoHeader {
    display: none;
    z-index: 999;}

.infoCopy,.formFill {
    display: none;
    position: fixed;
    font-family: Andale Mono,AndaleMono,monospace; 
    color: white;
    top: 10vw;
    left: 2.5vw;
    width: 95vw;
    z-index: 999;}

.formFill {
    display: none;
    position: absolute;
    overflow-y: scroll;}

input {
    background-color: white;}

.subMit {
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: Andale Mono,AndaleMono,monospace;
    padding: 5px;}

.participate,.home {
    position: fixed;
    font-family: Andale Mono,AndaleMono,monospace; 
    color: white;
    right: 2.5vw;
    top: 2.5vw;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-color: #00ff12;
    cursor: pointer;}

.home {
    display: none;}

#two,#three {
    display: none;}

.infoCopy a {
    color: white;
    text-decoration: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #00ff12;}

.scroll-container,
.scroll-area {
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
}

.scroll-container {
  font-size: 0;
  scroll-snap-type: mandatory;
  overflow: auto;}

.scroll-area {
  scroll-snap-align: start;
  overflow: visible;}

.scroll-container,
.scroll-area {
  margin: 0 auto;
}
.scroll-area img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 60%;
    max-height: 60%;}
.scroll-container {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;}

.scroll-container div {
    display: inline-block;
  }

::-webkit-scrollbar {
  width: 20px;
}

-webkit-scrollbar,
-webkit-scrollbar-track {
  display: block !important;}

/* Handle */
#one::-webkit-scrollbar-thumb {
  background-color: #00ff12;
  border-radius: 10px;}
#two::-webkit-scrollbar-thumb {
  background-color: red;
  border-radius: 10px;}
#three::-webkit-scrollbar-thumb {
  background-color: #00bdff;
  border-radius: 10px;}

.happ1 span {
    color: #00ff12;}
.happ2 span {
    display: none;
    color: red;}
.happ3 span {
    display: none;
    color: #00bdff;}


.happ1,.happ2,.happ3,.happ4 {
    cursor: pointer;}
@media (min-aspect-ratio: 1/1) {
 
    p {
        font-size: 1.15vw;}
    .infoCopy,.formFill {
        width: 50%;}
    
}