@media (min-width: 1024px) {
    main{
        font-family: 'Montserrat';
        background-color: var(--ds-neutral);
        padding-left: 15%;
        padding-right: 15%;
    }
    .logo{
        display: block;
        transition: all 0.5s ease-out;
        position: absolute;
        transform: translateX(-360px) translateY(180px) rotate(-90deg);
        filter: brightness(1);
    }
    .logo img{
        transform: scale(.5);
    }

    /* ################# 

    Video

    ##################################################################################################*/
    .video{
        border-left: 1px solid var(--ds-color);
        border-right: 1px solid var(--ds-color);
    }
    .video img{
        width: 100%;
    }

    /* ################# 

    QR Code generator

    ##################################################################################################*/
    .app-qrcode {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        padding: var(--ds-space1);
        background-color: #ddd;
        border-left: 1px solid var(--ds-color);
        border-right: 1px solid var(--ds-color);
    }
    .app-qrcode > *:first-child {
        flex: 0 0 70%;
    }
    .app-qrcode > *:last-child {
        flex: 0 0 30%;
    }

    .app-qrcode-ui {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--ds-space2);
    }
    .app-qrcode-ui h1 {
        font-size: 3em;
        color: var(--ds-dark);
    }
    .app-qrcode-ui small {
        color: var(--ds-dark);
        margin-top: var(--ds-space1);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .app-qrcode-ui form {
        padding-top: var(--ds-space2);
        display: flex;
        flex-direction: column;
        gap: var(--ds-space2);
    }
    .app-qrcode-ui form label{
        color: var(--ds-dark);
    }
    .app-qrcode-ui form input[type="text"] {
        outline: 0;
        font-size: 16px;
        border: 1px solid var(--ds-dark);
        background-color: #ddd;
        padding: var(--ds-space2);
        transition: all 0.5s ease-out;
    }
    .app-qrcode-ui form input[type="text"]::placeholder {
        color: black;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .app-qrcode-ui form input[type="text"]:focus {
        color: var(--ds-dark);
        background-color: var(--ds-light);
        border: 1px solid var(--ds-color);
    }
    .app-qrcode-ui form input[type="text"]:focus::placeholder {
        color: var(--ds-light);
        font-size: 10px;
        text-transform: uppercase;
    }
    .app-qrcode-ui form label strong{
        color: var(--ds-dark);
        padding-left: 8px;
    }
    .app-qrcode-ui form input[type="color"] {
        padding: 3px;
        border: 1px solid var(--ds-dark);
        background-color: #ddd;
    }
    .app-qrcode-ui form button{
        margin-top: var(--ds-space1);
    }

    .app-qrcode-gen{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--ds-space2);
        background-color: white;
        height: 360px;
    }
    .app-qrcode-gen button {
        margin-top: 15px;
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
        background-color: var(--ds-dark);
        color: var(--ds-light);
        padding: var(--ds-space1);
    }

    #qrcodeLink{
        margin-top: var(--ds-space2);
        font-weight: bold;
        line-height: 1.5;
    }
    #qrcode img, #qrcode canvas {
        width: 100%;
        height: 100%;
    }
    #qrcode-print {
        display: none;
    }

    /* ################# 

    design system

    ##################################################################################################*/
    .app-ds{
        padding: var(--ds-space8);
        background-color: #bbb;
        border-left: 1px solid var(--ds-color);
        border-right: 1px solid var(--ds-color);
    }
    .app-ds h2{
        color: var(--ds-dark);
    }
    .app-ds h2 span{
        color: var(--ds-color);
    }
    .app-ds article h3{
        color: var(--ds-dark);
        margin-top: var(--ds-space1);
        margin-bottom: var(--ds-space3);
    }
    .app-ds article p{
        font-size: 16px;
        margin-bottom: var(--ds-space2);
        line-height: 1.3;
    }
    #manual-cta{
        margin-top: 40px;
    }

    /* ################# 

    footer

    ##################################################################################################*/
    footer{
        font-family: 'Montserrat';
        background-color: var(--ds-dark);
        padding-top: 5%;
        padding-bottom: 5%;
        padding-left: 5%;
        padding-right: 5%;
    }
    footer .ds-grid{
        gap: 30px;
    }
    footer strong{
        color: var(--ds-color);
        font-size: 10px;
        text-transform: uppercase;
    }
    footer ul{
        list-style: square;
        color: var(--ds-color);
        margin-left: -20px;
    }
    footer ul li{
        margin-bottom: var(--ds-space1);
    }
    footer ul li a{
        line-height: 1.3;
        font-size: 16px;
        color: var(--ds-light);
    }
    footer h2, h3, h4{
        color: var(--ds-color);
        font-size: 1em;
    }

    .footer-info{
        width: 400px;
        padding-right: var(--ds-space6)
    }
    .footer-info p{
        color: aliceblue;
        font-size: 14px;
        padding-top: var(--ds-space1);
        padding-bottom: var(--ds-space2);
    }

    .footer-app{
        display: flex;
    }
    .footer-app a{ opacity: .5; transition: all 0.5s ease-in-out; }
    .footer-app a:hover{ opacity: 1; }
    .footer-app img{
        padding-top: var(--ds-space2);
        padding-right: var(--ds-space2);
        width: 180px;
    }
    .footer-engine{
        padding-top: 2%;
        color: #ccc;
    }
}