@charset "utf-8";
/* CSS Document */

.banner {
    height: 120px;  
    background: #70a1ff; 
    margin: 5px 10% 20px 8%;
    width: 85%; 
    padding: 10px 20px;     
    text-transform: capitalize;   
    background-color: #37966f;
    background-position: center;  
}

.banner h2 {
    text-align: left; 
    margin-bottom: 10px; 

}

.banner p {
    text-align: justify; 
    text-transform: none;
    font-style: italic; 
}


.bBox {
    justify-content: space-around; 
    overflow: hidden; 
    margin: 20px 10% 20px 8%;
    width: 85%; 
    text-align: justify; 
    padding: 10px 10px 20px 20px;
    overflow-y: auto; 
}

.bBox h2 {
    text-align: left; 
    margin-bottom: 10px; 
}

.bBox p{
    padding: 5px 5px 10px 10px; 
    
}

.last {
    padding: 5px 0 5px 0; 
}

#container>div>ol{
    
    padding-left: 20px; 
    counter-reset: list; 
}

#container>div>ol>li{
    padding: 5px 7px 5px 10px; 
    list-style-type: none;

}

#container>div>ol>li:before{
    counter-increment: list; 
    padding-left: 10px; 
    content: counter(list, decimal) ")";
    padding-right: 10px; 

}

.bBox:nth-child(4n+1){
    background: #03dac5; 
}

.bBox:nth-child(4n + 2){
    background: #F9AA33; 
}

.bBox:nth-child(4n + 3){
    background: #FFF1AD; 
}

.bBox:nth-child(4n){
    background: #C1E581; 
}

.bBox a {
    color: #000000; 
    text-decoration: underline; 
        
}

.bBox a:hover, .bBox a:active {
    color: azure; 
    background: #1b9bff; 
    transition: .35s; 
    text-decoration: none; 
}

pre {
    font-size: 17px;
    background-color: #EBEBEB;
    margin: 5px 40px 5px 40px; 
    padding: 20px; 
}

#container>div>ol>li>details{
    text-transform: uppercase; 
    margin: 5px 320px 5px 50px;
    min-width: 80%;  
    font-size: 0.9em;
    font-style: italic;
    line-height: 2em; 
    cursor: pointer;
    
}

#container>div>ol>li>details:hover{
    color:#656565;
    background-color: #EBEBEB;
}


#container>div>ol>li>details>img{
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 640px;
}


.QA summary {
    font-weight: bold;
}

@media screen and (max-width: 868px) {
    
    .banner {
        height: 180px; 
    }
    
    pre {
    font-size: 17px;
    margin: 5px 20px 5px 20px; 
    padding: 10px; 
   
}
    
    #container>div>ol>li>details{

    margin: 5px 220px 5px 40px;
    min-width: 80%;  
    
    }
    
    #container>div>ol>li>details>img{

      width: 540px;
    }

}

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

    pre {
        font-size: 14px;
 
    } 
    
    #container>div>ol>li>details{
        margin: 5px 220px 5px 30px;
        min-width: 80%;  
    
    }
    
    #container>div>ol>li>details>img{

      width: 420px;
    }

}

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

    #container>div>ol{
        padding-left: 2px; 

    }

    #container>div>ol>li{
        padding: 5px;  
        list-style-type: none;

    }
    
    pre {
        font-size: 8px;
        margin: 5px 5px 5px 5px; 
        padding: 5px; 
    }   
    
    #container>div>ol>li>details{
        margin: 5px 10px 5px 10px;
        min-width: 80%;  
    
    }
    
    #container>div>ol>li>details>img{
        width: 280px;
    }  
  
}