:root {
    --bg-color: rgb(37, 32, 32);
    --principal-color: brown;
    --font-color: rgb(11, 148, 153);
}

body {
    display: flex;
    background-color: var(--bg-color);
    color: var(--font-color);
    border: 3px solid var(--font-color);
    padding: 10px;
}

h1 {
    color: var(--principal-color);
}


.caixas {
    width: 100px;
    height: 100px;
    border: 3px solid var(--font-color);
}

@media (orientation: landscape) {
    body {
        flex-direction: row;
    }
}

@media (orientation: portrait) {
    body {
        flex-direction: column;
    }
}

@media (aspect-ratio: 1/1) {
    body {
        background-color: var(--bg-color);
    }
}

@media (min-aspect-ratio: 2/1) {
    body {
        background-color: var(--font-color);
    }
}

@media (max-aspect-ratio: 1/2) {
    body {
        background-color: var(--principal-color);
    }
}