@font-face{
  font-family: 'Basteleur Bold';
  src: url('fonts/Basteleur/webfonts/Basteleur-Bold.woff2') format('woff2'),
       url('fonts/Basteleur/webfonts/Basteleur-Bold.woff') format('woff'),
       url('fonts/Basteleur/ttf/Basteleur-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face{
  font-family: 'Minipax';
  src: url('fonts/Minipax/webfonts/Minipax-Regular.woff') format('woff'),
       url('fonts/Minipax/webfonts/Minipax-Regular.woff2') format('woff2'),
       url('fonts/Minipax/ttf/Minipax-Regular.ttf') format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
@font-face{
  font-family: 'Minipax';
  src: url('fonts/Minipax/webfonts/Minipax-Bold.woff') format('woff'),
       url('fonts/Minipax/webfonts/Minipax-Bold.woff2') format('woff2'),
       url('fonts/Minipax/ttf/Minipax-Bold.ttf') format('truetype');
  font-display: swap;
  font-weight: bold;
  font-style: normal;
}
@font-face{
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('fonts/Inter/Inter-roman.var.woff2') format('woff2');
}
:root{
  --primary: #F3632D;
  --background: #f6f7f2;
  --logo-font: 'Basteleur Bold', serif;
  --serif-font: 'Minipax', serif;
  --sans-serif-font: 'Inter var', verdana, arial, sans-serif, helvetica;
}
*{
  box-sizing: border-box;
}
html, body{
  margin: 0;
  padding: 0;
}
body{
  background: var(--background);
}
header{
  text-align: center;
}
header .logo{
  margin: 22px 10px;
  font-size: 1.8em;
  font-weight: bold;
  font-family: var(--logo-font);
  background: var(--background);
  width: auto;
  padding: 0 10px;
}
header .logo a{
  text-decoration-line: underline overline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 3px;
  text-decoration-skip-ink: all;
}
u{
  text-decoration-line: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 3px;
}
main{
  border: 1px solid black;
  margin: 0 15px 20px 15px;
  padding: 15px 20px 35px 20px;
  max-width: 1100px;
  text-align: left;
}
main *{
  max-width: 100%;
}
main.simple{
  padding: 55px 20px;
  text-align: center;
}
h1, h2, h3, h4, h5, h6{
  font-family: var(--serif-font);
}
h1{
  font-size: 2.5em;
  font-weight: 600;
  margin: 15px 0;
}
h2{
  font-size: 2.2em;
  margin: 45px 0 10px 0;
}
h3{
  font-size: 1.8em;
  margin: 15px 0 10px 0;
  font-family: var(--logo-font);
}
p{
  font-size: 1.2em;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 0 12px 0;
}
p.soon{
  margin: 0 0 10px 0;
}
a{
  color: inherit;
  text-decoration: underline;
}
footer{
  margin: 0 auto 20px auto;
  padding: 0;
  max-width: 1100px;
}
footer p{
  font-size: 0.9em;
  text-align: center;
}
footer a{
  text-decoration: none;
}
footer a:hover{
  text-decoration: underline;
  text-decoration-style: wavy;
}
button{
  display: inline-block;
  margin: 10px 5px;
  padding: 8px 20px;
  color: white;
  background: var(--primary);
  border: 3px solid var(--primary);
  cursor: pointer;
  border-radius: 90px;
  font-weight: bold;
  font-size: 1.3em;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--sans-serif-font);
}
button:hover{
  background: transparent;
  color: var(--primary);
}
.hero{
  text-align: center;
  margin: 35px 0 60px 0;
}
details{
  border: 1px solid black;
  border-radius: 20px;
  display: block;
  padding: 20px;
  margin: 10px 0 15px 0;
  text-align: left;
}
details summary{
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
details p{
  margin-top: 20px;
}
.badge-wrapper{
  background: white;
  padding: 20px;
  border-radius: 20px;
}
.badge-wrapper a{
  text-decoration: none;
}
.badge-wrapper .badge{
  width: 120px;
  max-width: 100%;
  margin: 10px;
}
.badge-wrapper textarea{
  resize: none;
  width: calc(100% - 20px);
  min-height: 120px;
  margin: 10px 20px 10px 0;
}
.icon{
  height: 1.5em;
  width: 1.5em;
  display: inline-block;
  margin: 0 .05em 0 0;
  vertical-align: -0.3em;
}
@media(max-width: 40em){ /* MOBILE */
  details{
    padding: 12px 16px;
  }
}
@media(min-width: 40em){ /* DESKTOP */
  .row{
    width: 100%;
    display: table;
    table-layout: fixed;
  }
  .col{
    display: table-cell;
    vertical-align: top;
  }
  .col:not(:last-child){
    padding-right: 15px;
  }
  .col:not(:first-child){
    padding-left: 15px;
  }
  header .logo{
    font-size: 2.5em;
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    z-index: 99;
  }
  main{
    margin: 45px auto 20px auto;
    padding: 40px 25px 45px 25px;
    text-align: center;
  }
  h1{
    font-size: 3.4vw;
    font-weight: 900;
  }
  h3{
    font-size: 2em;
  }
  p{
    font-size: 1.6em;
  }
  footer .col:first-child p{
    text-align: left;
  }
  footer .col:last-child p{
    text-align: right;
  }
  .hero{
    margin: 80px 0 70px 0;
  }
}