html, body {
font-family: Roboto Condensed;
color:black;
font-weight: bold;
text-align: center;
}
h1 {
font-family: Roboto Condensed;
font-size:35px;
text-align:center;
color:white;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
}
.btn {
font-family: Roboto Condensed;
width: auto;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 4px 4px 4px;
border:none;
cursor: pointer;
background:transparent;
color:#fff;
box-shadow:0 10px 0 #4D0094;
border-radius: 10px;
transition: transform .2s;
font-weight: bold;
}
.btn:hover {
background:transparent;
box-shadow:0 10px 0 #6C0000;
color: #f00;
border-radius: 10px;
transition: transform .2s;
transform: scale(1.3);
font-weight: bold;
}

.btn-main {
background:transparent;
box-shadow:0 10px 0 #6C0000;
color: white;
border-radius: 10px;
font-weight: bold;
}
.btn-main:hover {
background:transparent;
box-shadow:0 10px 0 #4D0094;
color: #f00;
border-radius: 10px;
transition: transform .2s;
transform: scale(1.3);
font-weight: bold;
}
.icon {
    position: absolute;
    width: 130px;
    height: 130px;
    top: 13%;
    right: 1%;
} 
.msgs{
font-family: Roboto Condensed;
font-size:45px;
text-align:center;
color:#fff;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;

}
.icone{
    width: 60px;
    height: 60px;
}
.temp{
	font-size:20px;
	height:35px;
	width:auto;
	background-color:#4D0094;
	color:#fff;
	border:3px solid #6C0000;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
 .content {
  width:80%;
  height:15%;
  margin-left:7.5%;
  background:rgba(0,0,0,0.5);
  color:white;
  margin-top:1%;
  font-size:25px;
  text-align:center;
  border-radius:30px;
  padding:20px;
  line-height:12px;
 }
 .title {
  font-size:40px;
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-weight:bolder;
  margin-bottom:10px;
 }
 .yellow {
  color:yellow;
 }
 .hue {
  color:yellow;
  padding:10px;
  border-radius:10px;
  animation:hue 5s linear infinite;
  -webkit-animation: hue 5s linear infinite;
  box-shadow: 0px 0px 50px yellow;
  color:white;
  background:rgba(255,255,0,0.4);
 }
 .hue:hover{
  color:yellow;
  background:transparent;
 }
 @keyframes hue{
 0%{
 filter:hue-rotate(0deg);
 -webkit-filter:hue-rotate(0deg);
 }
 10%{
 box-shadow: 0px 1px 50px yellow;
 }
 20%{
 box-shadow: 1px 1px 50px yellow;
 }
 30%{
 box-shadow: 1px 0px 50px yellow;
 }
 40%{
  box-shadow: 1px -1px 50px yellow;
 }
 50%{
 box-shadow: 0px -1px 50px yellow;
 }
 60%{
 box-shadow: -1px -1px 50px yellow;
 }
 70%{
 box-shadow: -1px 0px 50px yellow;
 }
 80%{
 box-shadow: -1px 1px 50px yellow;
 }
 90%{
 box-shadow: 0px 1px 50px yellow;
 }
 100%{
 filter:hue-rotate(360deg);
 -webkit-filter:hue-rotate(360deg);
 }
 }
 .text {
  padding-bottom:50px;
 }
  .back {
   font-size:25px;
   margin-top:10px;
   display:block;
   line-height:55px;
   width:20%;
   text-decoration:none;
   height:50px;
   background:white;
   color:black;
   border-radius:15px;
  }
  .back:hover{
   border:2px solid white;
   background:transparent;
   box-sizing:border-box;
   color:white;
  }
 #psip {
  text-align: center;
  margin-left: 38%;
  margin-right: auto;
  width:15%;
  display:flex;
  position: absolute;
  
  background: rgba(0, 0, 0, 0.500);
  border-radius: 2em;
  border: none;
  padding: 0.8em;
  
  color: #ffffff;
  padding-left: 1.5em;
  
  outline: none;
  box-shadow: 0 4px 6px -5px hsl(0, 0%, 40%), inset 0px 4px 6px -5px hsl(0, 0%, 2%);
  backdrop-filter: blur(5px);
}
/* Modal Content */
.modal-content {
  font-family: BFARNAZ;
  font-size: 18px;
  position: relative;
  background-color: #dddddd;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}




#progress {
font-family: Roboto Condensed;
font-size:45px;
text-align:center;
color:#fff;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
}
.pointer {cursor: pointer;
}