body { font-size:1rem; color:#fff; background-color:#323232; line-height:2rem; }

header + * { margin-top:2rem; }
header .navbar { background-color:#212121; }

a { text-decoration:underline; color:#f7d65a }
a:hover { text-decoration:underline; color:darkgoldenrod }
a:focus { outline:1px dotted #fff; }

h2 { font-size:1.8rem; line-height:150%; }
p { line-height:150%; }

.navbar-dark .navbar-nav .nav-link { color:#ddd; }
.navbar-dark .navbar-nav .nav-link:hover { color:#fff; }

.btn-primary { background-color:#827727; }
.btn-primary:hover { background-color:#000; text-decoration:none; }
.btn-primary:focus { background-color:#000; outline:1px dotted #fff; }

.cookie-banner { position:fixed; bottom:0; background-color:#000; color:#fff; text-align:center; z-index:10000; left:0; right:0; padding:0.5rem; }
.cookie-banner p { margin:0; }
.cookie-banner .buttons { margin-top:0.5rem; }
.cookie-banner button { background-color:#333; color:#fff; text-decoration:underline; padding:0.25rem 0.5rem; border:0; border-radius:0.25rem; }

#intro ul { list-style-type:none; margin-left:0; padding-left:0; }
#intro li { display:inline-block; vertical-align:middle; margin-right:1rem; }

#creators ul { list-style-type:none; margin-left:0; padding-left:0; }
#creators li { margin-bottom:3rem; padding:1.5rem; border:1px solid #444; }

#todo { text-align:left; }
#todo ul { list-style-type: disc; margin-left:1rem; padding-left:1rem; }
#todo li { margin-bottom:0.15rem; }

.card { box-shadow:0 10px 20px 0 rgba(0,0,0,0.4); background-color:#f7d65a; color:#000; transition:background-color .4s; }
.card:hover { background-color:darkgoldenrod; transition:background-color .4s; }
.card a { color:#000; }
.card a:focus { outline:1px dotted #000; }

span[role="link"] { cursor:pointer; }
span[role="link"]:focus { outline:1px dotted #fff; }

footer { background-color:#212121; margin-top:4rem; }
footer ul { list-style-type:none; margin-left:0; padding-left:0; }
footer li { display:inline-block; vertical-align:middle; margin-right:2rem; }
#copyright { background-color:#151515; }

@media (min-width:768px) {
    .grid { display:grid; grid-template-columns:repeat(2, 1fr); grid-column-gap:1rem; }
    .grid-2cols { grid-template-columns:repeat(2, 1fr); }
    .grid-4cols { grid-template-columns:repeat(2, 1fr); }
}

@media (min-width:991.98px) {
    .grid { grid-template-columns:repeat(3, 1fr); grid-column-gap:2rem; }
    .grid-2cols { grid-template-columns:repeat(2, 1fr); }
    .grid-4cols { grid-template-columns:repeat(4, 1fr); }
}