body {
  text-align: center;
  background-color: #333;
  color: #fff;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.circle_cover {
  text-align: center;
}

.simon_says {
  font-family: 'Exo 2', sans-serif;
  color: white;
  font-size: 2em;
  font-weight: normal;
  font-style: normal;
}

#s {
  font-family: 'Exo 2', sans-serif;
  font-size: 2em;
  font-weight: normal;
  font-style: normal;
  color: red;
  /*
  border: 1px solid;
  border-color: black;
padding: 1px;
  box-shadow: 2px 2px;
  border-radius:1px
  */
}

#i {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  font-style: normal;
  color: yellow;
  text-decoration-color: white;
}

.i {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  font-style: normal;
  color: yellow;
  text-decoration-color: white;
}

.iInsane {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  font-style: normal;
  color: white;
  border: 1.5px solid;
  border-color: white;
  padding: 1px;
  box-shadow: 2px 2px 10px red;
}
#insanePeriod4i {
  position: absolute;
  top: 61px;
  left:109px;
  background-color:red;
  color:red;
  cursor: pointer;
}
.nInsane {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.2em;
  vertical-align: bottom;
  font-weight: normal;
  font-style: normal;
  color: yellow;
  padding: 1px;
}

#m {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  font-style: normal;
  color: green;
  text-decoration-color: white;
}

#n {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.2em;
  font-weight: normal;
  font-style: normal;
  color: #3333ff;
  text-decoration-color: white;
}

#y {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  font-style: normal;
  color: #339900;
  text-decoration-color: white;
}

#s_says {
  font-family: 'Exo 2', sans-serif;
  color: white;
  font-size: 1.7em;
  font-weight: normal;
  font-style: normal;
  color: red;
  box-shadow:
}

#s_end {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  font-style: normal;
  color: yellow;
  text-decoration-color: white;
}

#level-title {
  font-family: 'Exo 2', sans-serif;
  font-size: 3rem;
  margin: 5%;
  color: #FEF2BF;
}

.level_text {
  color: #f3c623;
  font-family: 'Orbitron', sans-serif;
  font-size: 1em;
  font-weight:600;
  text-align: center;
  font-size: 1.8rem;
  margin: 1%;

}

.level_colon {
  color: #ff0000;
  font-size: 1em;
}

h2 {
  font-family: 'Exo 1.5', sans-serif;
  color: white;
  font-size: 1.2em;
  font-weight: normal;
  font-style: normal;
}

h3 {
  font-family: 'Exo 1.5', sans-serif;
  color: white;
  font-size: .8em;
  font-weight: normal;
  font-style: normal;
}

h4 {
  font-family: 'Exo 2', sans-serif;
  color: white;
  font-size: 1.8em;
  font-weight: normal;
  font-style: normal;
}

ul {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
  padding: 3px;
}

.wrapper {
  position: relative;
  width: 640px;
  margin: 0 auto;
}

.back {
  position: absolute;
  top: 170px;
  width: 640px;
  height: 640px;
  z-index: 0;
  background-color: #000;
  border-radius: 310px;
}

.pad {
  width: 300px;
  height: 300px;
  float: left;
  z-index: 1;
  margin: 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
  cursor: pointer;
}

/* @keyframes blinkingBG {
  0% {
    background-color: #10c018;
  }

  25% {
        background-color: yellow;
  }

  50% {
    background-color: #1056c0;
  }

  75% {
    background-color: yellow;
  }

  100% {
    background-color: #ef0a1a;
  }
} */

/* @keyframes blinkingBG {
  0% {
    background-color: yellow;
  }
  100% {
    background-color: #ef0a1a;
  }
} */
.pressed {
  animation: blinkingBG 4s infinite;
  box-shadow: 0 0 20px white;
  background-color: grey;
  box-shadow: 0 0 0 1px #333333 inset, 2px 2px 2px 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 3px rgba(0, 0, 0, 0.4);
  background-color: red;
  transform: translateY(7px);
}

.pressed_wrong_animation {
  /* box-shadow: 0 0 20px white; */
  background-color: red;
  /* box-shadow: 0 0 0 1px #333333 inset, 2px 2px 2px 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 3px rgba(0, 0, 0, 0.4); */
  /* background-color: red; */
  /* transform: translateY(10px); */
}

.shape1 {
  border-top-left-radius: 300px;
  background-color: #339900;
  /*green*/
}

.shape2 {
  float: left;
  border-top-right-radius: 300px;
  background-color: red;
  /*red*/
  clear: right;
}

.shape3 {
  float: left;
  border-bottom-left-radius: 300px;
  background-color: yellow;
  /*yellow*/
  clear: left;
}

.shape4 {
  float: left;
  border-bottom-right-radius: 300px;
  background-color: #3333ff;
  /*blue*/
}

.circle {
  position: absolute;
  top: 195px;
  left: 195px;
  width: 250px;
  height: 250px;
  background: #000;
  border-radius: 125px;
  z-index: 10;
}

.level, .score {
  width: 50%;
  float: left;
  text-align: center;
}

