body {
	font-family: Helvetica, sans-serif;
    background-color: #7fd495;
    height: 1280px;
}

* {

    text-align: center;
}

.sheet_container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1000px;

}

.sheet {
    width: 950px;
    height:  950px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 7px 7px 0px 7px #000000;
}

input {
    margin-right: 25px;
    margin-left: 25px;
    height: 10px;
    border-radius: 10px;
}

h1 {
    color: Black;
    text-align: center;
    font-size: 24px;
}

a, button, select {
    background-color: #38ff92;
    margin-right: 15px;
    margin-left: 15px;
    padding: 12px 18px;
    transition-duration: 0.5s;
    letter-spacing: 0.5px;
    border: 0.5px;
    border-radius: 10px;
    text-decoration: none;
    color: black;
    

    box-shadow: 3px 3px 0px 3px #000000;
}

a {
    padding: 8px 18px;
}

a:hover, select:hover, button:hover{
    box-shadow: 2px 2px 5px #000000;
}

.p1 {
    color: Black;
    font-size: 17px;
    width: 700px;
    margin: 0 auto;
    margin-top: 15px;
}

.p2 {
    color: Black;
    font-size: 12px;
    font-style: italic;
    width: 40%;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 15px;
}

input[type="range"] {
    -webkit-appearance: none;
    background: silver; 
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;  
  height: 20px; 
  background: #263859; 
  cursor: pointer; 
}

#displayCanvas {
    margin: 0 auto;
    width:  700px;
    height: 700px;
    
    border: 4px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: linear-gradient(to bottom right, #263859, #17223B);
    box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.tab {
    tab-size: 4;
}