/*html, body {
background: linear-gradient(320deg, rgba(195,34,34,1) 0%, rgba(93,45,253,1) 100%);
background-repeat: no-repeat;
background-attachment: fixed;
margin: auto;
max-width: 100%;      
height: 200px;
position: relative;
}

#info {
display: table;
margin: 0 auto; 
height: 1.2em;
width: 1.2em;
background-color: #0a3150;
color: white;;
border-radius: 50%;
border:1px solid black;
font-family: 'Hubballi', cursive;
font-size:50px;
}

*/

html, body {
background: linear-gradient(320deg, rgba(195,34,34,1) 0%, rgba(93,45,253,1) 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}

#counter {
font-weight: 300;
}

#info {
font-family: 'Hubballi', cursive;
position: absolute;
top: 4%;
right: 3%;
margin-top: 0;
height: 1.2em;
width: 1.2em;
background-color: #0a3150;
border: solid black 1px;
color: white;
border-radius: 50%;
font-size: 2vw;
}

#info:hover {
background-color: black;
cursor: pointer
}

#title, #counter {
font-family: 'Hubballi', cursive;
position: absolute;
left: 50%;
margin-top: 0;
}

#title {
font-size: 4vw;
transform: translate(-50%, -25%);
top: 20%;
}

#counter {
font-size: 8vw;
-webkit-transform: translate(-50%, -50%);
top: 40%;
}

@media only screen and (max-width: 600px) {

#info {
height: 2.5em;
width: 2.5em;
font-size: 3.2vw;
 }

#title {
font-size: 4.5vw;
top: 10%;
 }

#counter {
font-size: 8vw;
top:18%;
 }
}

@media only screen and (min-width: 600px) and (max-width: 1200px) {

#info {
height: 1.5em;
width: 1.5em;
font-size: 3.2vw;
 }

#title {
font-size: 4.5vw;
top: 10%;
 }

#counter {
font-size: 8vw;
top:20%;
 }
}