@font-face {
  font-family: Karrik;
  src: url('../src/Karrik-Regular.woff') format('woff');
  src: url('../src/Karrik-Regular.ttf') format('truetype-variations');
  font-weight: 400;
}

body, html {
  margin: 0;
  background: black;
  font-family: Karrik, sans-serif;
  letter-spacing: 0em;
  line-height: 2.75em;
  font-weight: 400;
  color: white;
  word-break: break-all;
  height: 100%;
}

.card {
  position: fixed;
  left: 3%;
  top: 1%;
  z-index: 11;

}

.info {
  position: fixed;
  left: 3%;
  bottom: 1%;
  z-index: 10;

}

.ct {
  margin: 3%;
  word-break: normal;
}

a {
  color: white;
  text-decoration: none;
  border-bottom: 1px solid;
}

a:hover {
  border-bottom: 2px solid;
}

h1 {
  font-size: 3em;
  font-weight: 400;
  line-height: 1em;
}

h2 {
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1em;
}

p {
  line-height: 1.1em;
}

.back {
  background-image: url("../src/Back.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  -webkit-animation: opback 10s;
  -moz-animation:    opback 10s;
  -o-animation:      opback 10s;
  animation:         opback 10s;
  z-index: -10;
}

@media only screen and (max-width: 800px) {
  h1 {
    font-size: 2.0em;
    line-height: 1em;
  }
  h2 {
    font-size: 1.5em;
    line-height: 1em;
  }
}

@media only screen and (max-width: 400px) {
  h1 {
    font-size: 1.5em;
    line-height: 1em;
  }
  h2 {
    font-size: 1.25em;
    line-height: 1em;
  }
}

@media (hover: none) and (pointer: coarse) {
}

@-webkit-keyframes opback {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes opback {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes opback {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes opback {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}