:root {
  --fs-1: 1rem;
  --fs-2: 1.4rem;
  --fs-3: 2.8rem;
  --fs-smaller: .9rem;
  --fs-small: .75rem;

  --clr-1: #dfdfdf;
  --clr-2: rgba(53, 53, 53, 0.8);
  --clr-3: rgba(170, 44, 44, 1.0);
}

/*********************
   Table of contents

1. Typography
2. Layout
3. Responsive
*********************/


*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: Roboto, sans-serif;
  font-size: var(--fs-1);
}

/*********************
    1. Typography  
*********************/

p {
  line-height: 1.5rem;
  margin: 1em 0px;
}

.title h1 {
  margin: 0;
  font-size: var(--fs-3);
  line-height: 100%;
  font-weight: 900;
  color: white;
}

.title p {
  margin: 0;
  text-transform: uppercase;
  color: white;
}

.fineprint {
  font-size: var(--fs-small);
  line-height: 1em;
  margin: .8em 0;
}

/*********************
    2. Layout  
*********************/

.flex-center {
  display: flex;
  align-items: center;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 10em;
  background-color: var(--clr-3);
  background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.1));
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em 2.5em;
}

.content {
  max-width: 60ch;
  padding: .5em
}

.lang {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5em 0 -.5em 0;
  font-family: 'Permanent Marker', cursive;
  background: var(--clr-2);
  color: white;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
}

/*********************
    3. Responsive  
*********************/

@media screen and (max-height: 500px) {
  .header {
    height: 7em;
  }
}

@media screen and (min-width: 960px) {
  .container {
    flex-direction: row;
  }
}