@font-face {
  font-family: "BrauerLLWeb-Black";
  src: url("./fonts/BrauerLLWeb-Black.woff2") format("woff2");
}

@font-face {
  font-family: "BrauerLLWeb-Black";
  src: url("./fonts/BrauerLLWeb-Black.woff") format("woff");
}

.col-1 {
  width: 23%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-header {
  width: 30.5%;
}

.col-4 {
  width: 100%;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

body {
  background-color: white;
  height: 100%;
  font-family: serif;
  color: black;
  margin-top: 20px;
  margin-left: 25px;
  margin-right: 0px;
  margin-bottom: 20px;
  overflow: auto;
}

html {
  width: 100%;
  height: 100%;
}

.main {
  display: flex;
}

.info {
  float: left;
  position: relative;
  padding-right: 10px;
  margin-bottom: 20px;
  margin-top: 3px;
}

.about {
  font-family: 'BrauerLLWeb-Black', 'serif';
  letter-spacing: 0.01em;
  font-size: 1.4vw;
  line-height: 1.4vw;
  position: fixed;
  width: 22%;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  font-style: ;
  color: rgb(86, 130, 3);
  transition: color .30s ease;
}

.info-small {
  display: none;
}

.about-small {
  display: none;
}

@media screen and (max-width:1000px) {
  .col-4 {
    width: 95%;
  }

  body {
    margin-right: 0px;
    font-size: 13px;
    line-height: 19px;
  }

  .info {
    display: none;
  }

  .main {
    display: block;
  }

  .info-small {
    margin-left: 5px;
    display: inline-block;
    height: 100%;
    margin-bottom: 20px;
  }

  .about-small {
    display: inherit;
    font-family: 'BrauerLLWeb-Black', 'serif';
    font-size: 4vw;
    line-height: 4.4vw;
  }

  .image {
    width: 100%;
    display: inline-block;
    margin-top: 5px;
    float: left;
    height: 100%;
    margin-bottom: 0px;
  }
}