You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
1.8 KiB
CSS
98 lines
1.8 KiB
CSS
|
|
@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
|
|
|
|
h1{
|
|
top: 0;
|
|
left: 0;
|
|
font-family: 'Arimo', sans-serif;
|
|
}
|
|
button{
|
|
color: #5659ff;
|
|
background-color: #fff;
|
|
font-size: 1rem;
|
|
border: solid gray 2px;
|
|
border-radius: 20px;
|
|
}
|
|
.buttons {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding-right: 2rem;
|
|
padding-top: 2rem;
|
|
font-size: 1rem;
|
|
width: 10vw;
|
|
height: 5vh;
|
|
align-items: grid;
|
|
font-family: 'Arimo', sans-serif;
|
|
}
|
|
#intro{
|
|
top: 0;
|
|
left: 0;
|
|
font-family: 'Arimo', sans-serif;
|
|
}
|
|
#down{
|
|
bottom: 0;
|
|
right: 0;
|
|
font-family: 'Arimo', sans-serif;
|
|
}
|
|
.display-text{
|
|
top: 0;
|
|
left: 0;
|
|
padding-left: 3rem;
|
|
position: absolute;
|
|
align-items: left;
|
|
text-align: left;
|
|
z-index: -1;
|
|
}
|
|
|
|
.slider-container {
|
|
display: flex;
|
|
padding-top: 3rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
body {
|
|
color: #5659ff;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* High-contrast styles */
|
|
.high-contrast {
|
|
color: #fff;
|
|
background-color: #000;
|
|
}
|
|
|
|
input[type=range] {
|
|
appearance: none;
|
|
margin: 10px 0;
|
|
width: 100%;
|
|
}
|
|
input[type=range]:focus {
|
|
outline: none;
|
|
}
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 10px;
|
|
cursor: pointer;
|
|
animation: 0.2s;
|
|
background: #007bff;
|
|
border-radius: 20px;
|
|
border: 0px solid #000101;
|
|
}
|
|
input[type=range]::-webkit-slider-thumb {
|
|
border: 0px solid #000000;
|
|
height: 20px;
|
|
width: 39px;
|
|
border-radius: 20px;
|
|
background: #000101;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
margin-top: -3.6px;
|
|
}
|
|
input[type=range]:focus::-webkit-slider-runnable-track {
|
|
background: #007bff;
|
|
}
|
|
img{
|
|
border-radius: 20px;
|
|
} |