/* Main Styles für Niklas Nadidai Website */

body{
  background-color:black;
  margin:0px;
  padding:0px;
}
.box-top{
  z-index:2;
  position:fixed;
  top:10px;
  left:10px;
  width:calc(100% - 60px);
  padding:20px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}
.box-bot{
  z-index:2;
  position:fixed;
  bottom:10px;
  left:10px;
  padding:20px;
  width:calc(100% - 60px);
  text-align:right;
  opacity: 0;
  animation: fadeUp 0.6s ease-out forwards;
  animation-delay: 0.8s;
  will-change: opacity, transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.titel-1{
  font-family: brandon-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:36px;
  padding:5px;
  color:rgba(255,255,255,1);
}
.titel-2{
  font-family: brandon-grotesque, sans-serif;
  font-weight: 300;
  font-style: italic;
  position:relative;
  font-size:20px;
  padding:5px;

  color:rgba(255,255,255,0.5);
}

.titel-3{
  font-family: brandon-grotesque, sans-serif;
font-weight: 300;
font-style: normal;
position:relative;
}
a {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 300;
  font-style: normal;
  color:white;
  font-size:22px;
  text-decoration:none;

  opacity:0.8;
  padding:5px;
}
a:hover{
    text-decoration:none;
    opacity:1;
    cursor:pointer;
}
.video-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: url('../media/poster-Campus-Festival-Konstanz-Sony.png') center center / cover no-repeat;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Performance Optimierungen */

/* Optimierte Animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.logo-container {
    opacity: 0;
    animation: fadeUp 0.6s ease-out forwards;
    animation-delay: 0.2s;
    will-change: opacity, transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}