body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f3f3f3;
    color: #333;
}

.container {
    text-align: center;
    margin: 80px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 5em;
}

.heading{
    color: #5ee73c;
   font-size: 1.5em;
   letter-spacing: 1px;
}

.sub{
    font-family: 'Courier New', Courier, monospace;
}

.sub-menu{
    font-size: 1em;
    margin-left: 2em;

}

.multi-container{
    display: flex;
  justify-content: center;
    user-select: none;
}


.container1,.container2{
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
min-width: 9em;
text-align: center;
margin:0.5em;
padding:0.5em;
font-weight: 600;
letter-spacing: 0.7px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.img1,.img2{
    max-width: 1.1em;
    vertical-align:middle;
    margin-right: 0.3em;
    margin-bottom: 0.2em;
}

.container1:hover,.container2:hover{
    background-color: #777777;
    color:white ;
    box-shadow: 1px 1px 10px rgba(121, 120, 120, 0.2);
    cursor: pointer;

}

.container1:active,.container2:active{
    background-color: #777777;
    color:white ;
}

@media only screen and (min-width: 600px) {
    .sub-menu{
        font-size: 1.1em;
        margin-left: 3.5em;
    }
    
    .multi-container{
       
        margin-left: 7em;
        justify-content: start;
    }
    
    .heading{
        font-size: 2em;
    }
    
}