/* Extra large devices (large laptops and desktops, 1200px and down) */
@media only screen and (max-width: 1200px) {
    #main-header-area{
        height: 135px;
    }

    header h1{
        font-size: 4.5em;
        letter-spacing: 0.20em;
    }

    #main-section-area{
        margin: 3em 3em 0 3em;
    }

    button{
        width: 80%;
        font-size: 1.35em;
        font-weight: bold;
    }

    .slider {
        height: 20px;
    }

    .slider::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }

    label{
        font-size: 1.2em;
    }

    input[type="color"]{
        width: 30%;
        height: 30px;
    }
    
    footer p:first-child{
        font-size: 1.3em;
    }
}


/* Large devices (laptops/desktops, 992px and down) */
@media only screen and (max-width: 992px) {
    #main-section-area{
        flex-direction: column;
        margin: 2em auto 0 auto;
    }

    #main-section-controls{
        width: 90%;
        padding: 0.5em;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 4em;
    }

    #main-section-controls div:first-child{
        padding: 0.1em;
    }

    #main-section-buttons{
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }

    #main-section-buttons div{
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    #main-section-buttons div:first-child{
        margin-bottom: 1em;
        justify-content: space-evenly;
    }

    button{
        width: 95px;
        height: 65px;
        margin: 0 0.5em;
        font-size: 1em;
    }

    .slider {
        height: 25px;
    }

    .slider::-webkit-slider-thumb {
        width: 25px;
        height: 25px;
    }

    label{
        font-size: 1.35em;
    }

    input[type="color"]{
        width: 75px;
        height: 35px;
    }
}

@media only screen and (max-width: 955px) {
    button{
        width: 100px;
        height: 60px;
        padding: 0;
        margin: 0 1em;
        font-size: 1.1em;
    }

    #main-section-controls{
        flex-direction: column;
        padding: 0.5em;
        padding-bottom: 2em;
    }

    #color-picker{
        width: 50%;
    }

    #color-section{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 1em 5em;
    }

    .slide-container{
        text-align: center;
        width: 50%;
    }

    .slider {
        height: 25px;
        width: 300px;
    }

    .slider::-webkit-slider-thumb {
        width: 25px;
        height: 25px;
    }

    label{
        font-size: 1.2em;
    }

    input[type="color"]{
        width: 70px;
        height: 30px;
    }
}

 
/* Medium devices (landscape tablets, 768px and down) */
@media only screen and (max-width: 768px) {
    #main-header-area{
        height: 100px;
    }

    header h1{
        font-size: 3.5em;
    }

    button{
        width: 90px;
        height: 55px;
        padding: 0.2em;
        margin: 0.5em;
        font-size: 1em;
    }

    .slide-container{
        text-align: center;
    }

    .slider {
        height: 20px;
        width: 250px;
    }

    .slider::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #main-section-grid{
        padding: 10px;
        width: 400px;
        height: 400px;
    }

    #main-header-area{
        height: 80px;
    }

    header h1{
        font-size: 2.5em;
    }

    button{
        width: 100px;
        height: 60px;
        font-size: 1.1em;
    }

    #main-section-controls{
        margin-left: auto;
        margin-right: auto;
    }

    #color-section{
        flex-direction: column;
    }

    #color-section div{
        width: 100%;
    }
}

@media only screen and (max-width: 430px) {
    #main-section-grid{
        padding: 10px;
        width: 300px;
        height: 300px;
    }

    #main-header-area{
        height: 80px;
    }

    header h1{
        font-size: 2em;
    }
}