@font-face {
  font-family: 'vtks';
  src: url('/css/fonts/Vtks\ Focus.ttf') format('truetype'); /* Specify the path to your font file */
}

.lobster {
  font-family: "Lobster", sans-serif;
}
.performance {
  cursor: s-resize;
}
.swipe {
  cursor: w-resize;
}
#about {
  text-align: center;
  filter:opacity(1.0);
}

#about p {
  margin-left: auto;
  margin-right: auto;
  color:black;
  line-height: 2em;
  width:600px;
  max-width: 80%;
}
.bottom-left{
  opacity: 1;
  filter: invert(1);
  bottom:20px;
}
.botton-left:hover {
  filter:invert(0) !important;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

#about {
  flex: 1 0 30%;
}

#more {
  flex: 2 0 40%;
  text-align: center;
}
.video-subtext {
  color:black;
}

/*.divider {
  margin-left: 5%;
  margin-right: 5%;
}*/
#description {
  text-align: left;
  font-size: 2em;
  line-height: 2em;
  font-weight: 400;
  font-style: normal;
  padding-left: 5%;
  padding-right: 5%;
}

#headshot {
    max-width:90%;
    border-radius: 0px 0px 1em 1em;
}
#welcome {
  text-align: left;
  font-size: 2em;
  line-height: 2em;
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
  padding-left: 5%;
  padding-right: 5%;
}
.whitestrip {
  background-color: white;
  box-shadow: 0 0em 1em black;
  margin-left: 10%;
  margin-right: 10%;
  overflow-y: auto;
  height: 90vh;
  max-width: 700px;
}
.performance video{
  width: 800px;
  max-width:90%;
}
.performance img{
  transition: transform .2s ease-in-out;
  width: 800px;
  max-width:100%;
}
.performance p {
  text-align: left;
  direction: ltr;

}
.close {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top:0px !important;
  padding-bottom: 0.5em !important;
}
.date {
  text-align: right !important;
  font-style: italic;
  margin-top: 0px;
  padding-top:0px;
}
#vildskud, #union, #aha, #ku, #ncc, #absalon, #denandenside, #nordicpioneer, #faroe, #dfl, #hm, #nuqi {
  width: 15%;
  z-index: 10;
  background-color: white;
  border-radius: 50%;
  position: relative;
  margin-top: -5vh;
}
#aabenskole, #abf, #roskilde, #DR, #YSL, #ddl {
  width: 15%;
  z-index: 10;
  position: relative;
  margin-top: -5vh;
}
.badge:hover {
  transform: scale(1.05);
  -webkit-filter:drop-shadow(0px 0px 3px #222);
  filter: drop-shadow(0px 0px 3px #222);
  cursor: default;
}

.fullwidth{
  max-width: 100% !important;
}
@media (min-width:800px) {
    #about {
        transition: .3s ease-in-out;
    }
    #about:hover {
        transform: scale(1.1) translateY(3%);
    }
    #more {
        transition: .3s ease-in-out;
    }
    #more:hover{
        transform: scale(1.1) translate(-3%, 3%);
    }
}
/* For mobile devices */
@media (max-width: 800px) {
  body {
    overflow-y: scroll;
  }

  .container {
      flex-direction: column;
  }
  #about, #more {
      flex: 1 0 auto;
      width: 100%;
  }
  #about p {
    max-width: 80%;
    line-height:2em;
    font-size:1em;
  }
  .whitestrip {
      margin-left: 5%;
      margin-right: 5%;
      padding:0%;
  }
  
  #description {
      margin-left:5%;
      margin-right:5%;
      text-align: left;
      font-size: 1.2em;
      line-height: 2.5em;
      min-height:50vh;
  }
}