* {
    padding : 0;
    margin : 0;
}

.main {
	text-align: center ;
}

input ,button{
    font-family: Magneto ;
    background-color: blue ;
    color: white ;
    font-size: 20px ;
    padding: 15px 32px ;
    text-align: center ;
    border-radius: 50px ;
    position: relative ;
    border-color: black ;
    cursor: pointer ;
}

a{
    text-decoration: none ;
    color : white ;
}
.btn1 {
    bottom: 450px ;
    left: 36% ;
}

.btn2 {
    bottom: 320px ;
    left: 8% ;
}

.btn3 {
    bottom: 320px ;
    left: 102% ;
}
.btn4 {
    bottom: 450px ;
    left: 72% ;
}

.btn5{
   bottom: 110px ;
   left: 3.5% ;
}


.num {
    color:orangered;
	font-size:80px;
	letter-spacing:4px;
    position: absolute ;
    top: 271px ; 
    left: 39% ;
}

sup {
    position: absolute;
    bottom: 100px;
    left: 15%;
    font-size: 100px;
    letter-spacing: 20px;
} 

.btncontainer {
	position: absolute;
	text-align: center;
}

@media only screen and (max-width: 425px){
	input ,button{
	height:10px;
	width:10px;
	font-size: 6px ;
	padding: 10px 25px 15px 10px ;
	border-radius: 20px ;
	}
	.btn1 {
	bottom: 200px ;
	left: 10px ;
	}
	
	.btn2 {
	bottom: 100px ;
	left: 0px ;
	}
	
	.btn3 {
	bottom: 100px ;
	left: 180px ;
	padding: 10px 25px 15px 6px;
	}
	.btn4 {
	bottom: 200px ;
	left: 180px ;
	padding: 10px 30px 15px 6px;
	}
	
	.btn5{
	bottom: 50px ;
	right: 20px ;
    padding: 5px 30px 20px 10px;
	}
	.num {
	font-size:30px;
	margin: 0 auto;
	margin-top: 5px;
	letter-spacing:1px;
	top: 70px ;
	left : 120px ;
	}
	
	sup {
	
	bottom: 40px ;
	left: 35px ;
	font-size: 20px ;
	} 
canvas{
 width:355px;
}
}