/* layout */
body {
  font-size: 16px;
  color: white;
  background-color: black;
  font-family: sans-serif;
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* init */
p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

a {
  color: white;
}

input,
button {
  padding: 0.5em;
  border: 0;
  border-radius: 4px;
  background-color: white;
}

button {
  padding: 0.5em 2em;
  cursor: pointer;
}

input:focus,
button:focus {
  outline: 3px solid gray;
}

button:hover {
  opacity: 0.7;
}

/* utils */
.fsxs { font-size: 0.75em }
.fss  { font-size: 0.9em }
.fsl  { font-size: 1.1em }
.fsxl { font-size: 1.25em }

.mts { margin-top: 0.5em }
.mrs { margin-right: 0.5em }
.mbs { margin-bottom: 0.5em }
.mls { margin-left: 0.5em }
.mas { margin: 0.5em }
.mt { margin-top: 1em }
.mr { margin-right: 1em }
.mb { margin-bottom: 1em }
.ml { margin-left: 1em }
.ma { margin: 1em }
.mtl { margin-top: 2em }
.mrl { margin-right: 2em }
.mbl { margin-bottom: 2em }
.mll { margin-left: 2em }
.mal { margin: 2em }

.pt { padding-top: 1em }
.pr { padding-right: 1em }
.pb { padding-bottom: 1em }
.pl { padding-left: 1em }
.pa { padding: 1em }

.df      { display: flex }
.df.fc   { flex-direction: column }
.df.jcs  { justify-content: start }
.df.jce  { justify-content: end }
.df.jcc  { justify-content: center }
.df.jcsa { justify-content: space-around }
.df.jcsb { justify-content: space-between }
.df.ais  { align-items: start }
.df.aie  { align-items: end }
.df.aic  { align-items: center }

.df.gs { gap: 0.5em }
.df.g  { gap: 1em }
.df.gl { gap: 2em }

.tac { text-align: center }