@media (max-width: 1200px) {
    div#controls {
        left: 50%;
    }
    div#rolls {
        left: 60%;
    }
}

@media (max-width: 1080px) {
    div#controls {
        left: 60%;
    }
    div#rolls {
        left: 75%;
    }
}

@media (max-width: 600px) {
    div#controls {
        left: 15%;
        top: 600px;
    }
    div#rolls {
        left: 15%;
        top: 800px;
    }
    footer {
        height: 20px;
        z-index: auto;
    }
    nav#footer {
        padding-right: 5px;
        font-size: 0.65rem;
        
    }
}

@media (max-width: 400px) {
    main {
        margin-top: 50px;
    }
    div#controls {
        top: 500px;
    }
    div#rolls {
        top: 680px;
    }
    footer {
        display: none;
    }
    a.nav {
        text-decoration: underline;
    }
}