/* Imperyum / Nath */
/* Global Styling */
html,
body {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   background: rgb(45, 45, 45);
   background: -moz-linear-gradient(32deg, rgba(45, 45, 45, 1) 0%, rgba(33, 33, 33, 1) 28%, rgba(0, 0, 0, 1) 100%);
   background: -webkit-linear-gradient(32deg, rgba(45, 45, 45, 1) 0%, rgba(33, 33, 33, 1) 28%, rgba(0, 0, 0, 1) 100%);
   background: linear-gradient(32deg, rgba(45, 45, 45, 1) 0%, rgba(33, 33, 33, 1) 28%, rgba(0, 0, 0, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d2d2d", endColorstr="#000000", GradientType=1);
   width: 100%;
}


/* Specific Styling */

.wrapper {
   width: 100vw;
}

.background-video {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   text-align: center;
   width: fit-content;
   margin: auto;
   max-height: 100vh;

}

.background-video video {
   width: 100%;
}

.background-effect,
.window-effect {
   position: absolute;
   cursor: pointer !important;
}


.background-effect img,
.window-effect img {
   width: 100%;
}

#background-effect-1 {
   top: 5%;
   left: 35%;
   width: 3%;
}

#background-effect-2 {
   top: 55%;
   left: 3%;
   width: 4%;
}

#background-effect-3 {
   bottom: 12%;
   right: 35%;
   width: 4%;
}

#window-effect-1 {
   bottom: 10%;
   right: 7%;
   width: 20%;
}

#window-effect-2 {
   top: 5%;
   left: 2%;
   width: 27%;
}

.video {
   position: absolute;
   top: 0;
   width: 100%;
   display: none;
   z-index: 9999;
   max-height: 100vh;
}

.video video {
   width: 100%;
}

.added-video {
   display: none;
}

#video-1 {
   transform: translate(0) scale(0.15);
   opacity: 0;
   transition: 1s;
}

#video-2 {
   transform: translate(0) scale(0.2);
   opacity: 0;
   transition: 1s;
}