* {
  overflow-x: hidden;
  padding: 0px !important;
  margin: 0px !important;
}

  body {
   width : 900px;
  }
  
	
	#mute {
		display: block;
 		position: fixed;
		left: initial;
  		right: 1%;
  		bottom: 1%;
  		width: 13vmin;
	}
#progressbar {
  background: linear-gradient(90deg, #FF0000 0%, #FF0000 76.56%, #111111 77.17%);
  width: 621px;
  height: 27px;
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top:20px;
}



    .container{
            display: flex;
      justify: center;
    }

#NextPer {
  position: fixed; /* or absolute */
  top: 78%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 60vmin;
  height: 37px;
  font-family: Nova Round;
  font-style: normal;
  font-weight: normal;
  font-size: 3vmin;
  line-height: 29px;
  text-align: center;
  color: #000000;
}

html {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(359deg, #ffa2a2, #ff5b5b);
    background-size: 400% 400%;

    -webkit-animation: smooth 8s ease infinite;
    -moz-animation: smooth 8s ease infinite;
    animation: smooth 8s ease infinite;
}

@-webkit-keyframes smooth {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes smooth {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes smooth {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}





#CurrPer{
  position: fixed; /* or absolute */
  top: 62.4%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 50%;
  height: 37px;
  font-family: Nova Round;
  font-style: normal;
  font-weight: normal;
  font-size: 3vmin;
  line-height: 29px;
  text-align: center;
  color: #000000;
}

::selection {
background: #ff4848b0; /* WebKit/Blink Browsers */
}

#date{
  position: absolute;
  width: 296px;
  height: 100px;
  top: 55px;
  display: block;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-family: Nova Round;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  color: #000000;
}

#fecha {
	font-size: 2vmin;
}

#fecha2 {
	font-size: 3.5vmin;
}
#timeleft{
  position: absolute;
  width: 296px;
  height: 100px;
  top: 55px;
  display: block;
  left: 60%;
  -webkit-transform: translateX(-60%);
  transform: translateX(-60%);
  font-family: Nova Round;
  font-style: normal;
  font-weight: normal;
  font-size: 2.5vmin;
  line-height: 29px;
  text-align: right;
  color: #000000;
}
#progress-text{
  position: absolute;
  width: 296px;
  height: 100px;
  top: 55px;
  display: block;
  left: 40%;
  -webkit-transform: translateX(-40%);
  transform: translateX(-40%);
  font-family: Nova Round;
  font-style: normal;
  font-weight: normal;
  font-size: 2.5vmin;
  line-height: 29px;
  text-align: left;
  color: #000000;
}
#ab-1 {
  position: fixed; /* or absolute */
  top: 75%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 296px;
  height: 37px;
  font-family: Nova Round;
  font-style: normal;
  font-weight: normal;
  font-size: 2vmin;
  text-align: center;
  color: #000000;
}


#TIME {
            overflow: visible;
            font-family: Nova Round;
            font-style: normal;
            font-weight: normal;
            font-size: 18vmin;
            text-align: center;
            color: #ffffff;
            text-shadow: 0.6vmin 5px 1px rgb(255 109 109);
            width: 90vmin;
  }

#WELP {
    position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

#WELP2 {
  position: fixed; /* or absolute */
  top: 70%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

#line1  {
  position: fixed; /* or absolute */
  top: 64.8vmin;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 10vmin;
  height: 0vmin;
  border: 1px solid #000000;
}

#line2 {
  position: fixed; /* or absolute */
  top: 80vmin;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 10vmin;
  height: 0vmin;
  border: 1px solid #000000;
}
#line3  {
  position: absolute;
  width: 99px;
  height: 0px;
  top: 87px;
  display: block;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 1px solid #000000;
}

#CurrTime {
  width: 50vmin;
  height: 9vh;
  font-family: Nova Round;
  font-style: normal;
  font-weight: normal;
  font-size: 2.5vmin;
  text-align: center;
  color: #000000;
  position: fixed; /* or absolute */
  top: 69.7%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

#NextTime {
  position: fixed; /* or absolute */
  top: 85%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 40vmin;
  height: 8vmin;
  font-family: Nova Round;
  font-style: normal;
  font-weight: normal;
  font-size: 2.4vmin;
  text-align: center;
  color: #000000;
}




.button {
                border: 0 solid black;
                background-color:rgb(178, 0, 0);
                color: rgb(255, 255, 255);
                padding: 5px 12px;
                border-radius: 1vmin;
                text-align: center;
                text-decoration: none;
                display: block;
                font-size: 16px;
                margin: 4px 2px;
                cursor: pointer;
                margin-left: auto;
                margin-right: auto;
                position: absolute;
            }
            .button:hover{
                box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            }
			 #m {
            font-family: verdana;
            display: block;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            top: 33%;
            font-size: 1vw;
            z-index: 1;
            width: 18vw;
            height: 3.5vh;
           }








/* Butttonnsss!! */
.btn-group {
	position:absolute;
	right: 5px;
}
.btn-group button {
  font-family: Nova Round;
  background-color: #B50000; 
  border: 2px solid white; 
  border-radius: 2px;
  color: white; 
  padding: 15px 28px; 
  cursor: pointer; 
  width: 150px; 
  height: 40px;
  display: block; 
  right: 1px;
}

.btn-group button:not(:last-child) {
  border-bottom: none; 
}


.btn-group button:hover {
  background-color: #990000;
}


.btn-group-2 {
	position:absolute;
	right: 5px;
	bottom: 5px;
}
.btn-group-2 button {
  font-family: Nova Round;
  background-color: #B50000;
  border: 0.3vmin solid white;
  border-radius: 0.3vmin;
  color: white;
  padding: 15px 28px;
  cursor: pointer;
  width: 20vmin;
  height: 4vmin;
  display: block;
  right: 1px;
  font-size: 2vmin;
}

.btn-group-2 button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}


.btn-group-2 button:hover {
  background-color: #990000;
}



a{
	text-decoration: none;
}

/* Dropdown Button */
.dropbtn {
  background-color: #8b0000;
  color: white;
  padding: 18px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 150px;
  height:30px;
  right:20px;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #8000007a;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: absolute;
  display: inline-block;
  height: 609px;
  width: 200px;
  right: 1px;
  top: 5px;
  overflow: visible;
  z-index: 400;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  left: -15%;
			-webkit-transform: translateX(15%);
      transform: translateX(15%);
      top: 45px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* yeeet */
#warning {
  font-family: Nova Round;
  color: white;
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 5px;
  font-size: 2vmin;
  width: 50%;
  text-align: center;
  z-index: 102;
}
img {
  display: block;
  position: absolute;
  left: 1%;
  bottom: 1%;
  width: 13vmin;
}
img.ohno {
  display: block;
  position: absolute;
  right: 1%;
  bottom: 25vmin;
  width: 30%;
}