* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "poppins", consolas;
    /* overflow: hidden; */
 }

body {
    height: 100%;
}


#canvas1 {
    opacity: 0.9;
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,#e66465, #9198e5);
}

h1 {
    text-align: center;
    font-size: 4rem;
}

h2 {
    margin-top: 2%;
    margin-left: 1%;
}

p {
    margin: 0%;
    padding: 0%;
}

#numberSlider {
    display: block;
}

#numberOutput {
    padding: 0%;
    margin-top: 0%;
}


#angleSliderDiv {
    display: block;
}

#sizeSliderDiv {
    display: block;
}

#slider {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 1% 10%;
}

#slider div:hover {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10%;
}


@media (max-width: 1200px) {

    h1 {
        font-size: 2rem;
    }



    #canvas1 {
        background: linear-gradient(135deg,#e66465, #9198e5);
        
    }

    body {
        background: white;
        background-color: white;
    }

    #slider {
        flex-direction: column;
    }
}