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

*{
  font-family: times !important;
  scroll-behavior: unset;
}

@font-face {
  font-family: times;
  src: url(fonts/times.woff);
}

:root {
  --bg:      #f4f1ea;
  --black:   #111111;
  --white:   #faf7f2;


  --yellow:  #ff4000;
  --pink:    #ff4fd8;
  --blue:    #2864ff;
  --green:   #c60095;
  --orange:  #ff8c00;
  --teal:    #00bfb3;
  --purple:  #7c3aed;

  --greenBT:   #00d26a;
  --footer-h: 88px;
}

@media (orientation: landscape){
  html, body {
    width: 100%;
    min-height: 100%;
    background: var(--bg);
    color: var(--black);
    font-family: "Times New Roman", serif;
  }

  body {
    padding: 24px;
    padding-bottom: calc(var(--footer-h) + 40px);
    overflow-x: hidden;
    font-size: 22px;
  }

  h1 {
      font-size: 110px;
      line-height: .86;
      font-weight: normal;
      letter-spacing: -0.05em;
      margin-bottom: 24px;
    }
}
  /* RESPONSIVE */
  
  @media (orientation: portrait){
    html, body {
      min-height: 100%;
      background: var(--bg);
      color: var(--black);
      font-family: "Times New Roman", serif;
    }
  
    body {
      padding-bottom: calc(var(--footer-h) + 40px);
      overflow-x: hidden;
      font-size: 16px;
    }
  
    h1 {
        font-size: 72px;
        line-height: .86;
        font-weight: normal;
        letter-spacing: -0.05em;
        margin-bottom: 24px;
      }
  }