/*Start of: Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400&display=swap');
@import url('fonts/family=CHECKBK0:wght@400&display=swap');
@import url('fonts/family=Data:wght@400&display=swap');
@import url('fonts/family=datalatin:wght@400&display=swap');

.difficulty_levels {
  position: relative;
  top: 0px;
  left: 0px;
  width: 250px;
  height: 150px;
  background: grey;
  border-radius: 100px;
  z-index: 11;
  padding: 2px;
  margin: 2px;
}

#on_off {
  position: relative;
  top: -6px;
  left: 1.5px;
}

#insane {
  position: relative;
  top: -11px;
  left: 0px;
  font-family: 'Exo 2', sans-serif;
  color: white;
  font-size: 1.2em;
  font-weight: normal;
  font-style: normal;
}

.insanity {
  position: relative;
  top: -32px;
  left: 11px;
}

.difficulty_text {
  font-family: 'datalatin', sans-serif;
  color: white;
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
}

#sButtonPlacement {
  text-align: center;
  position: absolute;
  top: 155px;
  left: 60px;
  width: 30px;
  height: 30px;
  z-index: 11;
  padding: 2px;
  margin: 2px;
  border: 4px;
  cursor: grab;
}

/*End of: Fonts*/
.start {
  width: 20%;
  margin: 0 auto;
}

#japaneseloveicon {
  position: relative;
  top: 0px;
  left: -5;
}

#btn_start {
  z-index: 12;
  position: relative;
  background-color: grey;
  font-weight: 500;
  width: 120px;
  top: 0px;
  left: -5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  height: 40px;
  border-radius: 70px;
  border-color: #333333;
  cursor: grab;

}
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: black;
  /* background-color: #4CAF50; */
  background-image: url('../images/carbonfiber2small.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  /* background-color: #3e8e41; */
  background-image: url('../images/carbonfiber2small.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#btn_start_mid_toggle {
  z-index: 13;
  position: relative;
  /* background-color: #2196F3; */
  background-image: url('../images/carbonfiber2small.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  border-color: black;
  border: 2px solid;
  border-radius: 70px;
  font-weight: 500;
  width: 140px;
  top: 2px;
  left: -6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  height: 40px;
  cursor: grab;
}

#btn_start:hover {
  background-color: #53a005;
  /*rgb(139, 1, 194)*/
}

#btn_start_mid_toggle:hover {
  background-color: #53a005;
  /*rgb(139, 1, 194)*/
}

.game-over {
  background-color: red;
  opacity: 0.8;
}

#game_over_Message {
 font-family: 'Orbitron', sans-serif;
  opacity: 0.8;
  position: fixed;
  bottom: 34px;
  left: 43%;
  text-align: center;
  color: white;

}

/*Start of: Slider Control*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

#Options {
  display: none;
  border-color: rgb(139, 1, 194);
  /*
   border: 3px dotted rgb(139, 1, 194);
   border-style: dotted;
   */
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*End of:Slider Controls*/
#status {
  color: red;
}

#currentTime {
  font-family: 'Orbitron', sans-serif;
  position: absolute;
  bottom: 24px;
  left: 210px;
  color: red;
  font-size: 1em;
  font-weight: 500;
  /* text-shadow:2px 2px white */
}

.bgMusic {
font-family: 'Orbitron', sans-serif;
  position: absolute;
  bottom: 0px;
  left: 0px;
  visibility: visible;
}

/* game_music and bgMusic2 go together */
#game_music2 {
   color: #f3c623;
  font-family: 'Orbitron', sans-serif;
  font-size: 1em;
  font-weight:600;
  text-align: center;
  box-shadow: 0 0 20px 0 black;
}

.bgMusic2 {
  position: fixed;
  bottom: 0px;
  right: 24%;
  color: yellow;
  font-weight: 500;
  z-index: 100;
}

#soundinfo {
font-family: 'Orbitron', sans-serif;
}
#music_note {
font-family: 'Orbitron', sans-serif;
}

#duration {
font-family: 'Exo 2', sans-serif;
font-weight:600;
font-size:1.2em;
color:#339900;
}

#source {
font-family: 'Exo 2', sans-serif;
font-weight:500;
font-size:1.1em;
color:red;
text-shadow:none;
}

#SoundInfo {
font-family: 'Orbitron', sans-serif;
color:#3333ff;
font-weight:700;
}

#audio-element {
  height: 77px;
  width: 400px;
  background: #444;
  box-shadow: 0 0 20px 0 black;
  font-family: arial;
  color: black;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
  bottom: 0px;
  right: 0%;
}
#play {
  font-family: 'Exo 2', sans-serif;
  color:red;
  background-color:#848484;
  border-style: inset;
  cursor: pointer;
}
#pause {
font-family: 'Exo 2', sans-serif;
  color:white;
  background-color:#848484;
  border-style: inset;
  cursor: pointer;
}

#restart {
font-family: 'Exo 2', sans-serif;
  color:#2196F3;
  background-color:#848484;
  border-style: inset;
  cursor: pointer;

}
.audio_spectrum {
  position: absolute;
  bottom: 0px;
  right: 0%;
  z-index: 1;
  height: 66px;
}

.bgMusic2Slider {
  position: absolute;
  bottom: 40px;
  right: 10px;
  z-index: 110;
}