:root {
  font-family: "Sora", sans-serif;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  color: #444;
  background-color: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  margin: 0;
}
* {margin: 0; box-sizing: border-box;}

/* headers */
h1, h2, h3 {font-family: "Space Grotesk", sans-serif; font-weight: bold;}
h1 {color: #464040; font-size: 56px; text-align: center; margin-bottom: 32px;}
h2 {color: #504b4b; font-size: 42px; margin-bottom: 16px;}
h3 {color: #524848; font-size: 32px; margin-bottom: 16px;}

/* blocks */
.container {width: 100%;}
.main, .inner, .wide {max-width: 1024px; margin: 0 auto;}
.main, .wide {padding: 32px 18px 64px 18px;}
.inner {padding: 64px 64px;}
.inner h2 {text-align: center; margin-bottom: 32px;}
.post h1, .post h2, .post h3 {text-align: left; margin-bottom: 32px;}
.post h1 {font-size: 48px;}
.footer .inner {padding: 56px 18px;}
.center {text-align: center;}
p, li {margin-bottom: 0.6em;}
.data {font-size: 16px; color: #066; margin-top: 36px;}
header, main, footer, nav, section, article {display: block;}


/* links */
a {color: #000; text-decoration: none;}
a:hover {color: #e0d; text-decoration: underline;}


/* menus */
#menumobile {
  border: 0;
  padding: 0 18px;
  font-size: 32px;
  width: 100vw;
  height: 100vh;
  opacity: 96%;
  font-family: "Space Grotesk", sans-serif;
}
#menubut {
  display: none;
  padding-left: 18px; padding-right: 18px;
  background: linear-gradient(to right, #e0e0f0, #fdf0d0);
}
.menubut {
  cursor: pointer;
  padding: 16px;
  font-size: 20px;
  background-color: transparent;
  background: none;
  border: 0;
}
#navbar {
  font-size: 20px;
  font-family: "Space Grotesk", sans-serif;
  background: linear-gradient(to right, #e0e0f0, #fdf0d0);
}
#navbar-inner {
  max-width: 1024px; margin: 0 auto; padding: 16px 18px;
}
#menumobile a {display: block; padding: 0.6em 0;}
#navbar a {display: inline-block; padding: 0 0.2em;}
#menumobile a, #navbar a {color: #000; text-decoration: none;}
#menumobile a:hover, #navbar a:hover {color: #603; text-decoration: none;}


/* images */
.picture {text-align: center;}
.cover {text-align: center;}
.cover img {width: 320px; height: 512px; box-shadow: 3px 3px 6px 0px rgba(0, 14, 14, 0.5);}
.bi {font-size: 32px;}
.bi:hover {color: #e0d;}


/* flexboxes and grids */
.post {display: flex; align-items: flex-start; gap: 18px;}


/* block colors */
.latest {
  color: #fff;
  background-color: #303030;
  background-image: 
    radial-gradient(ellipse at 20% 100%, rgba(50, 190, 240, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(249, 135, 0, 0.4) 0%, transparent 50%),
    linear-gradient(to bottom, #000000 0%, #0d0f14 60%, #172554 90%);
  background-blend-mode: screen;
}
.latest h1{color:#ddd;}
.latest h2{color:#fff;}
.latest h3{color:#ff8200;}
.darker {
  color: #fff;
  background-color: #303030;
  background: linear-gradient(135deg, #202020 0%, #204050 60%, #3d4867 100%);
}
.darker-black {color: #ddd; background-color: #000000;}
.darker h1, .darker-black h1{color:#ddd;}
.darker h2, .darker-black h2{color:#fff;}
.darker h3, .darker-black h3{color:#ddf;}
.footer {
  color: #ccc;
  background-color: #101010;
  background: linear-gradient(135deg, #000 0%, #0b171d 60%, #191e2b 100%);
  font-size: 16px;
  text-align: center;
}


/* buttons and controls */
.more {text-align: center; margin-top: 48px;}
.more .button {margin-left: 3px; margin-right: 3px;}
.button {
  font: inherit;
  display: inline-block;
  border-radius: 6px;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s ease;
  border: 0;
}
.std {background-color: #222;}
.std:hover {background-color: #000;color: #fff;text-decoration: none;}
.get {background-color: #00aba0}
.get:hover {background-color: #00a08e;color: #fff;text-decoration: none;}


/* forms */
.green {color: #0b0; padding: 8px 0;}
.red {color: #d00; padding: 8px 0;}
.disappear {animation: 8.1s linear fadeout;}
@keyframes fadeout {
  0% {opacity: 1; transform: scale(1, 1);}
  80% {opacity: 1; transform: scale(1, 1);}
  99% {opacity: 0; transform: scale(1, 0.1);}
}
.textinput {
  margin: 0;
  max-width: 100%;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  color: #000;
  background-color: #f0f0f0;
  border: 1px solid #505050;
  border-radius: 6px;
  padding: 8px;
}
.smlabel {display: block; font-size: 14px; font-family: inherit;}
.textinput:hover {border: 1px solid #00d;}
.textinput:focus, .textinput:active {border: 1px solid #00d; outline: 0;}
.multiline {font-family: inherit; height: unset;}
.inputwrapper {margin: 10px 0; position: relative;}
.processor {
  margin: 20px;
  display: none;
  color: inherit;
  position: relative;
  background-color: transparent;
  height: 128px; width: 128px;
  border-radius: 50%;
}
.performingCircle {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  border-top: 16px solid #64f;
  border-right: 16px solid #208;
  border-left: 16px solid #208;
  border-bottom: 16px solid #208;
  animation: 1s linear 0s infinite rotate;
}
@keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
.performingMessage {
  position: absolute;
  width: 100%; top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

/* mobile */
@media screen and (max-width: 960px) {
  #menubut {display: block;}
  #navbar {display: none;}
}
@media screen and (max-width: 768px) {
  .post {flex-wrap: wrap;}
  .post div {flex: 1 1 100%;}
  .picture img {max-width:100%; height: auto;}
  .cover img {width: 100%; height: auto;}
  .inner {padding: 64px 18px;}
  .textinput {width: 100%;}
}