@import url('//fonts.cdnfonts.com/css/grobold');

body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at 0 0, #fff691, #fff25C);
    color: #60D8FF;
    font-family: 'GROBOLD', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column; 
    cursor: pointer;
  }
  

h1{
    font-size: 100px;
    text-shadow: 6px 7px 7px rgb(144, 143, 143);
    position: relative;
    animation: mymove 1s;
    animation-timing-function: ease-in-out;
  }
  @keyframes mymove {
    from {top: -200px;}
    to {top: 0px;}
  }
.questions {
    display: flex;
    flex-direction: column;
    background: #f5f7f8;
    width: 830px;
    height: 180px;
    font-size: 80px;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FF63BB;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    text-shadow: 3px 4px 4px rgb(144, 143, 143);  
     
  }

.funboy{
display: flex;
flex-direction: row;
justify-content: right;
text-align: right;
width: 100%;  
font-size: 100px;  
}
.answers-flex{
 display: flex;
 font-size: 100px;
 width: 150px;
 height: 150px;
 color: #FF63BB;
 background-color: white;
 justify-content: center;
 justify-content: space-around;
 align-items: center;
 text-align: center;
 margin: 55px;
 border-radius: 20px;
 transition: transform 0.5s;
 text-shadow: 6px 7px 7px rgb(144, 143, 143);
} 
.answers-flex:hover {
 transform: scale(1.3);
  }
.answers{
 display: flex;
 flex-direction: row; 
}  

.false {
width: 100px;
height: 100px;
background-color: #FF9FD7;
color: white;
display: flex;
margin: 5px;
border-radius: 20px;
justify-content: space-evenly;
align-items: center;
text-align: center;
}
.correct {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color:#A5FF93;
    color: white;
    display: flex;
    border-radius: 20px;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    }
.checker{
display: flex;
justify-content: space-evenly;
font-size: 50px;
border-color: white;
margin: 5px;
border-radius: 20px;
align-items: center;
text-align: center;
border: 5px;
}
h3{
font-size: 50px;

}
.checkanswers{
    display: flex;
    justify-content: space-around;
}
.result {
    color:#60D8FF;
    font-size: 50px;
    text-shadow: 3px 4px 4px rgb(144, 143, 143);
}

@media screen and (max-width: 600px) {
    body {
      flex-direction: column;
      color: #FF63BB;
    }
  .false {
    display: none;
  }
  .correct {
    display: none;
    }
    h1{
        font-size: 75px;
        text-shadow: 3px 4px 4px rgb(144, 143, 143);
        animation: mymove 1s;
        animation-timing-function: ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        
      }
      @keyframes mymove {
        from {top: -200px;}
        to {top: 0px;}
      }

      .questions {
        display: flex;
        transition: transform 0.5s;
        background: #f5f7f8;
        width: 85%;
        height: 25%;
        font-size: 40px;
        align-items: center;
        text-align: center;
        color: #FF63BB;
        border-radius: 20px;
        padding: 5px;
        margin: 50px;
        text-shadow: 3px 4px 4px rgb(144, 143, 143);  
        
      }
      .funboy{
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        width: 100%;  
        font-size: 100px;  
        }
        .answers-flex{
            display: flex;
            flex-direction: row;
            font-size: 50px;
            width: 75px;
            height: 75px;
            text-shadow: 3px 4px 4px rgb(144, 143, 143);
          
           } 
           .result {
            color:#60D8FF;
            font-size: 40px;
            margin: 55px;
            text-shadow: 3px 4px 4px rgb(144, 143, 143);
        }
        
        .answers{
            justify-content:space-around; 
           } 


  }