body{
    padding:0px;
    margin:0px;
    box-sizing: border-box;
    font-family:'Courier New', Courier, monospace;
}

*{
    box-sizing: border-box;
}

* {
    scrollbar-width: none;
    scrollbar-color: #48563d #d4d4d4;
}

*::-webkit-scrollbar {
    width: 4px;
    height:0px;
}

*::-webkit-scrollbar-track {
    background: #d4d4d4;
}

*::-webkit-scrollbar-thumb {
    background-color: #48563d;
    border-radius: 0px;
    border: 0px ridge #000000;
}


.wrapper{
    padding:10px;
    max-width:min(800px, 100%);
    margin:0 auto;
    text-align:center;
}

.header-wrapper{
    padding:20px 10px;
    margin-bottom:10px;
}

h1{
    font-size:1.4rem;
    margin:0px;
    padding:0px;    
    margin-bottom:10px;
    font-weight:bold;
}

h2{
    margin:0px;
    padding:0px;    
    font-size:1.2rem;
    font-weight:normal;
}

.options-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}

.option-box{
    color:white;
    background-color:darkolivegreen;
    cursor: pointer;
    text-decoration: none;
    background-image:linear-gradient(to bottom, darkorange, darkorange); 
    background-repeat:no-repeat;
    background-size:100% 0%;
    background-position:0% 100%;
    transition:background-size 0.5s;
}

.option-box:hover{
    background-size:100% 100%;
    transition:background-size 0.2s;    
}


.option-box i{
    font-size:2.5rem;
    padding:50px 10px;
}

.option-box div{
    background-color:darkorange;
    padding:10px 5px;
    font-weight:bolder;
    text-transform: uppercase;
}

@media only screen and (max-width:400px){
    h1{
        font-size:1rem;
    }
    h2{
        font-size:0.9rem;
    }
    .option-box i{
        padding:25px 10px;
    }
}