Spaces:
Sleeping
Sleeping
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
font-family: sans-serif; | |
} | |
#component-0 { | |
padding: 5% 5% 0% 5%; | |
display: flex; | |
flex-direction: column; | |
background-color: #121212; | |
background-image: url("file=assets/bg.png"); | |
background-size: cover; | |
} | |
#header_block { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
#main_block { | |
flex-grow: 1; | |
display: flex; | |
flex-direction: column; | |
} | |
#board_row { | |
flex-grow: 1; | |
display: flex; | |
align-items: center; | |
justify-content: space-evenly; | |
} | |
#radio_row { | |
align-self: center; | |
} | |
.image_container { | |
margin: 26px; | |
position: relative; | |
display: inline-block; | |
text-align: center; | |
aspect-ratio: 1; | |
flex-grow: 1; | |
border: 2px solid #2c2c2c; | |
background-color: #121212; | |
border-radius: 30px; | |
} | |
#draw_cta { | |
position: absolute; | |
top: -91px; | |
right: -124px; | |
} | |
#eraser { | |
position: absolute; | |
top: calc(50% - 31px); | |
right: -31px; | |
padding: 16px; | |
border-radius: 50%; | |
border: none; | |
background-color: rgba(255, 255, 255, 0.2); | |
} | |
#eraser_icon { | |
display: inline-block; | |
width: 30px; | |
height: 30px; | |
background-image: url("file=assets/eraser.png"); | |
background-size: cover; | |
} | |
#footer_block { | |
position: relative; | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
margin-top: 30px; | |
margin-bottom: 5%; | |
} | |
input[type="radio"] { | |
display: none; | |
} | |
.form { | |
background-color: transparent ; | |
border: none ; | |
} | |
fieldset { | |
background-color: transparent ; | |
border: none ; | |
} | |
label { | |
border: none ; | |
background-color: transparent ; | |
background: none ; | |
} | |
input[type="radio"] + span { | |
display: inline-block; | |
font-weight: normal; | |
font-size: 20px; | |
color: white; | |
padding: 10px 20px; | |
border-radius: 48px; | |
border: 1px solid #0d0707; | |
} | |
input[type="radio"]:checked + span { | |
background-color: #c0c0af; | |
color: black; | |
} | |
#fullscreen { | |
transition: 150ms; | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
margin: auto; | |
height: fit-content; | |
width: fit-content; | |
background-color: rgba(255, 255, 255, 0.2); | |
border-color: transparent; | |
border-radius: 50%; | |
padding: 16px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
outline: none; | |
cursor: pointer; | |
} | |