@font-face {
   font-family: 'Bebas';
   src: url('BebasNeue-Regular.ttf') format('truetype');
}

html {
   -webkit-font-smoothing: antialiased;
   font-family: 'Helvetica', sans-serif;
   font-weight: bold;
   font-size: 16px;
}

a {
   color: inherit;
}

p {
   line-height: 1.33;
}

p a {
   margin: 0 .125em;
}

p:not(:last-child) {
   margin-bottom: .66em;
}

h1 {
   position: absolute;
   opacity: 0;
}

#logo {
   position: fixed;
   top: 0;
   left: 50%;
   transform: translate(-50%, 0);   
   text-align: center;
}

#logo img {
   height: 8rem;
}

#acts {
   position: fixed;
   top: 50%;
   left: 50%;
   height: calc(100vh - 21rem);
   transform: translate(-50%, -50%);   
   text-align: center;
   box-sizing: border-box;
   padding: 1rem;
   background-color: black;
}

footer {
   position: fixed;
   bottom: 2rem;
   left: 2rem;
   right: 2rem;
   text-align: center;
}

.newsletter {
   align-items: center;
   display: flex;
   justify-content: center;
   gap: .25em;
   margin-top: 1rem;
}

#mc_embed_signup_scroll {
   display: flex;
   gap: .25em;
}

input.email {
   padding: .25em;
}

.mc-field-group {
   position: relative;
}

#mc_embed_signup_scroll input {
   font: inherit;
   font-weight: normal;
   border-radius: 0;
   border: 1px solid;
   border-radius: 0;
   background: transparent;
   color: black;
   appearance: none;
   padding: 0.33rem .5rem 0.36rem;
   line-height: 1.25;
}

div.mce_inline_error {
   font-weight: normal;
   position: absolute;
   top: 100%;
   font-size: .775em;
   text-transform: uppercase;
   padding: .25rem;
   color: red;
   white-space: nowrap;
}

div#mce-responses {
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   font-size: .775em;
   color: green;
   font-weight: normal;
   text-transform: uppercase;
}

#mc_embed_signup_scroll input::placeholder {
   font-weight: normal;
}

input#mc-embedded-subscribe {
   border: 1px solid;
   border-radius: 0;
   background: transparent;
   color: black;
   appearance: none;
   padding: 0.33rem .5rem 0.36rem;
   line-height: 1.25;
}

@media (max-width: 700px) {
   #mc_embed_signup_scroll {
      flex-direction: column;      
      gap: .33em;
   }

   div.mce_inline_error {
      top: auto;
      bottom: 100%;
   }
}

@media (max-aspect-ratio: 1 / 1) {
   #logo {
   }

   #logo,
   #acts,
   footer {
      position: static;
      transform: none;
      text-align: center;
      width: 100%;
   }

   #acts {
      margin-top: 2rem;
      margin-bottom: 2rem;
      width: 100vw;
      height: auto;
   }

   footer {
      padding-bottom: 2rem;
   }
}