:root{
    --shadow-light: #ffffff;
    --shadow-dark: #a3b7a7;
}

body{
    background: #d1e7dd;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(14px, 0.9vw, 16px);
}

.myDiv{
    border-radius: 20px;
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    transition: all .3s ease-in-out;
}
.myDiv:hover{
    box-shadow: 5px 5px 10px var(--shadow-light), -5px -5px 10px var(--shadow-dark);
}

.myTextBox{
    background-color: transparent;
    border: none;
    border-radius: 6px;
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    transition: all .3s ease;
}

.myTextBox:focus{
    background-color: #ffffff;
    border: none;
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

.myButton{
    background-color: transparent;
    border: none;
    border-radius: 6px;
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    transition: all .3s ease-in-out;
}

.myButton:hover{
    background-color: #198754;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    box-shadow: 3px 3px 6px var(--shadow-light), -3px -3px 6px var(--shadow-dark);
}