/*====================BUTTONS====================*/
button {all: unset;}
.button, button {
    font-family: 'Comic Sans MS';
    width: 100%;
    background-color: #C9D4C7;
    border-radius: 0px;
    font-size: 20px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #000;
    user-select: none;
    outline: 1px solid #fff;
    outline-offset: -2px;
    cursor: pointer;
    border: solid;
}
.button:hover, button:hover {
    background: linear-gradient(#fff);
    outline: 1px solid #ddf;
    border: 1px solid #789;
}
.button:active, button:active {
    background: linear-gradient(#cee 50%, #abe 55%);
    box-shadow: inset 0 0 0.5rem #69f, 0 0 0.25rem #0007;
    outline: 1px solid #aac;
    border: 1px solid #349;
}
/*====================RESPONSIVE====================*/
@media (min-width: calc(1001px + 3rem)) {aside.mid p {text-align: justify;}}
@media (max-width: 768px) {
    html {font-size: clamp(14px, 4vmin, 18px);}
    main {flex-direction: column;}
    .nav {grid-template-columns: 1fr 1fr;}
    .banner {font-size: 5rem;}
    aside.mid {order: 1;}
    aside.left {order: 2;}
    aside.right {order: 3;}
    body {
        padding: 0.5rem;
        gap: 0.5rem;
    }}