@charset "UTF-8";

html, body * {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #300000;
}

audio {
  margin-top: 1.5rem;
  right: 7rem;
  position: absolute;
  top: 0;
}

audio::-webkit-media-controls-panel {
  background-color: #525252;
}

audio::-webkit-media-controls-mute-button {
  background-color: #811818;
  border-radius: 50%;
}

.title object{
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 1000;
    background-color: #080309;
    height:100%;
}

.sect {
    display: flex;
    text-align: center;
    height: 4rem;
}

object {
    width: 80%;
    padding: 1rem;
}

.logo img {
    padding-top: 4.8rem;
    width: 80%;
}

.type {
    position: absolute;
    max-width: 100%;
    top: 4rem;
    left: 16rem;

    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
    z-index: -1000;
}

.type2 {
    position: absolute;
    max-width: 100%;
    top: 28rem;
    padding-left: 20rem;
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
    z-index: -1000;
}

.bb {
    position: absolute;
width: 100%;
height: 110%;
bottom: 0px;z-index: -111;
z-index: -1000000;
}



#timer {
  z-index: 100;
    position: absolute;
    top: 8.5rem;
    background-color: #669d47;
    width: 10rem;
    height: 2rem;
    border-radius: 4px;
    text-align: center;
    right: 2rem;
    color: rgb(6, 43, 9);
    font-size: 2rem;
    font-family: 'Share Tech Mono', monospace;
}

.eve {
    position: absolute;
    bottom: 0px;

}

.eve img {
    width: 25rem;
}

.textboxy {
    padding-left: 4px;
    padding-top: .5rem;
    float: right;
    width: 100%;

}


p {
    font-size: 1.3em;
    font-family: 'Share Tech Mono', monospace;
    color: rgb(46, 115, 29);
    text-shadow:#030203 4px 4px 4px;
}
h1 {
    opacity: .5;
    max-width: 100%;
    font-size: 2rem;
    font-family: 'Share Tech Mono', monospace;
    color: rgb(109, 109, 109);
    text-shadow:
    4px 4px 1px #300000,
    4px 6px 1px #400000,
    4px 8px 1px #500000,
    4px 10px 1px #000000,
    4px 12px 1px #700000,
    4px 14px 1px #800000,
    4px 24px 1px #721d1d,
    4px 26px 1px #000000,
    4px 28px 1px #7d1b1b,
    4px 30px 1px #661a1a,
    4px 40px 1px #480e0e;
}

.topside {
    padding-top: 10rem;
    width: 30rem;
    -webkit-filter: drop-shadow(2px 2px 2px #222);
    filter: drop-shadow(5px 5px 5px rgb(81, 8, 8));
    padding-left: 2rem;
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
    transform: rotate(5deg);
    
}

.bottomside {
    padding-top: 14rem;
    width: 33rem;
    padding-right: 5rem;
    -webkit-filter: drop-shadow(2px 2px 2px rgb(255, 255, 255));
    filter: drop-shadow(5px 5px 5px rgb(81, 8, 8));
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
    transform: rotate(-5deg);
}

#obj1 {
    top: 100px;
}

.sect1, .sect2, .sect3, .sect4, .board {
    visibility: hidden;
}

.sect1, .sect2, .sect3, .sect4, object{
    width: 100%;
}

.sect1 object{
    position: absolute;
    top: 15rem;
}

.sect2 object{
    position: absolute;
    top: 15rem;
}
.sect3 object{
    position: absolute;
    top: 15rem;
}
.sect4 object{
    position: absolute;
    top: 15rem;
}


.buttons{
    margin-top: 1.4rem;
    margin-left: 1rem;
    float: left;
}

.boardRight {
    position: absolute;
    left: 8rem;
}

.scorestyle {
    position: static;
    height: 1rem;
}

#score{
    display: block;
    margin-top: auto;
    position: absolute;
    left: 2;
    padding-left: 3rem;
    top: 0;
}

#scene1 img{
    width: 100%;
}
#scene2 img{
    width: 100%;
}
#scene3 img{
    width: 100%;
}
#scene4 img{
    width: 100%;
}


.boxy {
    width: 100%;
    height: 1024px;
}

.boxy2 {
    width: 100%;
    height: 1024px;
}

.boxy3 {
    width: 100%;
    height: 1024px;
}


.boxy4 {
    width: 100%;
    height: 1024px;
}

#btn0 {
    margin-bottom: 10px;
    width: 7rem;
    z-index: 1000;
    border: 5em;
    cursor: pointer;
    outline:#000000 solid 2px;
    outline: none;
    font-size: 16px;
    -webkit-transform: translate(0);
    transform: translate(0);
    background-image: linear-gradient(60deg, #7a2d7f, #b06ab3);
    box-shadow: 1px 1px 10px rgba(5, 4, 4, 0.438);
    -webkit-transition: box-shadow 0.25s;
    transition: box-shadow 0.25s;
    font-family: 'Share Tech Mono', monospace;
    border-radius: 65px;
    padding: 9px;
    text-align: center;
    height: 2rem;
    color: #fbb5fa;
    background-color: #7f4eaa;
}

