html, body {
    height: 100%;
}


body {
    margin: 0;
    display: flex;

    /* This centers our sketch horizontally. */
    justify-content: center;

    /* This centers our sketch vertically. */
    align-items: center;
    background-color:white; 

}
canvas {
    padding: 0;
    
}
.canvascard {    position: relative;
 display: flex;
    justify-content: center;
    align-items: center;

}
.canvascard::before {
    display: inline-block;
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -2;
}
.canvascard::after {

    content: '';
    display: inline-block;

    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -2;
    filter: blur(40px);
}
/* .canvascard::before ,
.canvascard::after {
    background: linear-gradient(235deg,#1438A6,#BF1736,#1438A6);
} */
 .jumbotron {
  background: #008ABE !important;
     text-align: center;
     align-items: center;

 }
    .input-group {

        box-sizing:content-box !important;
         width:100px !important;
         display: inline-flex;

  }
    .input-group .lbl {
        display: block!important;
        width: 100% !important;
    }
    .input-group #inputGroupSelect02 {
        display: block !important;
        width: 100% !important;
    }


body { overscroll-behavior: none }



@media (max-width: 768px)and (orientation: Portrait) {
    html {font-size:  calc(0.65em + 0.3vw) }

    .display-4{
        font-size: 20px;
        margin: 10px;
        
    }
    .controls {
    /* width:  calc(15em + 12vw) ; */
    max-width: 300px;
    border-radius: 10px;
}
}
@media (max-width: 1024px)and (orientation: Landscape) {
    html {font-size:  calc(0.4em + 0.3vw) }
    .controls {
        /* width:  calc(10em + 10vw) ; */
        width: 500px;
        height: 500px;
    }
    .display-4{
        font-size: 35px;
    }
    .wlcm{
        margin-top: 75px;
    }
    .input-group {

        width:90px !important;

    }
}