body{
    height: 100vh;
    margin: 0px;
    font-family: DM sans;    
}

abbr {
  text-decoration: none;
}


#search-bar{
    position:fixed;
    display: flex;
    align-items: center;
    width:100%;
    background-color:#1F2605;
    top:13vh;
    height:10vh;
    z-index:2;
}


#quiz-container{
     padding-top: 25vh;
     padding-left: 2%;
     width:98%;
     display: grid;
     grid-template-columns: 22% 22% 22% 22%;
     column-gap: 3%;
     row-gap: 40px;

}
#create-btn{
    flex:1;
    max-width:100px;
    margin-left: 20px;
    height:3.2em;
    border-radius: 10px;
    cursor : pointer;
    color : white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 15px;
    font-weight: bold;
    background: linear-gradient(to bottom, #53900F, #D6CE15);
    color: #1F2605;
    border: none;
}
#create-btn:hover{
    transform: scale(1.1);
    transition: transform 0.5s;
}
#search-box{
    flex:3;
    max-width:300px;
    margin-left: 30%;
    height:40%;
    background: linear-gradient(to bottom, #53900F, #D6CE15); 
    color: black;
   
    border-radius: 50px;
    border: none;
    font-size: 22px;
}

::placeholder{
    color: black;
}
#search-box:focus{
    outline: none;
}
#topic-drop-down{
    flex:3;
    max-width:200px;
    height:40%;
    border-radius: 20px;
    margin-left: 10px;
    background: linear-gradient(to bottom, #53900F, #D6CE15);
    color: rgb(0, 0, 0);
    border-radius: 50px;
    border: none;
    font-size: 22px;;
}
#topic-drop-down:focus{
    outline: none;
}

.pop-up {
    display: inline-block;
    position: relative; 
    bottom: 10px;;       
    width: 30px;  
    left:25px;              
    height: 30px;    
    border: none;           
    background-color: transparent;    
}

select option{
    background-color: #1F2605;
    color:#D6CE15 ;
}
.pop-up img {
    max-width: 100%;            
    max-height: 100%;           
    object-fit: contain;      
}

.pop-up-div{
    position: absolute;
    display: none;
    top:10px;
    right:30px;
    height:60px;
    width:70px;
}

.pop-btns{
    width: 100%;
    height:30px;

    border-radius: 2px;
    border:1px solid #0f2a18 ;
    background-color:#1F2605;
    color: #D6CE15;
    font-weight: bold;
}


.quiz{
    position: relative;
    /* border: 2px solid; */
    border-radius: 30px;
    
    background: linear-gradient(to bottom, #53900F, #D6CE15);
    padding-left: 20px;
    color:#1F2605;
    padding-right: 10px;
    padding-top: 2%;
    /* height:35vh */
}

.quiz:hover{
    transform: scale(1.01);
    background-color: #e1ffc9;
    box-shadow: 2px 2px 2px 1px #53900F;
    bottom:5px;

    transition: background-color 0.3s,
                transform 1s,
                bottom 1s,
                box-shadow 0.1s;
    
}

.quiz img{
    height:39px;
    width:170px;
    border-radius: 30px;;
}

.quiz-name{
    display: inline-block;
    font-size: 30px;
    font-weight:bold;
    width:80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quiz-btn-container{
    display: inline-block;
    width:90%;
    height:10%;
    padding:5%;

}

.quiz-btn{
    display: inline-block;
    height:100%;
    width:100%;
    border-radius: 20px;
    border:none;
    background-color:#1F2605;
    color: #D6CE15;
    font-weight: bold;
    cursor : pointer;
}

.quiz-btn:hover{
    transform: scale(1.1);
    transition: transform 0.5s;
}

.quiz-topic{
    font-size: 20px;
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.quiz-avgScore{
    display: inline-block;
    font-size: 20px;
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quiz-highestScore{
    display: inline-block;
    font-size: 20px;
    font-style: italic;
    padding-left: 0%;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quiz-rating{
    display: inline-block;
    font-size: 20px;
    padding-left: 10px;
}

.quiz-rating-display{
    position: absolute;
    bottom:15px;    
    right:10%;
    font-size: 15px;
    font-weight: bold;
}

@media (max-width: 1100px) or (max-height:400px) {
  .quiz-rating{
    display: none;
  }
  .quiz-rating-display{
    display: none;
  }
  .quiz-btn{
    /* position: relative; */
    bottom: -5px;
    height:50px;
    
  }
  .quiz{
    height: 43vh;;
  }

  .pop-up{
    display: none;
  }
}

@media (max-width:1450px){
  .quiz-rating-display{
    display: none;
  }
}

@media (max-height:400px) {
    .quiz-btn-container{
        display: none;
    }
}