* {
  box-sizing: border-box;
}


/* font downloaded from dafont.com originally called Arcade Classic and posted by the user Glitch: https://www.dafont.com/arcade-classic.font */
@font-face {
  font-family: pixelGlitch;
  src: url(fonts/arcadeGlitch.ttf);
}

/* font downloaded from dafont.com originally called Our Arcade Games and posted by the user Font Bureau: https://www.dafont.com/our-arcade-games.font */
@font-face {
  font-family: pixel;
  src: url(fonts/arcade.TTF);
}

@font-face {
  font-family: basic;
  src: url(fonts/PAPL_.ttf);
}

h1{
  margin-top: 1pt;
  margin-bottom: 1pt;
}

header {
  text-align: center;
  color: #85DC88;
  font-size: 30px;
  margin-top: 10pt;
  margin-bottom: 0pt;

}

/* tagline for mobile*/
#intro {
  background-color: lightgray;
  font-size: 18px;
  color: black;
  margin-top: 8px;
  vertical-align: middle;
    text-align: center;
  font-family: basic;
  width: 98%;
  padding: 10px;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 10px;
  border: 2px dashed gray;
}

#souptro {
  background-color: black;
  font-size: 25px;
  color: lightgray;
  margin-top: 5px;
  vertical-align: middle;
    text-align: center;
  font-family: pixel;
  width: 58%;
  padding: 5px;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 10px;
  border: 2px dashed gray;
  border-radius: 25px;
}

#moreSoup {
  background-color: black;
  cursor: pointer;
  font-size: 25px;
  color: lightgray;
  margin-top: 5px;
  vertical-align: middle;
    text-align: center;
  font-family: pixel;
  width: 12%;
  padding: 5px;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 10px;
  border: 2px dashed gray;
  border-radius: 25px;
}
 
#introSimple {
  background-color: lightgray;
  font-size: 38px;
  color: black;
  margin-top: 8px;
  vertical-align: middle;
    text-align: center;
  font-family: pixel;
  width: 98%;
  padding: 10px;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 10px;
  border: 2px dashed gray;
}
#bodySimple {

  font-family: basic;
}

#linkBod{
  background-image: url("images/indexBack.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: pixel;

}

#linkButton {

  cursor: pointer;

  border-radius: 20px;
  border: 2px solid pink;
  font-family: pixel;
  font-weight: bolder;
  padding: 10px;
  margin-top: 10pt;
  margin-bottom: 5pt;
  font-size: 20pt;
  background: linear-gradient(45deg, rgba(255,150,255,1) 0%, rgba(255,94,130,0.37557603686635943) 100%);
}

#rcorner {
  border-radius: 25px;
  border: 2px solid pink;
    padding: 20px;
    background: linear-gradient(45deg, rgb(85, 17, 85) 0%, rgba(255,94,130,0.5) 100%);
  }
  
  #pageTitle {
    cursor: pointer;

    border-radius: 25px;
    margin-top: 15pt;
    border: 2px solid pink;
    text-align: center;
    color: #85DC88;
    font-family: pixel;
      padding: 15px;
      font-size: 40pt;
      background: linear-gradient(45deg, rgb(85, 17, 85) 0%, rgba(255,94,130,0.5) 100%);
    }

    #embedCode {
      margin: auto;
      justify-content: center;
      align-content: center;

      }

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 15px;
  margin-top: 0pt;
}


.columnH img {
  -ms-flex: 50%;
  flex: 50%;
  max-width: 50%;
}


.columnP img {
  margin-top: 0px;
  vertical-align: middle;
  width: 100%;
  padding: 15px;
}

.columnV img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
  padding: 5pt;
}

.column1 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  padding: 15px;
  -ms-flex: 100%;
  flex: 100%;
  max-width: 100%;
}

.columnL img {
  margin-top: 15px;
  vertical-align: middle;
  width: 100%;
  padding: 5px;
  -ms-flex: 100%;
  flex: 100%;
  max-width: 100%;
}

.box {
  background-color: lightblue;
  margin-top: 15px;
  align-content: center;
  justify-content: center;
  font-family: basic;
  margin: auto;
  width: 99%;
  padding: 35px;
  border-width: 2px;
  border-color: purple;
  border: dashed;
}

.boxL {
  background-color: lightblue;
  margin-top: 15px;
  align-content: center;
  justify-content: center;
  font-family: basic;
  margin: auto;
  width: 99%;
  padding: 5px;
  border-width: 2px;
  border-color: purple;
  border: dashed;
}

.codeBox {
  background-color: lightblue;
  margin-top: 15px;
  align-content: center;
  margin-bottom: 10pt;
  font-family: basic;
  margin: auto;
  border-width: 2px;
  border-color: purple;
  border: dashed;
}

