@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

html {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  height: inherit;
  width: inherit;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f7f7f7;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

#message_mission{
z-index:1000;
position:absolute;
top:12%;
left:30%;
color:#fff;
font-size:40px;
}



svg {
   z-index:2000;
   overflow:hidden;
   border:1px solid white;
   background:transparent;
}

/*Start of: Restart Button Effect */
.button {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
 letter-spacing:3px;
  color:#fff;
  flex: 1 1 auto;
  margin: 10px;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  opacity:0.5;
  transition: .3s;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  &:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: #f7f7f7; 
   opacity:1;
  }
}

.restart_container {
  position: absolute;
  bottom: 2%;
  left: 1%;
}
#restart_btn {
  position: absolute;
  z-index: 300;
  cursor: pointer;
  bottom: 2%;
 text-align:center;
  width: 100px;
 border:1px solid white;
}
#restart_btn:hover {
  filter: invert(50%);
  -webkit-filter: invert(50%);
-webkit-animation:appear 1s ease 0s 1 normal;
-moz-animation:appear 1s ease 0s 1 normal;
-ms-animation:appear 1s ease 0s 1 normal;
animation:appear 1s ease 0s 1 normal;
} 

/*End of: Restart Button Effect*/

#content {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

/* Start of: Music */

.music_toggle {
  position: absolute;
  bottom: 2%;
  right: 1%;
}

#music {
  position: absolute;
  z-index: 300;
  cursor: pointer;
  bottom: 2%;
  right: 2%;
  width: 100px;
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

#music:hover {
  filter: invert(50%);
  -webkit-filter: invert(50%);
}

/* End of: Music */

/*Start of: Animations*/
@-webkit-keyframes appear {
0%{ opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
60%{ opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}
@keyframes appear {
0%{ opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
60%{ opacity: 1; transform: scale3d(1,1,1); }
}

/*End of: Animations*/