@font-face {
  font-family: Dosis;
  src: url(Fonts/Dosis-Regular.woff2);
  font-weight: normal;
}

@font-face {
  font-family: Dosis;
  src: url(Fonts/Dosis-Bold.woff2);
  font-weight: bold;
}

body {
    background-color: rgb(12, 12, 12);
    margin: 0px;
  } 
  
.parallax {
  position: relative;
  overflow: hidden;

}

.bg {
    position:fixed;
    background-color: rgb(12, 12, 12);
    background-image: url(Images/bg_lo.gif);
    width: 100%;
    min-height: 500vh;
    background-size: 128px;
    background-position: center -35px;
    margin: 0px;
    z-index: -2;
    background-repeat: repeat;
  } 

@media (max-width: 768px) {
  body {
    background-image: url("Images/bg_lo.png");
  }
}

  a:link {
        font-family: Dosis;
    font-weight: bold;
    text-align: center;
    color: rgb(224, 54, 202);
    filter: drop-shadow(0px 3px 2px black);
    font-size: 16px;
  }
  
  a:visited {
        font-family: Dosis;
    font-weight: bold;
    text-align: center;
    color: rgb(179, 25, 158);
    filter: drop-shadow(0px 3px 2px black);
    font-size: 16px;
  }
  
  a:hover {
        font-family: Dosis;
    font-weight: bold;
    text-align: center;
    color: rgb(240, 78, 218);
    filter: drop-shadow(0px 3px 2px black);
    font-size: 16px;
  }
  
  a:active {
        font-family: Dosis;
    font-weight: bold;
    text-align: center;
    color: rgb(179, 25, 158);
    filter: drop-shadow(0px 3px 2px black);
    font-size: 16px;
  }

  p {
    font-family: Dosis;
    font-weight: regular;
    text-align: center;
    color: white;
    filter: drop-shadow(0px 3px 2px black);
    font-size: 16px;
}

h2 {
    font-family: Dosis;
    font-weight: bold;
    text-align: center;
    color: white;
    filter: drop-shadow(0px 3px 2px black);
    z-index: -1;
}

.lighting {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(128, 128, 128));
    z-index: -2; 
    mix-blend-mode: multiply;   
    position: fixed;
}

.bggradient {
    width: 800px;
    height: 100vh;
    background-image: linear-gradient(to bottom, rgb(32, 32, 32), rgb(14, 13, 13));
    margin:auto;
    position:fixed;
    top: 50%;
    left: 50%;
    background-position: center;
    z-index: -1; 
    transform: translate(-50%, -50%);
    filter: drop-shadow(-8px 0px 10px black);

}

.topnav {
    position:fixed;
    top: 0;
    width: 100vw;
    background-color: #333;
    background-image: linear-gradient(to bottom, rgb(56, 47, 53), rgb(19, 17, 18));
    overflow: hidden;
    display: flex;
    justify-content: center;
    font-family: Dosis;
    font-weight: regular;
    z-index: 1;
    filter: drop-shadow(0px 3px 2px black);
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 4px 16px;
    text-decoration: none;
    font-size: 17px;
    
  }
  
  .topnav a:hover {
    background-color: #490840;
    background-image: linear-gradient(to bottom, #490840, rgb(19, 17, 18));
    color: white;
  }
  
  .topnav a.active {
    background-color: rgb(132, 16, 117);
    background-image: linear-gradient(to bottom, #861077, rgb(19, 17, 18));
    color: white;
  }

  .links {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;

  }

  .animated {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    filter: drop-shadow(-2px 2px 4px black);
  }

  .textcontainer {
    position:static;
    justify-content: center;
    text-align: center;
    width: 650px;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid rgb(77, 77, 77);
    border-radius: 8px;
    filter: drop-shadow(0px 3px 2px black);
  }

  .titlecontainer {
    position:static;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 150px;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid rgb(77, 77, 77);
    border-radius: 8px;
    filter: drop-shadow(0px 3px 2px black);
  }

  ul {
    font-family: Dosis;
    font-weight: regular;
    text-align: center;
    width: 300px;
    color: white;
    filter: drop-shadow(0px 3px 2px black);
    font-size: 16px;
    margin:auto;
  
  }
  
.slidecontainer {
  position: relative;
  aspect-ratio: 16 / 9;
  justify-content: center;
  margin: auto;
  text-align: center;
  width: 650px;
  overflow: hidden;
}

.slidecontainer video {
  margin-top: 5px;
  border-radius: 8px;
}