* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #f0f0f0;
 position: relative;
}

.wrapper {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 20px;
 position: relative;
}

.background { 
 background-size: cover; 
 background-position: center; 
 position: relative; 
 width: 100%;
 height: 100%;
}

.button-container {
 position: absolute;
 top: 20px;
 right: 20px;
 display: flex;
 gap: 10px;
 background-color: rgba(0, 0, 0, 0.5);
 border-radius: 10px;
 padding: 10px;
}

.homeb {
 position: absolute;
 top: 85%;
 left: 2%;
 background-color: black;
 border-radius: 10px;
 padding: 5%;
}

.homeb {
 appearance: button;
 background-color: #1899D6;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 box-sizing: border-box;
 color: #FFFFFF;
 cursor: pointer;
 display: inline-block;
 font-family: din-round,sans-serif;
 font-size: 15px;
 font-weight: 700;
 letter-spacing: .8px;
 line-height: 20px;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 8px 16px;
 text-align: center;
 text-transform: uppercase;
 touch-action: manipulation;
 transform: translateZ(0);
 transition: filter .2s;
 user-select: none;
 -webkit-user-select: none;
 vertical-align: middle;
 white-space: nowrap;
 width: 15%;
}

.homeb:after {
 background-clip: padding-box;
 background-color: #1CB0F6;
 border: solid transparent;
 border-radius: 16px;
 border-width: 0 0 4px;
 bottom: -4px;
 content: "";
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 z-index: -1;
}

.homeb,
.homeb:focus {
 user-select: auto;
}

.homeb:hover:not(:disabled) {
 filter: brightness(1.1);
 -webkit-filter: brightness(1.1);
}

.homeb:disabled {
 cursor: auto;
}

.homeb:active {
 border-width: 4px 0 0;
 background: none;
}

.button {
 background-color: rgba(255, 255, 255, 0.7);
 border: none;
 border-radius: 5px;
 padding: 10px 15px;
 margin: 5px;
 font-size: 16px;
 cursor: pointer;
 transition: background-color 0.3s;
}

.button:hover {
 background-color: rgba(255, 255, 255, 1);
}

.buttonFuture, .buttonEnd, .buttonPerma {
 font-size: 16px;
 font-weight: 200;
 letter-spacing: 1px;
 padding: 13px 20px 13px;
 outline: 0;
 border: 1px solid black;
 cursor: pointer;
 position: relative;
 background-color: rgba(0, 0, 0, 0);
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
}

.buttonFuture:after {
 content: "";
 background-color: #0cc2ff;
 width: 100%;
 z-index: -1;
 position: absolute;
 height: 100%;
 top: 7px;
 left: 7px;
 transition: 0.2s;
}

.buttonEnd:after {
 content: "";
 background-color: #a929c6;
 width: 100%;
 z-index: -1;
 position: absolute;
 height: 100%;
 top: 7px;
 left: 7px;
 transition: 0.2s;
}

.buttonPerma:after {
 content: "";
 background-color: #18d428;
 width: 100%;
 z-index: -1;
 position: absolute;
 height: 100%;
 top: 7px;
 left: 7px;
 transition: 0.2s;
}

.buttonFuture:hover:after, .buttonEnd:hover:after, .buttonPerma:hover:after {
 top: 0px;
 left: 0px;
}

@media (min-width: 768px) {
 .buttonFuture, .buttonEnd, .buttonPerma {
     padding: 13px 50px 13px;
 }
}

.Liste {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: rgba(0, 0, 0, 0.6);
 color: white;
 padding: 20px;
 border-radius: 10px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 list-style: none;
}

.Liste ul {
 margin: 0;
 padding: 0;
 text-align: center;
 font-size: 18px;
}

.album {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 justify-content: center;
 align-items: center;
 padding: 20px;
 background: rgba(255, 255, 255, 0.9);
 border-radius: 12px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.album img {
 width: 250px;
 height: auto;
 border: 3px solid #ccc;
 border-radius: 12px;
 transition: transform 0.2s ease;
}

.album img:hover {
 transform: scale(1.1);
}

#fullscreenContainer {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 justify-content: center;
 align-items: center;
 z-index: 1000;
}

#fullscreenContainer img {
 max-width: 90%;
 max-height: 90%;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
 cursor: pointer;
}

.box {
    width: 300px;
    padding: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .box input[type="text"],
  .box input[type="password"] {
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #3562a5;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: white;
    border-radius: 25px;
    transition: 0.25s;
  }
  
  .box input[type="text"]:focus,
  .box input[type="password"]:focus {
    width: 280px;
    border-color: rgb(153, 255, 216);
  }
  
  .box input[type="submit"] {
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid green;
    padding: 14px 40px;
    outline: none;
    color: white;
    border-radius: 25px;
    transition: 0.25s;
    cursor: pointer;
  }
  
  .box input[type="submit"]:hover {
    background: green;
  }
  
  .login {
    font-size: xx-large;
    text-shadow: 10px 11px 12px rgb(255, 255, 255);
    color: rgb(0, 225, 255);
  }
  
  #profile1 {
    width: 120px;
    height: 120px;
  }
  
  .box input[type="button"] {
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid rgb(246, 246, 246);
    padding: 4px 4px;
    outline: none;
    color: white;
    border-radius: 0px;
    transition: 0.25s;
    cursor: pointer;
  }
  
  
  #lockscreen {
    display: block;
    object-fit: cover;
  }
  
  .taskbar {
    width: 98%;
    height: 65px;
    padding: 0px;
    position: absolute;
    top: 95.6%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 20px;
    border-color: black;
    background-color: rgb(67, 67, 67);
  }
  
  #lock {
    width: 2%;
    height: 80%;
    padding: 0px;
    position: absolute;
    top: 50%;
    left: 98%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 100%;
    border-color: black;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    font-size: 200%;
  }
  
  .box1 input[type="hidden"] {
    background: black;
  }
  
  .login1 {
    font-size: 150%;
  }
  
  
  #settings {
    width: 2%;
    height: 80%;
    padding: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 100%;
    border-color: black;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    font-size: 200%;
  }
  
  #expl {
    width: 2%;
    height: 80%;
    padding: 0px;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 100%;
    border-color: black;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    font-size: 200%;
  }
  
  #back {
    width: 2%;
    height: 80%;
    padding: 0px;
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 100%;
    border-color: black;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    font-size: 200%;
  }
  
  #doc {
    width: 2%;
    height: 80%;
    padding: 0px;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 100%;
    border-color: black;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    font-size: 200%;
  }
  
  #System {
    background-color: aqua;
    width: 270px;
  }
  
  #textlist {
    position: center;
  } 
  
  #textli {
    top: 50%;
    left: 40%;
    margin: 0 auto;
    resize: none ;
    background-color: rgb(31, 31, 31);
    color: white;
    border-radius: 8px;
    border-color: rgb(31, 31, 31);
    
  }