* {
    font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    overflow-x: hidden;
}

:root {
    --bg: #303952;
}

:focus {
    outline: none;
}

button, .loadButton {
    background-color: #FFFFFF;
    border: 2px solid #95afc0;
    border-radius: .25rem;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    position: relative;
    transition-property: background-color, padding-top, padding-bottom;
    transition-duration: 0.2s;
}

button:hover, .loadButton:hover:not(.waiting) {
    background-color: #95afc0;
}

button:active, .loadButton:active:not(.disabled) {
    padding-top: calc((.875rem - 1px) / 2);
    padding-bottom: calc((.875rem - 1px) / 2);
}

button:disabled {
    opacity: 0.2;
    background-color: #95afc0;
    cursor: not-allowed;
}

.disabled {
    opacity: 0.2;
    background-color: #95afc0;
    cursor: not-allowed;
}

a {
    border: 2px solid #95afc0;
    border-radius: .25rem;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    position: relative;
    color: white;
    transition-property: background-color, color;
    transition-duration: 0.2s;
}

a:hover {
    background-color: #95afc0;
    color: black;
}

input {
    background-color: #FFFFFF;
    border: 2px solid #95afc0;
    border-radius: .25rem;
    color: rgba(0, 0, 0, 0.85);
    cursor: text;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    position: relative;
}

.input-number {
    width: 100px;
}

.bottom {
    background-color: var(--bg);
    padding: 20px;
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    bottom: 0;
}

.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
  
.navbarChild {
    display: inline;
    margin: 10px 10px;
}

.videoMenu {
    padding: 10px;
    position: absolute;
    right: -40%;
    top: 0;
    height: 100%;
    width: 40%;
    z-index: 1;
    background-color: rgba(34, 36, 59, 1);
    overflow-y: scroll;
    transition-duration: 0.5s;
    display: none;
}

.videoList {
    list-style-type: none;
    padding: 0;
}

.videoListChild {
    margin-bottom: 10px;
    position: relative;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    background-color: var(--bg);
    border-radius: .25rem;
    color: white;
    text-align: left;
}

.fileGenerator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg);
    display: grid;
    place-items: center;
    overflow: auto;
    z-index: 5;

}

.fileGeneratorMenu {
    border-radius: .25rem;
    text-align: center;
    color: white;
    background-color: #212738;
    margin: 0;
    
}

.backBtn {
    position: absolute;
    padding: 0 30px;
    left: 0;
    top: -20px;
    font-size: 30px;
    z-index: 6;
    color: white;
    cursor: pointer;
    transition-duration: 0.2s;
}

.backBtn:hover {
    color: #95afc0;
}

.welcome {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg);
    display: grid;
    place-items: center;
    overflow: auto;
    z-index: 10;

}

.welcomeMenu {
    padding: 50px;
    border-radius: .25rem;
    text-align: center;
    color: white;
    background-color: #212738;
    
}

.bottomSection {
    position: absolute;
    bottom: 0;
    padding: 5px;
    border-radius: .25rem;
    text-align: center;
    color: white;    
}

.close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    border-radius: .25rem;
    color: #95afc0;
    text-align: right;
  }
  
.close:hover {
    color: white;
}

.player {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.progressBar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #95afc0;
    width: 0;
    z-index: 0;
    transition-duration: 2s;
    transition-property: width;
    transition-timing-function: linear;
}

.preview {
    width: 100%;
}

.animate-bottom {
    position: relative;
    animation-timing-function: ease-out;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 0.3s;
    animation-name: animatebottom;
    animation-duration: 0.3s
}

@-webkit-keyframes animatebottom {
    from { bottom:-50px; opacity:0 } 
    to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
    from{ bottom:-50px; opacity:0 } 
    to{ bottom:0; opacity:1 }
}