html,body {
  width: 100%;
  max-width: 100%;
}


@font-face {
  font-family: "HankenGrotesk-Medium";
  src: url("font/HankenGrotesk-Medium.woff");
}
/* MOBILE */

@media screen and (max-width: 500px) {
  .verticalline {
    border: none !important;
  }
  h1 {
    text-indent: 1rem !important;
  }
  .social {
    position: relative !important;
    display: none;
  }
  .row {
    padding: 1rem 0 !important;
  }
}

html {
  min-height: 100%;
}

body {
  background-size: auto 100%;
}

.line {
  width:100%;
  background-color: blue;
  height: 0.3rem;
}

.titleContent {
  display: flex;
  position: absolute;
  width: 100%;
  padding-bottom: 5rem;
  background-color: #0D007D;
  -webkit-mask-image: -webkit-gradient(linear, center bottom, center top, color-stop(0,rgba(0,0,0,0)), color-stop(0.8,rgba(0,0,0,1)));
  z-index: 2;
}

.title {
  padding: 20px;
  color: white;
}

.social {
  padding: 20px;
  right: 2rem;
  position: absolute;
}

.verticalline {
  border-right: 1px solid black;
}

.row {
  padding: 2rem 5rem;
  margin: 0!important;
}

.carousel {
  width: 100%;
  height: 60%;
  padding-top: 1rem;
  position: fixed;
  text-align: center;
}

.listelement {
  text-decoration: none;
  list-style: none;
}
.listelement :hover {
  text-decoration: none;
}
h1 {
  font-family: "Inconsolata",monospace !important;
  text-indent: 6rem;
  margin-bottom: 0px;
  margin-block-end: 0px !important;
  letter-spacing: 0.2rem;
  text-align: left;
}

h2 {
  font-family: "HankenGrotesk-Medium",sans-serif !important;
}

footer {
  width: 100%;
  text-indent: 3rem;
}

footer a {
  font-family: "HankenGrotesk-Medium",sans-serif;
  color: black;
}

.middle {
  margin: auto 0;
}