@font-face {
    font-family: elms-sans;
    src: url("./fonts/font.ttf");
}
@font-face {
    font-family: yuanti;
    src: url("./fonts/yuanti.ttf");
}

@keyframes initial_window {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes InitialAnimation {
    from {
        opacity: 0;
        transform: scale(0.6);
        pointer-events: none;
    }
    to {
        opacity: 0.5;
        transform: scale(1);
    }
}

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
    background: linear-gradient(to right, rgb(169, 119, 216) 50%, rgb(156, 156, 253));
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: elms-sans, yuanti, sans-serif;
}

.window {
    display: inline;
    text-align: center;
    width: 50%;
    height: 50%;
    animation-name: initial_window;
    animation-duration: 500ms;
    animation-iteration-count: initial;
}

@media (max-width: 767px) {
    .window {
        width: 100%;
        height: 75%;
    }
}

.window .head {
    font-size: 18px;
    display: flex;
    background-color: rgba(206, 206, 206, 0.637);
    width: 100%;
    height: auto;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    align-items: center;
    padding: 8px;
}

.window .head .window_title {
    display: flex;
    margin: 0;
    width: 100%;
    align-items: center;
    justify-content: left;
    background: linear-gradient(to right, rgb(4, 166, 230), rgb(204, 185, 255));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; 
    user-select: none;
}

.window .head .window_title img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    margin-left: 10px;
    pointer-events: none; 
}

.window .head .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: gainsboro;
    margin-right: 5px;
    font-size: 10px;
    cursor: default;
}

.window .dir_path {
    background-color: rgba(240, 255, 255, 0.808);
    height: 20px;
    width: 100%;
    padding: 8px;
}

.window .dir_path p {
    display: flex;
    margin: 0;
    width: 100%;
}

.window .dir_path a {
    color: rgb(0, 206, 206);
    cursor: pointer;
    display: none;
}

.window .dir_path p span {
    width: 100%;
    color: gray;
    user-select: none;
    cursor: text;
}

.window .body {
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 8px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 100%;
    height: 100%;
}

.window .body .list {
    display: inline;
    width: 95%;
    user-select: none;
}

.window .body .list p {
    animation: InitialAnimation 400ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    color: gray;
    opacity: 0.5;
}

.window .body .list .files {
    cursor: pointer;
    pointer-events: auto;
    border-style: none;
    opacity: 0.5;
    display: flex;
    align-items: center;
    border-radius: 25px;
    width: 98%;
    height: 8%;
    text-align: left;
    padding: 10px;
    margin: 5px;
    background-color: white;
    will-change: opacity, transform;
    animation: InitialAnimation 400ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transition: opacity 300ms ease, transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.window .body .list .files:hover {
    opacity: 1;
}

.window .body .list .files:active {
    transform: scale(0.95);
    opacity: 0.8;
}

.window .body .list .files .filename {
    animation: none;
    font-size: 14px;
    color: black;
    margin: 0;
    opacity: 1;
    width: 100%;
}

.window .body .list .files .filename span {
    color: gray;
}

.window .body .list .files i {
    margin-left: 10px;
    margin-right: 5px;
    font-size: 20px;
}

.window .body .list .files .filesize {
    opacity: 1;
    width: auto;
    white-space: nowrap;
}

.window .body .error_page {
    display: none;
    width: 100%;
    height: 100%;
}

.window .body .error_page h1 {
    color: rgb(209, 5, 5);
}

.window .body .error_page p {
    font-size: 20px;
    color: gray;
}