html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
a{background-color:transparent}a:active,a:hover{outline-width:0}

body, html {
  height: 100%;
}

body {
  font-family: sans-serif;
  text-align: center;
  padding: 1em;
  background-image: url('bg.jpg');
  min-height: 100%;
  background-position: center;
  background-size: cover;
}

img {
  width: 100%;
}
.display-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.display-footer {
  text-align: center;
}

.animate-top {
  position: relative;
  animation: animatetop 1s;
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }

  to {
    top: 0;
    opacity: 1
  }
}

p {
  font-size: clamp(1rem, 2.5vw, 2rem);
  &.text-big {
    font-size: clamp(1.2rem, 5vw, 4rem);
  }
  color: #c16126;
}

.tldn a {
  color: #1a4b03;
  font-size: clamp(0.6rem, 2.5vw, 1rem);
  text-decoration: none;
  &.selected { font-weight: bold }
}