* {
  caret-color: transparent; /* macht den Schreibstrich unsichtbar */
}

* { font-family: "Minecraft", sans-serif; color: white; }

@font-face {
  font-family: 'Minecraft';
  src: url(fonts/Minecraft.ttf);
}

body {
  background-image: url('avatar.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
  padding: 0;
}

.center-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; }
.box-contain { display: flex; flex-direction: row; justify-content: center; gap: 20px; margin-top: 1em; flex-wrap: wrap; }
.pfp { width: 110px; height: auto; border-radius: 50%; margin-bottom: 10px; }
.text { margin-top: 20px; color: rgb(221,221,221); text-align: center; font-size: 12px; }
.click { position: absolute; top:0; left:0; width:100%; height:100vh; background-color:black; display:flex; justify-content:center; align-items:center; font-size:24px; cursor:pointer; }
#phrase { position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); font-size:28px; font-weight:bold; opacity:1; }
#phrase span { opacity:0; display:inline-block; margin-right:5px; transition: opacity 0.2s ease; }
.entered { display:none; text-align:center; padding-top:20px; }

@media (max-width:600px){
  html,body{overflow-x:hidden;}
  .intial-container{margin-top:1200px;}
  .box-contain{flex-direction:column;align-items:center;}
  .text{font-size:8px;margin-bottom:150px;}
}

.pfp {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin-bottom: 10px;
  object-fit: cover; /* ensures images fit nicely in the circle */
}

h1 {
    font-family: 'Minecraft', sans-serif;
  font-size: 6em;
}


h3 {
  margin: 0;
  font-size: 16px;
}

.text {
  margin-top: 20px;
  font-size: 12px;
}