html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background-color: #242424;
}

.container-fluid {
    display: flex;
    justify-content: center;
     align-items: center;
    height: 100vh;
    padding: 10px;
    margin: 0px;
    z-index: 10;
}
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 90%;
  border: 1px solid black;
  border-radius: 20px;
  background-color: rgb(112, 112, 112);
  overflow: hidden;
  z-index: 10;
}
.col-lg-12 {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 100%;
    
}
video{
    width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: 20px;
}


.folder{
    display: flex;
    height: 30%;
    position: absolute;
    z-index: 10;
    transition: transform 0.4s ease;
    cursor: pointer;
}

.f1{
top: 10%;
    left: 0px;
    transform: translate(-85%);
    animation: slide-in-left 3.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation-fill-mode: none;

}



.f2{
    
    bottom: 10%;
    left: 0px;
    transform: translate(-85%);
    animation: slide-in-left 3.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s both;
    animation-fill-mode: none;
}

.f3{
    top: 10%;
    right: 0px;
    transform: translate(85%);
    animation: slide-in-left2 3.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.0s both;
    animation-fill-mode: none;
}
.f4{
    bottom: 10%;
    right: 0px;
    transform: translate(85%);
    animation: slide-in-left2 3.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
    animation-fill-mode: none;
}
.flip{
transform: scaleX(-1);
}
 .modal-dialog {
    margin: 10px auto;
  }
  .folder:hover{
    transform: translate(0);
    transform: rotate(10deg);
}
.f2:hover{
    transform: rotate(-10deg);
}
.f3:hover{
    transform: rotate(-10deg);
}

.notes{
  top: 1%;
    left: 0px;
  display: flex;
    height: 10%;
    position: absolute;
    z-index: 10;
    transition: transform 0.4s ease;
    cursor: pointer;
    
}
.note-img{
  width: 10 0%;
}
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-700px);
            transform: translateX(-700px);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  75%{
     -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-85%);
            transform: translateX(-85%);
    opacity: 1;
  }
}
@-webkit-keyframes slide-in-left2 {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left2 {
  0% {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  75%{
     -webkit-transform: translateX(100px);
            transform: translateX(100px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(85%);
            transform: translateX(85%);
    opacity: 1;
  }
}
textarea{
  resize: vertical;
  overflow: auto;
  width: 100%;
  
  overflow-wrap: break-word;
}


use{
  animation:move-forever 5s linear infinite;
  &:nth-child(2){ animation-duration:2.5s; animation-delay:-1.5s; }
  &:nth-child(1){ animation-duration:5s}
}

@keyframes move-forever{
   0%{transform: translate(-2px , 0)}
 100%{transform: translate( 0px , 0)} 
}


body{margin:0; background-color: #123;}
svg{
  position: absolute;
    width:100vw;
    height:50vh;
    bottom: 0px;
    z-index: 0;
}
.modal-body{
  overflow: hidden;
  
}

.full{
  background-image: url("../img/fullscreen.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0px !important;
}

.tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 9999;
}

.full:hover .tooltiptext {
  visibility: visible;
}