/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.cdnfonts.com/css/ladylike-bb');

@import url('https://fonts.cdnfonts.com/css/cracksmoon');

@import url('https://fonts.cdnfonts.com/css/edu-tas-beginner');

@import url('https://fonts.cdnfonts.com/css/kid-marker');

@import url('https://fonts.cdnfonts.com/css/loveler');



body {
  background-color: white;
  color: black;
  font-family: Arial;
  font-size: 13pt;
  position: relative;
  height: 100%;
}

h1 {
  font-family: 'Edu TAS Beginner', sans-serif;
  font-size: 17pt;
  font-weight: 200;
}


/* POPUP START */

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
}

/* The actual popup (appears on top) */
.popuptext {
  visibility: hidden;
  width: 300px;
  font-size: 11pt;
  background-color: rgba(255,255,255, 1);
  color: #222;
  text-align: center;
  border-radius: 3px;
  padding: 0 0 5px 0;
  position: absolute;
  z-index: 1;
  top: calc(100% + 19px);
  left: -37%;
  line-height: 20px;
  border-width: 1px;
  border-color: #222;
  border-style: solid;
}

/* Popup arrow */
.popuptext::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #222 transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
}

.popupheader {
  font-size: 16px;
  background: transparent;
  width: 300px;
  padding: 4px 0;
  line-height: 27px;
  border-radius: 2px 2px 0 0;
  color: #222;
}

.popupcontent {
  width: 280px;
  margin: auto;
  text-align: justify;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Add animation (fade out the popup) */
@-webkit-keyframes fadeOut {
  from {opacity: 1;} 
  to {opacity: 0;}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

/* POPUP END */


/* The side navigation menu */
.sidenav {
  position: fixed;
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #fff;
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: auto;
  padding-top: 0; /* Place content 0px from the top */
  transition: 1s; /* 1 second transition effect to slide in the sidenav */
}

/* The navigation menu text */
.sidenav p {
  padding: 8px 8px 0 8px;
  text-decoration: none;
  font-size: 16px;
  color: #f0f0f0;
  display: block;
  transition: 0.3s;
  text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
}

/* The navigation menu links */
.sidenav a {
  max-width: 100px;
  margin-top: 0;
  margin-bottom: 8px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block;
  transition: 0.3s;
  text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  padding-top: 8px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px 20px 20px 20px;
  width: 95%;
  margin: 0 auto;
}

#onclick1 {
  font-size: 17px;
  color: #7CA6C0!important;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media (max-width: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  #main {max-width: 300px; overflow-y:scroll; overflow-x:hidden; margin: auto; align-content: center; font-size: 18px;}
  #Progress_Status {max-width: 270px; margin: 0 auto; font-family: 'IBM Plex Mono';}
  button {max-width: 270px; margin: inherit auto 0 auto;}
}

.hundido:before {
   content: "hundido";
   background-image: url('https://i.postimg.cc/w68GbqQN/skz-banner.jpg');
   background-size: 300px;
   background-repeat: repeat-x;
   background-position: top;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 30pt;
   margin-left: -3px;
   line-height: 100%;
   color: black;
   font-family: 'loveler', sans-serif;
   font-weight: normal;
}

#pop {
-webkit-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}