#boxTitle {
font-size: 17pt;
font-weight: bolder;
text-align: center;
}

#embedBox {
  background-color: transparent;
  margin-top: 30px;
  align-content: center;
  margin: auto;
  width: 98%;
  margin-bottom: 20px;

}

#embed {
  background-color: transparent;
  margin-top: 15px;
  align-content: center;
  margin: auto;
  width: 100%;
  padding: 0px;
  border-width: 1px;
  border-radius: 25px;
  color: white;
  border: solid;
}



.symbols {
  background-color: trans;
  margin-top: 2px;
  margin-left: 15%;
  vertical-align: center;
  max-width: 75%;
  padding: 15px;
  border-width: 5px;
  border-color: purple;
  border: dotted;
  align-content: center;

}

.about {
  background-color: lightblue;
  margin-top: 8px;
  vertical-align: middle;
  font-family: basic;
  width: 98%;
  padding: 25px;
  margin-top: 18px;
  margin-left: 8px;
  margin-right: 8px;
  border-width: 5px;
  border-color: purple;
  border: dashed;
  border-radius: 15px 50px;

}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (min-width: 800px) {
  .columnP {
    -ms-flex: 33%;
    flex: 33%;
    max-width: 33%;
  }

  .columnV {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }

  .vids{
    height:644px
    }


    .topMenu {
      display: none;
    }

    .codeBox{
      width: 95%;
      padding: 20pt;
    }


}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .columnP {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }

  .codeBox{
    width: 99%;
    padding: 2pt;
  }

  .columnV {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }

  .vids{
    height:240px;
    }

  .dropdown {
    display: none;
  }

  .dropbtn {
    display: none;
  }

  .dropdown-content {
    display: none;
  }
}



#all{
  font-family: pixel;
  font-size: 18px;
  margin-top: 1px;

}

#textStatus{
  font-family: basic;
  font-size: 18px;
}

#when{
  font-family: basic;
  font-size: 18px;
}

#weekd{
  font-family: basic;
  font-size: 18px;
}


body{
  cursor: url('rainbow.cur'),default;

  font-family: basic;
  font-size: 16px;
  margin: 0;

}


a:link {
 color: rgb(0, 4, 255);
}

a:visited {
 color: green;
}
a:hover {
 color: red;
}

a:active {
  color: slateblue;
}


.img{
  display: block;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}



.vids{
  display: block;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  margin-top: 1pt;
}

/* top menu for mobile*/
.topMenu {
  cursor: pointer;

  background-color:#9D4078;
  margin-top: 0pt;
  vertical-align: middle;
  width: 98%;
  padding: 10pt;
  margin: auto;
  border: 4pt dashed gray;

}

.topMenuItems {
  vertical-align: middle;
  color: #722463;
  font-size: 17px;
  border: 1px solid pink;
  padding: 5px;
  margin-left: 4pt;
  margin-right: 4pt;
  border-radius: 10pt;
  background-color: #85DC88;
  width: 20%;
  font-family: pixel;
}


/* dropdown menu code adapted from W3*/
.dropbtn {
  cursor: pointer;

  color: black;
  font-size: 16px;
  border-radius: 25px;
  border: 2px solid pink;
  padding: 15px;
  background: linear-gradient(45deg, rgba(255,150,255,1) 0%, rgba(255,94,130,0.37557603686635943) 100%);
  position: absolute;
  right: 7%;

}

.dropdown {
  display: inline-block;
  position: absolute;
  right: 8%;
  top: 65px;
  vertical-align: middle;
}

.dropdown-content {
  cursor: pointer;

  display: none;
  background-color: #85DC88;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-top: 56pt;
  margin-right: -20px;
  vertical-align: middle;
  border-radius: 25pt;
  font-size: 20px

}

.dropdown-content a {
  color: #722463;
  background-color: #85DC88;
  padding: 12px 16px;
  text-decoration: none;
  font-family: pixel;
  display: block;
  font-size: 18pt;
  border-radius: 25pt;


}

#image{
position:absolute;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}


footer{
  background-color: lightgray;
  border-radius: 25px;
  border: 1px solid gray;
  padding: 20px;
  padding: 10px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

#textStatus{
  font-family: basic;
}

#textSize{
  font-family: basic;
}

#currentText{
  font-family: basic;
}


#when{
  font-family: basic;
  font-size: 18px;
}

#weekd{
  font-family: basic;
  font-size: 18px;
}

#soup{
  background: radial-gradient(circle, rgba(99,89,212,1) 0%, rgba(131,9,178,1) 72%, rgba(187,12,122,1) 100%); 
}