* {
box-sizing: border-box;
font-family:-apple-system,BlinkMacSystemFont,"segoe ui",roboto,oxygen,ubuntu,cantarell,"fira sans","droid sans","helvetica neue",Arial,sans-serif;
font-size: 16px;
}
body {
background-color: #222;
color: #EEE;
margin: 0;
}
.navtop {
background-color: #1a1a1a;
color: #CCC;
height: 60px;
width: 100%;
border: 0;
position: sticky;
top: 0;
z-index: 1000;
}
.navtop div {
display: flex;
margin: 0 auto;
width: 800px;
height: 100%;
}
.navtop div h1, .navtop div a {
display: inline-flex;
align-items: center;
}
.navtop div h1 {
flex: 1;
font-size: 18px;
padding: 0;
margin: 0;
color: #ecf0f6;
font-weight: 500;
}
.navtop div a {
padding: 0 20px;
text-decoration: none;
color: #c5d2e5;
font-weight: bold;
}
.navtop div a i {
padding: 2px 8px 0 0;
}
.navtop div a:hover {
color: #ecf0f6;
}
.content {
width: 800px;
margin: 0 auto;
}
.content h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #ebebeb;
color: #DDD;
}
@media screen and (max-width: 800px) {
.navtop {
height: auto;
}
.navtop div {
flex-flow: wrap;
width: 100%;
}
.navtop div h1 {
display: block;
flex-basis: 100%;
padding: 15px 10px;
}
.navtop div > a {
padding: 10px;
font-size: 14px;
font-weight: 600;
flex-basis: 100%;
background-color: #315283;
border-bottom: 1px solid #2d4b78;
}
.content {
padding: 10px;
width: 100%;
}
.responsive-width-100 {
width: 100%;
max-width: 100%;
min-width: 100%;
}}
.gg-comment {
box-sizing: border-box;
position: relative;
display: inline-block;
transform: scale(var(--ggs, 1));
width: 20px;
height: 16px;
border: 2px solid;
border-bottom: 0;
box-shadow:
-6px 8px 0 -6px,
6px 8px 0 -6px;
}
.gg-comment::after,
.gg-comment::before {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
width: 8px;
}
.gg-comment::before {
border: 2px solid;
border-top-color: transparent;
border-bottom-left-radius: 20px;
right: 4px;
bottom: -6px;
height: 6px;
}
.gg-comment::after {
height: 2px;
background: currentColor;
box-shadow: 0 4px 0 0;
left: 4px;
top: 4px;
}
.percentage {
position: fixed;
bottom: 20px;
right: 20px;
background-color: yellow;
color: #222;
padding: 10px;
border: 2px solid var(--red-percentage);
border-radius: 50px;
font-size: 13px;
width: 55px;
height: 55px;
line-height: 27.5px;
text-align: center;
}