/* Reset CSS */


html, body {
  background: #fff;
  z-index: 1;
  font-size: 1vw;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, button, input, label {
  cursor: pointer
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Your CSS */

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "JetBrains Mono", monospace;
  font-variation-settings: "wght" 500;
  /* font-weight: 500; */
  overflow: hidden;
}

.loading {
  position: absolute;
  width: 150%;
  height: 150%;
  background: rgba(0, 0, 0);
  color: white;
  font-size: 1rem;
  line-height: 1.2rem;
  text-align: center;
  z-index: 99999;
  display: flex;
  justify-items: center;
  align-content: center;
  flex-direction: column;
}

.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  text-align: center;
  height: 3rem;
  width: 48rem;
  padding-top: 1rem;
  border-right: .15em solid rgb(255, 255, 255); /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  animation: 
    typing 2.5s steps(26, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 48rem }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgb(255, 255, 255); }
}

.entersite {
  margin: 20vh;
}


.backgroundimage {
  background-position: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  align-items: center;
}

.right{
  object-position: right;
}

.container {
  position: relative;
  top: -1vw;
  width: 50vw;
  height: 31vw;
  border-radius: 0.5vw;
  z-index: 2;
  transition: 0.2s transform;
  box-shadow: 3px 2px 20px rgba(47, 50, 77, 0.665);
  background: rgba(255, 255, 255);
  /* filter: blur(8px); */
}

.backgroundimage:active {
  .shrink {
  transform: scale(0.01);
}
}

.container:has(img:active) {
  transform: scale(0.1);
}

.frame {
  width: 100%;
  position: absolute;
  margin: auto;
  padding-left: 1.5vw;
  padding-top: 0.5vw;
}

p {
  margin-top: 0.6vw;
  margin-left: 1vw;
  font-size: 3em;
  z-index: 2;
}

.name {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 100%;
  z-index: 5;
}

.info {
  position: absolute;
  left: 35.5vw;
  top: 26.1vw;
  z-index: 5;
}

.mail {
  position: absolute;
  left: 0;
  top: 26.1vw;
  z-index: 5;
}

.link {
  text-decoration: none;
  color: black;
  transition: font-variation-settings 0.3s ease;
}

#print{
  text-decoration: none;
  color: black;
  z-index: 5;
  position: relative;
}

.link:hover {
  color: blue;
  font-weight: bold;
  font-variation-settings: "wght" 800;
}

.druckerdiv {
  width: 50vw;
  height: 31vw;
  background-color: transparent;
  z-index: 4;
  position: relative;
}

.box {
  position: absolute;
  width: 50vw;
  height: 31vw;
  opacity: 0;
  border-radius: 0.5vw;
  padding-right: 1vw;
  padding-top: -1vw;
  text-align: right;
  font-size: 4em;
  display: flex;
  justify-content: right;
  align-items: right;  
  color: rgb(0, 0, 0);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.framenumber {
  opacity: 0;
  position: absolute;
  top: -0.5vw;
  left: 36.2vw;
  font-size: 4em;
}

.box.show {
  pointer-events: auto;
}

.container:hover {
  transform: scale(106%);
  /* background: rgba(255, 255, 255); */
  /* filter: blur(0px);  */
}

.show {
  opacity: 1;
}



/* .box1 { background: red; }
.box2 { background: orange; }
.box3 { background: yellow; }
.box4 { background: green; }
.box5 { background: blue; }
.box6 { background: indigo; }
.box7 { background: violet; }
.box8 { background: pink; }
.box9 { background: lime; }
.box10 { background: cyan; }
.box11 { background: magenta; }
.box12 { background: brown; }
.box13 { background: teal; }
.box14 { background: coral; }
.box15 { background: gold; }
.box16 { background: navy; }
.box17 { background: salmon; }
.box18 { background: olive; }
.box19 { background: turquoise; }
.box20 { background: maroon; }
.box21 { background: khaki; }
.box22 { background: plum; }
.box23 { background: steelblue; }
.box24 { background: darkgreen; } */


.pc {
  display: inline-block;
}


.howto {
  width: 150%;
  height: 150%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 8rem;
  line-height: 8rem;
  text-align: center;
  position: absolute;
  z-index: 99999;
  display: flex;
  justify-items: center;
  align-content: center;
  flex-direction: column;
}
.finger {
  width: 20vw;
  height: auto;
}
.hidden {
  opacity: 0;
  pointer-events: none;
}

.phone {
  display: none;
}

/* Media Queries */

@media screen and (max-width:600px){
  .pc {
  display: none;
}

.phone {
  display: inline-block;
}  
  
  .container, .box {
      width: 50vw;
      height: 70vw;
    }

    .box {
      font-size: 7em;
    }

    .framenumber{
      font-size: 7em;
      left: 26.7vw;
    }

    .info {
      top: 62vw;
      left: 26.7vw;
    }

    .mail {
      top: 62vw;
    }
    
    p {
      font-size: 5em;
    }

    .name {
      top: 1vw;
    }

    .frame {
      top: 19vw;
    }
}

@media print {
  .noPrint{
    display:none;
  }
}