/*mobile first min-width sets base and content is adapted to computers.*/
@media (min-width: 100px) {
    /*Required to keep the toggle on top of the navbar when open on mobile*/
    #dark-theme-toggle-container {
        position: absolute;
        height: var(--mobile-nav-height);
        top: 0;
        left: 0;
    }

    #dark-theme-toggle {
        position: absolute;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: linear-gradient(180deg, black 50%, #d0d0d0 50%);
        cursor: pointer;
        transition: background 0.3s ease-in-out;
        /*box-shadow: 0px 0px 10px rgba(255,255,255, 0.1);*/
        /*box-shadow: 0px 0px 10px ;*/
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }

    #dark-theme-toggle.dark-theme-enabled {
        background: linear-gradient(180deg, #d0d0d0 50%, black 50%);
    }
}

/*portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones*/
@media (min-width: 641px) {

}

/*tablet, landscape iPad, lo-res laptops ands desktops*/
@media (min-width: 961px) {
    #dark-theme-toggle-container {
        height: 100%;
        width: 65px; /*width of the toggle (45px) + right padding*/
        right: 0;
        left: auto;
        top: 0;
    }

    #dark-theme-toggle {
        right: 15px;
        width: 40px;
        height: 40px;
    }
}