#btn0:hover {
    background-image: linear-gradient(60deg, #080309, #924693);
    box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1);
    color: aliceblue;
}

#btn1 {
    cursor: pointer;
    max-width: 100%;
    width: 7rem;
    z-index: 100;
    border: 5em;
    outline:#000000 solid 2px;
    font-size: 16px;
    -webkit-transform: translate(0);
    transform: translate(0);
    background-image: linear-gradient(60deg, #cb78de, #43073f);
    box-shadow: 1px 1px 10px rgba(5, 4, 4, 0.438);
    -webkit-transition: box-shadow 0.25s;
    transition: box-shadow 0.25s;
    font-family: 'Share Tech Mono', monospace;
    padding: 9px;
    text-align: center;
    height: 2rem;
    color: #000000;
    background-color: #7f4eaa;
}

#btn1:hover {
    background-image: linear-gradient(60deg, #080309, #d463eb);
    box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1);
    color: aliceblue;
}

.scorestyle {
    z-index: 10000;
}

#score {
    width: 7rem;
    position: absolute;
    top: 20px;
    left: 20px;
    border-radius: 3px;
    font-size: 2rem;
    z-index: 1000;
    color: rgb(20, 63, 24);
    background-color: rgb(71, 177, 44);
    z-index: 9999;
    font-family: 'Share Tech Mono', monospace;

}

.inst  {
    right: 1rem;
    top: 1rem;
    position: absolute;
    z-index: 9900;
    text-align: center;
}
  .about {
    position: absolute;
  color: wheat;
    right: 7rem;
    top: 1.2rem;
    z-index: 9900;
    text-align: center;
    background-color:rgb(68, 11, 11);;
    padding: 1rem;
    border-radius: 10px;
}


#about {
  border-radius: 10px;
  margin-top: 4rem;
  z-index: 1199;
  right: 0;
  position: absolute;
  padding: 2rem;
  width: 28rem;
  line-height: 1.6;
  color:  rgb(145, 26, 26);
  background-color: #000000;
}


#show {
    z-index: 800;
    position: absolute;
    right: 0;
    width: 500px;
    height: 450px;
    background-color: rgb(0, 0, 0);
    display: none;
    border-radius: 2rem;
    -webkit-filter: drop-shadow(2px 2px 2px #222);
    filter: drop-shadow(5px 5px 5px rgb(81, 8, 8));
    padding-right: .4rem;  

}

#show h1 {
    padding-top: 1rem;
    padding-left: 2rem;
    color: white;
}

span {
  color:  rgb(71, 177, 44);
}

li {
    color:  rgb(145, 26, 26);
    font-family: 'Share Tech Mono', monospace;
    padding-bottom: -1rem;
    padding-top: 3rem;
    padding-left: 2rem;
    font-size: 1.5rem;
    padding-right: 2rem;
}

#btn2:hover {
    background-image: linear-gradient(60deg, #030203, #d1737a);
    box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1);
    color: aliceblue;
}

#btn2 {
    cursor: pointer;
    max-width: 100%;
    width: 4rem;
    z-index: 1000;
    border: 5em;
    border-radius: 3rem;
    cursor: pointer;
    outline:#000000 solid 2px;
    font-size: 49px;
    -webkit-transform: translate(0);
    transform: translate(0);
    background-image: linear-gradient(60deg, #000000, #c52222);
    box-shadow: 1px 1px 10px rgba(5, 4, 4, 0.438);
    -webkit-transition: box-shadow 0.25s;
    transition: box-shadow 0.25s;
    font-family: 'Share Tech Mono', monospace;
    padding: 9px;
    text-align: center;
    height: 4rem;
    color: #000000;
    background-color: #7f4eaa;
}



.start {

    width: 30%;
    bottom: 3.5rem;
    position:fixed;
    z-index: 1000;
}
#btn3:hover {
    background-image: linear-gradient(60deg, #030203, #d1737a);
    box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1);
    color: aliceblue;
}

#btn3 {
    cursor: pointer;
    max-width: 100%;
    width: 30rem;
    z-index: 1000;
    border: 5em;
    border-radius: 3rem;
    cursor: pointer;
    outline:#000000 solid 2px;
    font-size: 49px;
    -webkit-transform: translate(0);
    transform: translate(0);
    background-image: linear-gradient(60deg, #000000, #c52222);
    box-shadow: 1px 1px 10px rgba(5, 4, 4, 0.438);
    -webkit-transition: box-shadow 0.25s;
    transition: box-shadow 0.25s;
    font-family: 'Share Tech Mono', monospace;
    padding: 9px;
    text-align: center;
    height: 4rem;
    color: #000000;
    background-color: #7f4eaa;
}

.boardLeft {
    max-width: 100%;
    position: absolute;
    top: 6rem;
    right: 1.2rem;
    width: 1920px;
    padding-left: 4rem;
}

.boardLeft img {
    width: 12%;
    margin: .3rem;
    height: 7rem;
    box-shadow: inset 0 0 19px 9px #669d47;
}


