* { font-size: 16px; }

body { margin: 0; padding: 0; display: flex; min-height: 100vh; flex-direction: column; }

header { position: fixed; z-index: 100; top: 0; width: 90%; padding: 0 5%; background-color: #fff; border-bottom: 1px solid #5d4037; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5); }
@media screen and (max-width: 690px) { header { padding: 0; width: 100%; } }
header h1 { display: inline-block; margin: 0; }
header h1 a { display: block; padding: 0.75rem; color: #795548; text-shadow: 0 1px #d7ccc8; text-decoration: none; font-size: 1.5rem; }
@media screen and (max-width: 690px) { header h1 a { font-size: 1.25rem; } }
header nav { display: block; float: right; height: auto; margin: 0 1rem; }
@media screen and (max-width: 690px) { header nav { background: #f5f5f5; box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.3); float: none; margin: 0; text-align: center; } }
header nav h2, header nav input#toggle-nav { display: none; }
header nav label[for="toggle-nav"] { display: block; height: 3em; position: absolute; right: 0; top: 0; width: 3em; }
@media screen and (min-width: 690px) { header nav label[for="toggle-nav"] { display: none; } }
header nav label[for="toggle-nav"]::before, header nav label[for="toggle-nav"]::after, header nav label[for="toggle-nav"] span { background-color: #343434; border-radius: 50%; content: ''; height: .3em; left: calc(50% - .3em / 2); position: absolute; transition: transform .2s ease-in, left .2s ease-in, width .2s ease-in; width: .3em; }
header nav label[for="toggle-nav"]::before { top: .75em; }
header nav label[for="toggle-nav"] span { top: 1.35em; }
header nav label[for="toggle-nav"]::after { bottom: .75em; }
header nav #toggle-nav:checked ~ ul { max-height: 100vh; }
header nav ul { display: flex; display: -webkit-flex; font-size: 1.2em; flex-wrap: wrap; -webkit-flex-wrap: wrap; list-style-type: none; margin: 0; max-height: 0; overflow: hidden; padding: 0; transition: max-height .3s ease-out; }
@media screen and (min-width: 690px) { header nav ul { max-height: 100vh; overflow: visible; } }
header nav li { display: inline-block; margin: 0 1rem; }
@media screen and (max-width: 690px) { header nav li { display: block; margin: 0; width: 100%; } }
header nav li a { color: #795548; display: block; font-size: 1rem; font-weight: 600; padding: 1rem .5rem; text-decoration: none; }
header nav li a:hover { box-shadow: 0px -3px 0px #795548 inset; transition-duration: .2s; }
@media screen and (max-width: 690px) { header nav li a:hover { box-shadow: none; } }
header nav input:checked { opacity: .1; transform: scale(10); }
header nav input:checked ~ label::before, header nav input:checked ~ label::after { border-radius: 0; height: .15em; left: calc(50% - .75em); width: 1.5em; }
header nav input:checked ~ label::before { transform: rotate(45deg) translate(0.5em, 0.47em); }
header nav input:checked ~ label::after { transform: rotate(-45deg) translate(0.5em, -0.47em); }

footer { padding: 1rem 4rem; height: 42px; background-color: #444444; color: #ccc; text-align: center; }
@media screen and (max-width: 375px) { footer { padding: 1rem; } }
footer .license { float: right; opacity: 0.5; }
footer div { padding-top: 0.75rem; }
footer div a { float: left; display: block; color: #ccc; text-decoration: none; }

main { flex: 1; display: flex; flex-direction: column; margin-top: 3.75rem; }
@media screen and (max-width: 690px) { main { margin-top: 3.45rem; } }
main > section { flex: 1; }
main .slogan { background: #2A2929 url("/images/slogan_bg.png") top center no-repeat; }
main .slogan div { background-color: rgba(121, 85, 72, 0.925); padding: 5rem 0 3rem; }
main .slogan div text-style, main .slogan div h2 { text-shadow: 0 1px 1px #777; letter-spacing: .25rem; text-align: center; }
main .slogan div h2 { position: relative; top: -2rem; color: #fff; font-size: 3rem; font-weight: 500; }
@media screen and (max-width: 690px) { main .slogan div h2 { font-size: 2rem; } }
@media screen and (max-width: 690px) { main .slogan div h2 { margin: 1rem; } }
main section { padding: 3rem 0; text-align: center; }
@media screen and (max-width: 690px) { main section { padding: 2rem 0; } }
main section h2, main section h3 { display: inline-block; font-size: 1.75rem; color: #795548; }
main section:nth-child(odd) { background-color: #F8F5F0; }
main section:nth-child(odd) h2 { color: #555555; }
main section:nth-child(even) { background-color: #fff; }

#news .content { padding: 1.5rem; }
#news .content ul { background-color: #fff; margin-top: 2rem; padding: 1rem 2rem 1rem; width: 50%; display: inline-block; text-align: left; list-style-type: none; }
#news .content ul li { line-height: 3rem; border-bottom: 1px solid #ccc; }
#news .content ul li:last-child { text-align: center; }
#news .content ul li:last-child a { display: block; color: #ccc; text-decoration: none; }

#tutorial .content ul { list-style-type: none; padding: 0; }
#tutorial .content ul li { display: inline-block; margin: 1rem 0; }
#tutorial .content ul li a { display: block; margin: 0 2rem; box-shadow: 7px 7px 0 #454545; }
#tutorial .content ul li a img { vertical-align: bottom; }

#participation, #community .content { text-align: center; }
#participation ul, #community .content ul { padding: 0 0 2rem; margin: 0 auto; list-style-type: none; }
#participation ul.distro, #participation ul.devin, #community .content ul.distro, #community .content ul.devin { max-width: 800px; }
#participation ul.distro li, #participation ul.devin li, #community .content ul.distro li, #community .content ul.devin li { display: inline-block; margin: 1rem 1.5rem; min-width: 12.5%; }
#participation ul.distro li a, #participation ul.devin li a, #community .content ul.distro li a, #community .content ul.devin li a { display: block; padding: 1rem; width: 9rem; text-decoration: none; }
#participation ul.distro li a div strong, #participation ul.devin li a div strong, #community .content ul.distro li a div strong, #community .content ul.devin li a div strong { font-size: 1.5rem; }
#participation ul.community, #participation ul.other, #community .content ul.community, #community .content ul.other { width: 50%; text-align: left; }
@media screen and (max-width: 900px) { #participation ul.community, #participation ul.other, #community .content ul.community, #community .content ul.other { width: 80%; } }
@media screen and (max-width: 490px) { #participation ul.community, #participation ul.other, #community .content ul.community, #community .content ul.other { width: 100%; } }
#participation ul.community li, #participation ul.other li, #community .content ul.community li, #community .content ul.other li { border-bottom: 1px solid #ccc; margin: 0 1rem; }
#participation ul.community li:first-child, #participation ul.other li:first-child, #community .content ul.community li:first-child, #community .content ul.other li:first-child { border-top: 1px solid #ccc; }
#participation ul.community li a, #participation ul.other li a, #community .content ul.community li a, #community .content ul.other li a { display: block; padding: 1rem; font-size: 1.25rem; line-height: 1.5rem; text-decoration: none; }
#participation ul.community li a .title, #participation ul.other li a .title, #community .content ul.community li a .title, #community .content ul.other li a .title { color: #694a3e; font-weight: 600; }
#participation ul.community li a .description, #participation ul.other li a .description, #community .content ul.community li a .description, #community .content ul.other li a .description { color: #454545; }

@media screen and (max-width: 490px) { #about { padding: 2rem 1rem; } }
#about ul { display: inline-block; text-align: left; }
#about a { color: #795548; }