body{
    background-color: aquamarine;
    font-family: 'Courier New', Courier, monospace;
    color: #ffffff;
}
@media (max-aspect-ratio: 4/3){
.container{
     display: grid;
    max-width: 90vw;  
    margin: 0 auto;     
    padding: 2rem;
    min-height: 100vh;  
    grid-template-columns: auto auto;
}
.circle{
    display: grid;
    min-width: 37vw;
    min-height: 50vh;
    border-radius: 100%;
    background-color: #000000;
      position: absolute; 
    right: 31%; top: 30%;
}}
@media (min-aspect-ratio: 16/9){
.container{
     display: grid;
    max-width: 60vw;  
    margin: 0 auto;     
    padding: 2rem;
    min-height: 100vh;  
    grid-template-columns: auto auto;
    
} 
.circle{
    display: grid;
    min-width: 27vw;
    min-height: 52vh;
    border-radius: 100%;
    background-color: #000000;
      position: absolute; 
    right: 36%; top: 30%;
}
}

.red{
    background-color: #ff0000;
}
.green{
    background-color: #00ff00;
}
.blue{
    background-color: #0000ff;
}
.gray{
    background-color: #333333;
}
.gray
.gray
.red
.blue{
    min-width: 25vw;
    min-height: 25vh;
     display: flex;
   text-align: center;
     justify-content: center;
}