body {
margin: 0;
background: #D1D6D8;
font-family: sans-serif;
}
a {
text-decoration: none;
}
dialog {
padding: 0;
max-width: 90%;
outline: none;
}
dialog::backdrop {
background: repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 1px,
rgba(0, 0, 0, 0.3) 1px,
rgba(0, 0, 0, 0.3) 20px
);
backdrop-filter: blur(3px);
}
table {
width: 100%;
padding: 1%;
}
td {
padding: 5px;
line-height: 1.5em;
vertical-align: top;
word-break: break-word;
}
.sitehead {
background: #2B2D42;
overflow: hidden;
}
.sitename {
margin: 0 auto;
padding: 40px;
max-width: 820px;
font-family: "Permanent Marker", cursive;
font-size: 3.5em;
color: #D80032;
}
#sitebody {
margin: 0 auto;
max-width: 900px;
padding: 20px;
}
.section, dialog {
background: #E9EEF0;
border: 1px solid #DDE2E4;
overflow: hidden;
}
div.section {
margin-bottom: 20px;
}
.sectitl {
padding: 10px 20px;
background: #E1E6E8;
border-bottom: 1px solid #D9DEE0;
font-family: Play;
font-size: 1.8em;
}
.section img {
float: left;
padding: 20px;
width: 30%;
}
.sectbox {
line-height: 1.5em;
font-size: 1.2em;
}
.sectext {
float: left;
padding: 40px 0;
width: 55%;
}
.diagtxt {
padding: 40px 40px 0 40px;
}
.sectbtn {
float: left;
max-width: 350px;
padding-bottom: 20px;
overflow: hidden;
font-size: 1.2em;
}
.diagbtn {
float: right;
padding-top: 40px;
font-size: 1.2em;
}
.bodybtn {
float: left;
width: 150px;
padding: 12px 0;
margin: 10px;
background: #007ADE;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
color: white;
cursor: pointer;
}
.pieout {
float: left; margin: 10px;
border-radius: 50%; background-color: #007ADE;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.pieins {
height: 50px; width: 110px; margin: 25px; padding: 30px 0;
border-radius: 50%; background-color: #EDF2F4;
text-align: center; font-weight: bold;
}