@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,500i,600,600i,700,800,900&display=swap');

@font-face {
	font-family: main-font;
	src: url(../fonts/ElMessiri-Regular.ttf);
}


html,body{
  font-family: main-font , 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: aqua;
  background-size: cover;
}

*{
  text-align: right;
  color:white;
  background-color:#343433;
}
.button {
  background-color: #37AFCA; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  outline: none;
}


.button:hover {
  background-color:#8CC540;
  color: white;
  outline: none;
}


.container{
  /* border: red solid 2px; */
  display: flex;
  height: 100vh;
  flex-wrap: wrap;
  align-content: center;
 
}

.container h5{
margin-top:5%;
}

.container .button{
  margin-top:3%;
  }
  .radio-toolbar input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
  }
  .radio-toolbar label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 4px;
}
.radio-toolbar input[type="radio"]:checked + label {
  background-color:#bfb;
  border-color: #4c4;
}
.radio-toolbar input[type="radio"]:focus + label {
  border: 2px dashed #444;
}