abgame/static/css/ab.css

197 lines
3.4 KiB
CSS

body {
font-family: 'Courier New', Courier, monospace;
background-color: #333333;
}
html,
body {
border-color: #E7E5E2;
color: #E7E5E2;
}
hr {
display: none;
}
a {
color: #8FA3A9;
}
#header {
border-radius: 10px;
text-align: center;
width: 100%;
padding-top: 25px;
padding-bottom: 25px;
background-color: #8FA3A9;
color: #243233;
font-weight: bolder;
font-size: large;
}
#content {
min-width: 400px;
max-width: 900px;
width: 65%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ab {
float: none;
border-radius: 10px;
margin-top: 10px;
justify-content: center;
align-items: center;
display: flex;
padding: 5px;
background-color: #89A6C0;
}
.a {
float: left;
width: 45%;
box-sizing: border-box;
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: #F7D214;
color: #243233;
font-weight: bold;
text-align: left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
text-indent: -25px;
padding-left: 50px;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}
.b {
float: left;
width: 45%;
box-sizing: border-box;
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: #243233;
color: #F7D214;
font-weight: bold;
text-align: left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
text-indent: -25px;
padding-left: 50px;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}
input[type="radio"] {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
cursor: pointer;
}
.ab input:checked+label {
background-color: #B3472B;
border: 1px solid #000000;
color: #E7E5E2;
}
.separator {
float: left;
width: 10%;
box-sizing: border-box;
writing-mode: vertical-lr;
transform: rotate(210deg);
font-size: x-small;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
color: #243233;
}
#footer {
margin-top: 10px;
}
#questions {
font-size: small;
text-align: center;
width: 45%;
float: left;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
color: #F7D214;
font-weight: bold;
}
#next {
text-align: center;
width: 45%;
float: left;
border: 0px;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
background-color: #8FA3A9;
color: #243233;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
font-size: medium;
display: block;
cursor: pointer;
}
@media only screen and (max-width:1600px) {
#content {
min-width: 75%;
}
}
@media only screen and (max-width:1280px) {
#content {
min-width: 95%;
}
}
@media only screen and (max-width:640px) {
#content {
min-width: 95%;
transform: none;
position: absolute;
top: 5px;
left: 50%;
transform: translate(-50%);
}
#next {
min-width: 100%;
}
#questions {
min-width: 100%;
padding-top: 0px;
padding-bottom: 5px;
}
.a {
font-size: small;
}
.b {
font-size: small;
}
}