87 lines
1.1 KiB
CSS
87 lines
1.1 KiB
CSS
body {
|
|
text-align: center;
|
|
}
|
|
|
|
#canvas * {
|
|
border: solid black 2px;
|
|
border-radius: 10px;
|
|
background-color: wheat;
|
|
margin: 2em;
|
|
}
|
|
|
|
#toggleButtons {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
#toggleButtons * {
|
|
padding: 0.2em 0.4em;
|
|
margin: 0em 0.2em;
|
|
border-radius: 10px;
|
|
color: white;
|
|
font-size: 2em;
|
|
}
|
|
|
|
#response {
|
|
font-size: 2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#clear {
|
|
font-size: 1.4em;
|
|
padding: 0.5em 1em;
|
|
border-radius: 10px;
|
|
color: white;
|
|
background-color: #222222;
|
|
}
|
|
|
|
#clear:hover {
|
|
background-color: #464646;
|
|
}
|
|
|
|
.activatedButton {
|
|
background-color: #4d9e2a;
|
|
}
|
|
|
|
.activatedButton:hover {
|
|
background-color: #2d5e19;
|
|
}
|
|
|
|
.deactivatedButton {
|
|
background-color: #fa2b2b;
|
|
}
|
|
|
|
.deactivatedButton:hover {
|
|
background-color: #a11d1d;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#canvas {
|
|
border: solid black 2px;
|
|
border-radius: 10px;
|
|
background-color: wheat;
|
|
margin: 1em 0;
|
|
width: 80%;
|
|
}
|
|
|
|
#toggleButtons {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#toggleButtons * {
|
|
font-size: 1em;
|
|
}
|
|
|
|
#response {
|
|
font-size: 1em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
#clear{
|
|
font-size: 0.7em;
|
|
}
|
|
}
|