#backgroundcolor {
background-color: #fff700;
}
body {
position: relative;
}
.streakDesign {
width: 500px;
float: left;
padding-bottom: 20px;
padding-left: 450px;
height: 100px;
margin: 10px
}
.totalQuestionDesign{
width: 500px;
float: left;
padding-bottom: 20px;
height: 100px;
margin: 10px
}
h1 {
font-family: "Comic Sans MS";
text-align: center;
color: hotpink;
position: relative;
font-size:3em;
}
#bigBox {
width: 60vw;
height: 20vw;
z-index: 1;
background-color: #fffb7b;
border: 2px solid black;
margin: 0 auto;
display: flex;
position: relative;
flex-direction: row;
align-items: center;
justify-content: center;
top: 30%;
}
.num1Digit1 {
text-align: center;
width: 10vw;
height: 10vw;
font-family: "Comic Sans MS";
background-color: #fff700;
border: 2px solid black;
order: 1;
/*display: block;*/
/*margin-left: 150px;*/
/*margin-top: -300px;*/
}
.num1Digit2 {
text-align: center;
width: 10vw;
height: 10vw;
font-family: "Comic Sans MS";
background-color: #fff700;
border: 2px solid black;
/*position: fixed;*/
/*position: relative;*/
/*top: -116px;*/
/*left: 280px;*/
order: 2;
}
.num2Digit1 {
width: 10vw;
height: 10vw;
font-family: "Comic Sans MS";
background-color: #fff700;
border: 2px solid black;
text-align: center;
/*position: fixed;*/
/*position: relative;*/
/*top: -116px;*/
/*left: 280px;*/
order: 4;
}
.num2Digit2 {
text-align: center;
width: 10vw;
height: 10vw;
font-family: "Comic Sans MS";
background-color: #fff700;
border: 2px solid black;
/*position: fixed;*/
/*position: relative;*/
/*top: -116px;*/
/*left: 280px;*/
order: 5;
}
.answer {
width: 30vw;
height: 10vw;
font-family: "Comic Sans MS";
/*background-color: #;*/
border: 2px solid black;
font-size: 6em;
display: block;
margin:auto;
text-align: center;
position: absolute;
top: 675px;
left: 375px;
/*top: 105%;*/
}
.check {
position: absolute;
top: 700px;
left: 1025px;
}
.checkShape {
background-color: #3CB371;
padding: 5px 10px;
font-family: "Comic Sans MS";
display: block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.3s;
cursor: pointer;
width: 10vw;
height: 6vw;
border: 2px solid #4CAF50;
text-align: center;
}
.checkShape:hover {
background-color: green;
color: white;
border-color: #006600;
}
.next {
position: absolute;
top: 700px;
left: 1275px;
}
.nextShape {
background-color: #3CB371;
padding: 5px 10px;
font-family: "Comic Sans MS";
display: block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.3s;
cursor: pointer;
width: 10vw;
height: 6vw;
border: 2px solid #4CAF50;
text-align: center;
}
.nextShape:hover {
background-color: green;
color: white;
border-color: #006600;
}
/*SCROLL BOX*/
.signsScrollBox {
scroll-snap-type: y mandatory;
overflow-y: scroll;
transition-duration: 0.3s;
width: 10vw;
height: 10vw;
border: 2px solid black;
order: 3;
}
::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
Handle
::-webkit-scrollbar-thumb {
background: #888;
}
Handle on hover
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.signsScrollBox div {
scroll-snap-align: start;
height: 10vw;
width: 10vw;
order: 3;
display: flex;
justify-content: center;
align-items: center;
font-size: 10em;
}
.signsScrollBox div:nth-child(1) {
background: hotpink;
color: white;
}
.signsScrollBox div:nth-child(2) {
background: azure;
}
.signsScrollBox div:nth-child(3) {
background: blanchedalmond;
}
.signsScrollBox div:nth-child(4) {
background: lightcoral;
color: white;
}