html, body {
background-color: lightsteelblue;
            }

.container {
position: absolute;
width: 45%;
border-color: lightskyblue;
background-color: white;
min-height: 400px; 
height: fit-content; 
top: 50%;
left: 30%;
transform: translate(0, -50%);
}

.boxupperleft {
position: absolute;
height: 40%;
width: 30%;
left: 0;
background-color: steelblue;
overflow: auto;
}   


.boxupperright {
position: absolute;
height: 40%; 
width: 70%;
right: 0;
background-color: white;   
overflow: auto;   
}   

.boxbelow {
     position: absolute;
     top: 40%;
     width: 100%;
     min-height: 59% ;
     height: fit-content;
     border-top: 1px solid black;
     background-color: white;
     overflow: auto;
 }   

.erbquoten{
 color: green; 
 height: 8px;
 font-weight: bold; 
 font-size: 1vw;
 padding-left: 0;

}

 p {
     text-align: center;
     font-family: Tahoma, Arial, sans-serif;
     font-size: 1vw;
     padding-left: 5%; 

 }
 
 h1, h2 {
     text-align: center;
     font-family: Tahoma, Arial, sans-serif;
     font-size: 2vw;
     padding-left: 5%; 

 }
 select {
     text-align: center;
     font-family: Tahoma, Arial, sans-serif;
     font-size: 1vw;
     background-color: whitesmoke;
 }
 #erbquoten, #divki, #divel, #divkimu, #divkiva, #divgroselkimu, #divgroselkiva, #ehegatte, #kinder, #geschwismu, #geschwisva, #groselternkimu, #groselternkiva, #ferner {
    padding-top: 0%;
    display: none;
   }

#erbquotenrechner {
    text-align: center;
    padding-top: 13%; 
    color: whitesmoke;
    text-shadow: 3px 5px 3px rgb(40, 93, 136);
}

#h1erbquoten {
    font-size: 1.5vw;;
    color: green;

}

#geduld{
   color: brown;
   padding-top: 5%;
   font-weight: bold;
   padding-left: 0;
}
 @media only screen and (max-width: 920px) {
    .container {
        width: 70%;
        height: 60%;  
        top: 50%;
        left: 15%;
        transform: translate(0, -50%);
        }
        
.boxupperleft {
    width: 30%;
    }   
    
    
    .boxupperright {
    width: 70%;
    }   
    
    .boxbelow {
         position: absolute;
         top: 40%;
         width: 100%;
         min-height: 59% ;
         height: fit-content;
         border-top: 1px solid black;
         background-color: white;
         overflow: auto;
     }   
 p {
    font-size: 2.5vw;
}

h1, h2 {
    font-size: 5vw;
}
select {
    font-size: 2.5vw;
   }
  
   .erbquoten{
    font-size: 2.5vw;
  }
 #erbquotenrechner {
    text-align: center;
    padding-top: 15%; 
    color: whitesmoke;
    text-shadow: 3px 5px 3px rgb(40, 93, 136);
}

#h1erbquoten {
    padding-top: 10%; 
    font-size: 4vw;;
    color: green;
}

#geduld{
   color: brown;
   padding-top: 20%;
   font-weight: bold;
   padding-left: 5%;
   padding-right: 5%;
} 
}
    @media only screen and (max-width: 600px) {
        .container {
            width: 80%;
            height: 70%;  
            top: 50%;
            left: 10%;
            transform: translate(0, -50%);
            }
      
     p {
        font-size: 4vw;
    }
    
    h1, h2 {
        font-size: 8vw;
    }
    select {
        font-size: 4vw;
       }

       .boxupperleft {
        position: absolute;
        height: 15%;
        width: 100%;
        left: 0;
        overflow: auto;
        }   
        
        
        .boxupperright {
        position: absolute;
        top: 15%;
        height: 25%; 
        width: 100%;
        right: 0;  
        overflow: auto;   
        }   
        
        .boxbelow {
             position: absolute;
             top: 40%;
             width: 100%;
             min-height: 59% ;
             height: fit-content;
             border-top: 1px solid black;
             background-color: white;
             overflow: auto;
         }   
     .erbquoten{
        padding-top: 0%;
        font-size: 4vw;
        }

        #erbquotenrechner {
          font-size: 7vw;
            padding-top: 4%; 
           
        }
        
        #h1erbquoten {
            padding-top: 0%;
            font-size: 6vw;;
            color: green;
        }
        
        #geduld{
           padding-top: 0%;
           padding-left: 5%;
           padding-right: 5%;
        } 
    }