* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}


body {
    margin: 0;
    background: #111;
    color: #ddd;
}


nav {
    margin: 18px;
    padding: 25px;
    background: #202124;
    border-radius: 5px;

    display: flex;
    justify-content: center;
    gap: 60px;
}


nav a {
    color: #ddd;
    text-decoration: none;
    font-size: 20px;
}


.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    padding: 20px 70px;
}


.card {
    background: #202124;
    height: 230px;

    border-radius: 5px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    padding: 20px;
}


.card h2 {
    font-size: 25px;
}


.card p {
    font-size: 18px;
}


button {

    width: 290px;
    height: 38px;

    background: #59616b;
    color: white;

    border: none;
    border-radius: 2px;

    font-size: 16px;

    cursor: pointer;
}


button:hover {
    background: #707985;
}

.file-manager {

    padding:40px;

}


.file {

    background:#202124;

    margin:10px;

    padding:10px;

    border-radius:5px;

    display:flex;

    gap: 10px;
    
    align-items:center;

}


.file button {

    width:120px;

}

#storageBar {
    width: 100%;
    height: 25px;
}


/* Standard grün */
#storageBar::-webkit-progress-value {
    background-color: #4CAF50;
}


/* Hintergrund */
#storageBar::-webkit-progress-bar {
    background-color: #ddd;
}


/* Orange */
#storageBar.warning::-webkit-progress-value {
    background-color: orange;
}


/* Rot */
#storageBar.danger::-webkit-progress-value {
    background-color: red;
}

#storageBar::-moz-progress-bar {
    background-color: #4CAF50;
}


#storageBar.warning::-moz-progress-bar {
    background-color: orange;
}


#storageBar.danger::-moz-progress-bar {
    background-color: red;
}

/* ==========================
   Login
========================== */

.login-body{

    margin:0;

    background:#111;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    height:100vh;

}


.login-container{

    width:400px;

    background:#202124;

    border-radius:10px;

    padding:40px;

    box-shadow:0 10px 25px rgba(0,0,0,.45);

}


.login-container h1{

    text-align:center;

    margin-bottom:10px;

}


.login-container p{

    text-align:center;

    color:#999;

    margin-bottom:30px;

}


.login-container form{

    display:flex;

    flex-direction:column;

    gap:18px;

}


.login-container input{

    width:100%;

    height:45px;

    padding:0 15px;

    border:none;

    border-radius:6px;

    background:#2f3136;

    color:white;

    font-size:16px;

}


.login-container input:focus{

    outline:2px solid #5f8dff;

}


.login-container button{

    width: 100%;

    height:45px;

    border:none;

    border-radius:6px;

    background:#4f7df3;

    color:white;

    font-size:17px;

    cursor:pointer;

    transition:.2s;

}


.login-container button:hover{

    background:#3e68d6;

}

.register-link {
    margin-top: 20px;
    text-align: center;
}


.register-link a {
    color: #4da3ff;
    text-decoration: none;
}


.register-link a:hover {
    text-decoration: underline;
}

/* Handy */
@media(max-width:900px){

    .grid {
        grid-template-columns: 1fr;
        padding:20px;
    }

}