@media screen and (orientation: portrait){html{
    section#main{
        card-set{
            @media screen and (width <= 568px){
            padding: 1rem;
            }
            card{
                grid-column: span 2;
                h1{font-size: 2.5rem;}
                h2{font-size: 1.5rem;}
                &.main{
                    h1{font-size: 4rem;}
                }
            }
        }
    }
}}


section#main{
    card-set{
        /* grid */
        padding: 2rem;
        padding-bottom: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;

        card{
            display: block;
            background: var(--md-sys-color-surface-container);
            &:hover{
                background: var(--md-sys-color-surface-container-high);
            }
            position: relative;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 100%;
            padding: 0;
            transition: border-radius 300ms cubic-bezier(0.2, 0, 0, 1), background-color 300ms cubic-bezier(0.2, 0, 0, 1);
            border-radius: 24px;
            a{
                width: 100%;
                height: 100%;
            }
            h1{
                padding: 7% 20% 2% 5%;
                font-size: 3rem;
                font-weight: bold;
            }
            h2{
                padding: 5%;
                padding-top: 0;
                font-size: 1.75rem;
            }
            span{
                position: absolute;
                padding: 2px;
                top: 20px; right: 20px;
                font-size: 2.5rem;
                border-radius: 10px;
                color: var(--md-sys-color-on-primary);
                background-color: var(--md-sys-color-primary);
            }
            &.main{
                grid-row: span 2;
                background: center / 90% no-repeat url("/static/img/MainCard.webp") var(--md-sys-color-surface-container);
                h1{font-size: 5rem;}
            }
            &.card-long{
                grid-column: span 2;
            }
        }
    }
}

section#aboutme, section#guides {
    iframe {
        width: 100%;
    }
}