@font-face {

    font-family: "Old English Text MT";

    src: url("https://db.onlinewebfonts.com/t/f3258385782c4c96aa24fe8b5d5f9782.eot");

    src: url("https://db.onlinewebfonts.com/t/f3258385782c4c96aa24fe8b5d5f9782.eot?#iefix")format("embedded-opentype"),

    url("https://db.onlinewebfonts.com/t/f3258385782c4c96aa24fe8b5d5f9782.woff2")format("woff2"),

    url("https://db.onlinewebfonts.com/t/f3258385782c4c96aa24fe8b5d5f9782.woff")format("woff"),

    url("https://db.onlinewebfonts.com/t/f3258385782c4c96aa24fe8b5d5f9782.ttf")format("truetype"),

    url("https://db.onlinewebfonts.com/t/f3258385782c4c96aa24fe8b5d5f9782.svg#Old English Text MT")format("svg");

}



:root {

  --accent-main: #a5a5a5;

  --accent-50: #b2b2b383;

  --accent-60: #40404193;

  --accent-dark: #636363;

  --accent-light: #d1d1d1;

}



html, body {

  margin: 0;

  padding: 0;

  overflow: hidden;

  background: #121212;

  height: 100%;

  font-family: 'Libre Franklin', sans-serif;

}



canvas {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 0;

  pointer-events: none;

}



body {

  opacity: 0;

  visibility: hidden;

  animation: fadeIn 1s ease-in-out forwards;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  color: #fff;

  position: relative;

  z-index: 1;

}



@keyframes fadeIn {

  to {

    opacity: 1;

    visibility: visible;

  }

}



#head {

  height: 100px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: #2a2a2a38;

  backdrop-filter: blur(10px);

  box-shadow: 0 0 15px rgba(255,255,255,0.1);

  width: 100%;

  max-width: 400px;

  margin-bottom: 20px;

  border-radius: 15px;

  z-index: 2;

}



#napis {

  font-family: 'Old English Text MT', serif;

  font-size: 60px;

  margin: 0;

  background: linear-gradient(to right, var(--accent-dark), var(--accent-dark), #ffffff 70%);

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

  text-shadow: 0 0 10px var(--accent-light);

}



main {

  width: 100%;

  max-width: 350px;

  display: flex;

  flex-direction: column;

  gap: 25px;

  z-index: 2;

}



.link-btn {

  background: #2a2a2a38;

  backdrop-filter: blur(10px);

  border: 2px solid var(--accent-main);

  border-radius: 20px;

  padding: 15px 25px;

  font-size: 20px;

  text-decoration: none;

  color: #fff;

  box-shadow: 0 0 10px var(--accent-main);

  display: flex;

  justify-content: center;

  align-items: center;

  height: 25px;

  font-weight: bold;

  transition: transform 0.3s ease, background-color 0.3s, color 0.3s, box-shadow 0.3s;

}



.link-btn.hovered {

  background-color: var(--accent-50);

  color: #7d3c98;

  box-shadow: 0 0 20px var(--accent-60);

  transform: scale(1.1);

}



@media (hover: hover) and (pointer: fine) {

  .link-btn:hover {

    background-color: var(--accent-50);

    color: #464546;

    box-shadow: 0 0 20px var(--accent-60);

    transform: scale(1.1);

  }

}



#social {

  display: flex;

  justify-content: center;

  gap: 15px;

  padding: 20px 0;

  background: #2a2a2a38;

  backdrop-filter: blur(10px);

  box-shadow: 0 -3px 15px rgba(255,255,255,0.05);

  width: 100%;

  max-width: 400px;

  margin-top: 30px;

  border-radius: 15px;

  z-index: 2;

}



#social a {

  text-decoration: none;

  color: var(--accent-main);

  font-weight: 600;

  font-size: 14px;

  transition: color 0.3s;

}



#social a:hover {

  color: #fff;

}



#near {

  text-align: center;

  font-size: 13px;

  padding: 10px 0 30px 0;

  color: gray;

  font-family: 'Courier New', Courier, monospace;

  width: 100%;

  max-width: 400px;

  z-index: 2;

}