@media screen and (max-width: 600px) and (orientation: portrait) {

    div.main {
        min-height: 100vh;
        background: none;
        padding: 16px;
        flex-direction: column;
        justify-content: flex-start;
        gap: 16px;
    }

    div.user {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    div.user-input {
        width: 80%;
        max-width: 400px;
        height: auto;
        padding: 1.5em;
    }

    div.user-input input {
        margin-top: 0.5em;
        padding: 0.8em;
        width: 80%;
        height: auto;
        font-size: medium;
    }

    div.user-input div {
        font-size: small;
    }

    div.game-number {
        justify-content: space-around;
        width: 90%;
        height: auto;
        margin-top: 20px;
    }

    div.container__game {
        flex-direction: column;
        width: 95%;
        height: 95%;
        aspect-ratio: 1/1;
        margin: 20px 0;
    }

    div.game {
        border-radius: 20px;
    }

    div.game--board {
        padding: 5px;

    }

    div.number {
        width: 16%;
        aspect-ratio: 1 / 1;
        font-size: small;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        padding: 4px 8px;
    }

    div.num {
        width: 8%;
        aspect-ratio: 1 / 1;
        padding: 8px 12px;
    }

    div.directions--button {
        max-width: 90%;
        max-height: 98%;
        gap: 1em;
        align-items: center;
        bottom: 0;

    }

    div.directions--button button {
        height: 16%;
        padding: 3px 6px;
        font-size: small;
    }

    div.panel--tools {
        width: 75%;
        height: auto;
        aspect-ratio: 1/1;
        padding: 16px;
        gap: 8px;
        border-radius: 12px;
        padding-bottom: 20px;
    }

    label.label {
        font-size: small;
    }

    button.new-game {
        font-size: medium;
    }

    input.data {
        padding: 12px;
        font-size: small;
    }

    div.time {
        padding-bottom: 20px;
    }

    div.time p {
        font-size: x-large;
    }

    div.main div.game-theme {
        flex-direction: row;
        justify-content: space-around;
        width: 90%;
        max-width: 300px;
        height: auto;
        padding: 10px;
        border-radius: 0;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;

    }

    label.label p {
        font-size: small;
    }
}


/* Медийни заявки за пейзажна ориентация на телефон */
@media screen and (max-height: 450px) and (orientation: landscape) {

    div.main {
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background: none;
        padding: 16px;
        gap: 16px;
    }

    div.user {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    div.container__game {
        flex-direction: column;
        margin: 10px auto;
        max-width: 45%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0;
    }

    div.game {
        border-radius: 20%;
    }

    div.directions--button {
        max-width: 90%;
        max-height: 98%;
        gap: 1em;
        align-items: center;
        bottom: 0;
    }

    div.directions--button button {
        height: 16%;
        padding: 3px 6px;
        font-size: small;
    }

    div.panel--tools {
        max-width: 45%;
        aspect-ratio: 1/1;
        height: auto;
        margin-bottom: 20px;
        padding: 16px;
        gap: 8px;
    }

    div.time {
        margin-bottom: 50px;
    }

    div.main div.game-theme {
        flex-direction: row;
        justify-content: space-around;
        width: 90%;
        max-width: 300px;
        height: auto;
        padding: 10px;
        border-radius: 0;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
}