.viewport {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - var(--size-logo-height) - 2*var(--size-small));
    background: #0B121C;
    background: linear-gradient(180deg,#0b121c 0%, #009ac7 100%);
    padding: 0 0.5rem;
}

#ha-demo {
    display: flex;
    flex-direction: column;
    flex: 1; 
    text-align: center;
    padding: 0;
}

#ha-demo h1 {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
    margin: 1rem 1rem var(--size-small);
}

#ha-demo p {
    color: #fff;
    margin: 0 1rem 1rem;
}

#ha-demo strong {
    font-weight: 600;
}

#ha-demo iframe {
    width: 100%;
    height: 100%;
    border-top: 2px solid #fff;
    border-radius: 2rem 2rem 0 0;

    -ms-overflow-style: none;  /* IE e Edge */
    scrollbar-width: none;     /* Firefox */
}

#ha-demo iframe::-webkit-scrollbar {
    display: none;  /* Chrome, Safari */
}


/*-------------------------------------------------------------------------------------------------------------------*/
/* Mobile Adjusts */
@media (max-width: 1024px) {

    .categories {
        margin-right: 0;
        padding-right: 0;
        width: 100vw;
    }

    nav .nav-desktop {
        display: none;
    }

    .menu-icon {
        display: flex;
    }

    .menu-icon::before {
        content: "☰";
    }

    #menu-toggle:checked ~ .menu-icon::before {
        content: "✖";
    }
    
    #menu-toggle:checked ~ nav .nav-mobile {
        display: flex;
    }

    .nav-mobile {
        display: none;
        flex-direction: column;
        background: var(--color-alphasirius-dark);
        opacity: 0.98;
        position: fixed;
        right: 0;
        top: calc((2*var(--size-small) + var(--size-logo-height)));
        min-width: calc(100% - var(--size-small));
        min-height: calc(100vh - (2*var(--size-small) + var(--size-logo-height)));
        padding: var(--size-small);
        gap: var(--size-small);
    }
    
    .nav-mobile a {
        display: block;
        padding: var(--size-border);
        border-radius: var(--size-border);
        text-decoration: none;
        text-align: right;
        font-weight: var(--button-font-weight);
        font-size: var(--button-font-size);
        letter-spacing: var(--button-letter-spacing);
        line-height: var(--button-line-height);
        color: var(--color-alphasirius-gold);
    }

    .nav-mobile a:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .card {
        flex: 0 0 auto;
    }

    .card span {
        display: block;
    }

    #ha-demo h1 {
        font-size: 1.5rem;
        margin: 1rem 0.8rem var(--size-small);
    }

    .footer {
        display: none;
    }
}