@font-face {
   font-family: Humming;
   src: url('font/Humming.otf');
}

color {
   color: coral;
}

html {
   background-image: url('img/background.png');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
   font-family: Humming;
   font-size: 22px;
   color: rgb(60, 60, 60);
}

canvas {
   background: white;
   border-radius: 20px;
   border: rgb(60, 60, 60) 1px solid;
   padding: 10px;
   margin-inline: 50px;
   margin-top: 10px;
}

hr {
   border: none;
   border-bottom: rgb(170, 170, 170) 1px dashed;
   margin-inline: 50px;
}

input {
   text-align: center;
   font-family: Humming;
   font-size: 22px;
   color: rgb(60, 60, 60);
   width: 80px;
   height: 45px;
   outline: none;
   border: rgb(60, 60, 60) 1px solid;
   border-radius: 10px;
   background: rgb(235, 235, 235);
   transform: scale(0.95);
}
input:not(:active) {
   opacity: 80%;
}
input:focus,
input:hover {
   opacity: 100%;
}
input:focus::placeholder {
   color: transparent;
}

#bells {
   height: 40px;
   width: 40px;
   position: relative;
   top: 10px;
   margin-left: 5px;
}

#first button {
   width: 80px;
}
#pattern button {
   width: max-content;
   padding-inline: 10px;
}
button {
   font-family: Humming;
   font-size: 16px;
   color: rgb(60, 60, 60);
   height: 45px;
   margin-inline: 2.5px;
   margin-top: 5px;
   border: rgb(60, 60, 60) 1px solid;
   border-radius: 10px;
   transition: ease-in-out;
   background: rgb(235, 235, 235);
   cursor: pointer;
   transition: ease-in-out;
   opacity: 80%;
}
button:hover {
   opacity: 100%;
}
button:active {
   transform: scale(0.975);
}
.active-btn {
   background: rgb(200, 255, 225);
   color: rgb(10, 20, 15);
}

#content {
   margin: auto;
   margin-top: 25px;
   margin-bottom: 25px;
   background: rgb(255, 255, 255, 0.85);
   width: 900px;
   border-radius: 15px;
   padding: 10px;
   text-align: center;
   height: min-content;
}

.section {
   margin-bottom: 30px;
}
.sec-add {
   margin-top: -20px;
   margin-bottom: 30px;
}
.hidden {
   visibility: hidden;
   position: absolute;
}

#data {
   display: grid;
   grid-template-columns: 200px 200px 200px;
   gap: 20px;
   margin: auto;
   width: max-content;
   margin-top: 10px;
}

#dataChart {
   margin-top: 30px;
}

.day {
   border-radius: 15px;
   width: 200px;
   height: 115px;
   border: rgb(60, 60, 60) 1px solid;
   background: white;
   cursor: default;
   font-size: 18px;
}
.day input {
   transform: scale(0.875);
}
.day-input {
   padding-top: 5px;
   display: flex;
   width: max-content;
   margin: auto;
}
.halfday {
   font-size: 7px;
   color: rgb(0, 0, 0, 0.5);
}
.halfday:hover {
   color: rgb(60, 60, 60);
}
.halfday:hover input {
   opacity: 100%;
}

.pattern {
   width: 640px;
   margin: auto;
   margin-top: 10px;
   border-radius: 10px;
   border: rgb(60, 60, 60) 1px solid;
   cursor: default;
   font-size: 16px;
   padding-top: 5px;
   padding-bottom: 5px;
   color: rgb(60, 60, 60);
   background: rgb(235, 235, 235);
   cursor: pointer;
   opacity: 80%;
}

.pattern:hover {
   opacity: 100%;
}
.pattern .box {
   display: inline-block;
   margin-inline: 20px;
}

.pattern.active-pat {
   background: rgb(200, 255, 225);
}

#probs {
   margin-top: -10px;
}

#decreasing-div,
#small-spike-div,
#large-spike-div,
#random-div {
   display: inline-block;
   font-size: 16px;
   margin-inline: 15px;
}