.board {
    width: 100%;    
    height: 30px;
    position: absolute;
    top: 0;
}


.black {
  top: 0;
  position: absolute;
  width: 1920px;
  height: 997px;
  background-color: #390505;
  z-index: 9999;
  margin: auto;
}

#winningScreen {
  top: 0;
  position: absolute;
  width: 1920px;
  height: 997px;
  background-color: #390505;
  z-index: 9999;
  margin: auto;
}
a {
  top: 20rem;
  left: 20rem;
  position: absolute;
  padding: 2rem;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  text-decoration:none;
  font-family: 'Share Tech Mono', monospace;
  color: wheat;
}

.help {
  position: absolute;
  left: 20rem;
  top: 17rem;
}

.makeit {
  left: 4rem;
  position: absolute;
  top: 13rem;

}


.eve3 img{
  position: absolute;
  bottom: 0px;
  right: 20rem;
  width: 80%;
}
.flatline img{
  position: absolute;
  bottom: 0px;
  right: 20rem;
  width: 80%;
}

        #refreshButton {
          position: absolute;
          top: 18.6rem;
          font-family: 'Share Tech Mono', monospace;
          padding: 15px 30px;
          background-color: rgb(90, 13, 13); 
          color: #fff; 
          opacity: .6;
          left: 4rem;
          border: none;
          border-radius: 5px;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s ease;
      }

      #refreshButton:hover {
          background-color: #555; 
        }










.cls-1 {
    clip-path: url(#clippath);
  }

  .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
    fill: none;
  }

  .cls-2, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18, .cls-19, .cls-20, .cls-21, .cls-22, .cls-23, .cls-24, .cls-25, .cls-26, .cls-27, .cls-28, .cls-29, .cls-30, .cls-31, .cls-32, .cls-33, .cls-34, .cls-35, .cls-36, .cls-37, .cls-38, .cls-39, .cls-40 {
    stroke-width: 0px;
  }

  .cls-3 {
    stroke-width: .4px;
  }

  .cls-3, .cls-41, .cls-4, .cls-5, .cls-6 {
    stroke-miterlimit: 10;
  }

  .cls-3, .cls-5 {
    stroke: #3d7c90;
  }

  .cls-42, .cls-40 {
    fill: #67a1b4;
  }

  .cls-43, .cls-36 {
    fill: #7f4eaa;
  }

  .cls-44, .cls-34 {
    fill: #331212;
  }

  .cls-45, .cls-29 {
    fill: #aaa32c;
  }

  .cls-46, .cls-28 {
    fill: #bfe6ef;
  }

  .cls-47, .cls-14 {
    fill: #464684;
  }

  .cls-48 {
    fill: #3a661d;
  }

  .cls-49, .cls-9 {
    fill: #280303;
  }

  .cls-50 {
    clip-path: url(#clippath-1);
  }

  .cls-51 {
    clip-path: url(#clippath-4);
  }

  .cls-52 {
    clip-path: url(#clippath-3);
  }

  .cls-53 {
    clip-path: url(#clippath-7);
  }

  .cls-54 {
    clip-path: url(#clippath-8);
  }

  .cls-55 {
    clip-path: url(#clippath-6);
  }

  .cls-56 {
    clip-path: url(#clippath-5);
  }

  .cls-57 {
    clip-path: url(#clippath-9);
  }

  .cls-58 {
    clip-path: url(#clippath-10);
  }

  .cls-41 {
    stroke: #e26fdf;
  }

  .cls-41, .cls-31 {
    fill: #ac4eaa;
  }

  .cls-4 {
    stroke: #3f3fed;
  }

  .cls-6 {
    stroke: #2c4eaa;
  }

  .cls-8 {
    fill: #f2f2f2;
  }

  .cls-10 {
    fill: #282828;
  }

  .cls-11 {
    fill: #2c4eaa;
  }

  .cls-12 {
    fill: #595959;
  }

  .cls-13 {
    fill: #6d6d6d;
  }

  .cls-15 {
    fill: #262626;
  }

  .cls-16 {
    fill: #397d90;
  }

  .cls-17 {
    fill: #2e6829;
  }

  .cls-18 {
    fill: #3d7c90;
  }

  .cls-19 {
    fill: #0b6175;
  }

  .cls-20 {
    fill: #3f3fed;
  }

  .cls-21 {
    fill: #444;
  }

  .cls-22 {
    fill: #1e0202;
  }

  .cls-23 {
    fill: #101010;
  }

  .cls-24 {
    fill: #3f7e91;
  }

  .cls-25 {
    fill: #225103;
  }

  .cls-26 {
    fill: #243005;
  }

  .cls-27 {
    fill: #cbbf02;
  }

  .cls-30 {
    fill: #ab2c2c;
  }

  .cls-32 {
    fill: #8c0000;
  }

  .cls-33 {
    fill: #330808;
  }

  .cls-35 {
    fill: #969696;
  }

  .cls-37 {
    fill: #fff;
  }

  .cls-38 {
    fill: #e5df95;
  }

  .cls-39 {
    fill: red;
  }