html {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* simulating crystal*/
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  margin: 0;
  /* blur only works if there is an image or image behind this body */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Avoid ware overflows in fullscreen interfaces */
  overflow: hidden; 
}

.main-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 500; 
  color: #1e293b;
  text-align: center;
  position: absolute;
  top: 2.5rem;
}

.copyright{
    color: #000;
    position: absolute;
    display: flex;
    align-items: center;
    top: 30rem;
    left: 50%;
    transform: translateX(-50%);
}

.directory{
    color: #000;
    position: absolute;
    display: flex;
    align-items: flex-start;
    left: 3rem; 
    top: 7.5rem; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500; 
}

.file {
  display: flex;
  align-items: center; 
  gap: 8px;         
  position: absolute;
  left: 5rem;
  top: 10.5rem;
}

.file a {
  display: flex;
  align-items: center; 
  gap: 8px;         
  color: #000;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500; 
}