body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4rem calc(100% - 5.5rem) 1.5rem;
    justify-content: center;
    padding: 0 !important;
}

main {
    display: block;
}

article {
    max-width: 600px;
    width: calc(100% - 2rem);
    height: calc(100% - 2.5rem);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr;
    grid-template-areas:
        "logo"
        "btn-create"
        "btn-load";
    gap: 1rem;
    margin: 2rem 1rem 0.5rem;
}

#app-logo {
    grid-area: logo;
    justify-self: center;
    max-width: 540px;
}

#createCanvas {
    grid-area: btn-create;
}

#loadCanvas {
    grid-area: btn-load;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-direction: row;
}

.button > i.fas {
    font-size: 2rem;
}


@media only screen and (min-width: 600px) {

    header {
        justify-content: center;
    }
    
    main {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    article {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 1fr;
        grid-template-areas:
            "logo"
            "btn-create"
            "btn-load";
    }
}

@media only screen
    and (max-height: 600px)
    and (orientation: landscape) {

    body {
        grid-template-rows: 4rem calc(100% - 5rem) 1rem;
    }

    main {
        display: block;
    }

    article {
        max-width: unset;
        height: calc(100% - 1.5rem);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
            "logo btn-create"
            "logo btn-load";
        margin: 1rem 1rem 0.5rem;
    }
    
    #app-logo {
        height: 100%;
    }

    footer {
        justify-content: flex-end;
    }

    .swal2-icon {
        display: none !important;
    }
}