/* Reset CSS */

@font-face {
        font-family: 'necto';
        src: url('../fonts/Necto-Mono.woff2') format('woff2'),
             url('../fonts/Necto-Mono.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}

@font-face {
        font-family: 'kaerukaeru';
        src: url('../fonts/kaerukaeru-Regular.woff2') format('woff2'),
             url('../fonts/kaerukaeru-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}


html {
  height: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%; /* Stellen Sie sicher, dass der Körper den gesamten Ansichtsbereich abdeckt */
  margin: 0;
  padding: 0;
  overflow-y: auto; /* Erlauben Sie das vertikale Scrollen */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: black;
  font-size: 3rem;
  line-height: 3rem;
}


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;
}

*{
  margin: 0;
  padding: 0;
}

/* BACKDROP */

.backdrop {
  display: block;
  position: fixed;
  left: 50%;
  top: 40%;
  bottom: auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  z-index: 0;
  color: blue;
  font-family: 'kaerukaeru';
  font-size: 80vw;
  line-height: 0rem;
  letter-spacing: 0rem;
}

/* NAME */

.content {
  min-height: 100%;
  margin: 0 auto -3rem;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 2vw;
  padding-bottom: 0vw;
}

.leiste {
  min-height: 100%;
  margin: 0 auto -3rem;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 2vw;
  padding-bottom: 0;
}


.name{
  display: inline;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 3rem;
  line-height: 3rem;
  letter-spacing: 0rem;
}

.nitem {
  -webkit-transition: color 2s;
  -moz-transition: color 2s;
  transition: color 2s;
}

.nitem:hover{
  color: blue;
}

.n {
  position: relative;
  display: inline;
  background-color:;
  width:;
}

.n .ntooltip {
  visibility: hidden;
  position: fixed;
  width: 20rem; /* 25vw */
  /* min-width: 15rem; */
  margin: auto;
  bottom: auto;
  top:20%;
  left: 2vw;
  transform: scale(0) translate(0%, -80%);
  -webkit-transform: scale(0) translate(0%, -80%);
  -moz-transform: scale(0) translate(0%, -80%);
  transition: transform 0.5s;
  z-index: 1;
  background-color: blue;
  /* box-shadow: 5px 5px 5px 10px rgba(255, 255, 255, 0.3); */
  border-radius: 6px;
  padding: 6px;
  /* -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);*/
  -webkit-backdrop-filter: hue-rotate(64deg);
  backdrop-filter: hue-rotate(64deg);
  /* background: radial-gradient(ellipse at bottom, white, transparent);*/
  /* background: linear-gradient( white, transparent);*/
  /* box-shadow: 4px 4px 10px red; */
  /* -webkit-text-stroke-width: 0.4px;
  -webkit-text-stroke-color: black; */
  text-align: left;
  color: white;
  font-family: sans-serif;
  font-size: 0.8rem;
  line-height: 0.9rem;
  letter-spacing: normal;
}

.n .ntooltip::after {
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent; /* insert color on third position for arrow */
}

.n:hover .ntooltip {
  visibility: visible;
  transform: scale(1) translate(0%, -80%);
  -webkit-transform: scale(1) translate(0%, -80%);
  -moz-transform: scale(1) translate(0%, -80%);

}


/* PROJECTS */

.project{
  display: block;
  cursor: pointer;

}

.pitem {
  color: black;
  -webkit-transition: color 2s;
  -moz-transition: color 2s;
  transition: color 2s;
}

.pitem:hover{
  color: blue;
}

.p {
  position: relative;
  display: inline;
  font-family: serif;
  font-size: 3rem;
  line-height: 3rem;
  letter-spacing: ;
  background-color:;
  width:;
}

.p .ptooltip {
  visibility: hidden;
  position: fixed;
  width: 70vw; /* 25vw */
  /* min-width: 15rem; */
  margin: auto;
  bottom: auto;
  top: 90%;
  left: 50%;
  transform: scale(0) translate(-50%, -100%);
  -webkit-transform: scale(0) translate(-50%, -100%);
  -moz-transform: scale(0) translate(-50%, -100%);
  transition: transform 0.5s;
  transform-origin: left;
  z-index: 1;
  background-color: blue;
  /* box-shadow: 5px 5px 5px 10px rgba(255, 255, 255, 0.3); */
  border-radius: 6px;
  padding: 6px;
  /* -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);*/
  /* -webkit-backdrop-filter: invert(1);
  backdrop-filter: invert(1); */
  /* -webkit-backdrop-filter: hue-rotate(64deg);
  backdrop-filter: hue-rotate(64deg);*/
  /* background: radial-gradient(ellipse at bottom, white, transparent);*/
  /* background: linear-gradient( white, blue);*/
  /* box-shadow: 4px 4px 10px red; */
  /* -webkit-text-stroke-width: 0.4px;
  -webkit-text-stroke-color: black; */
  text-align: left;
  color: white;
  font-family: sans-serif;
  font-size: 0.8rem;
  line-height: 0.9rem;
  letter-spacing: normal;
}

.p .ptooltip::after {
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent; /* insert color on third position for arrow */
}

.p:hover .ptooltip {
  visibility: visible;
  transform: scale(1) translate(-50%, -100%);
  -webkit-transform: scale(1) translate(-50%, -100%);
  -moz-transform: scale(1) translate(-50%, -100%);
}

/* INFO BUTTONS */

.footer, .push {
  height: 3rem;
}

.footercontent {
  position: absolute;
  background: blue;
  z-index: 1;
}

.button {
  display: inline;
}

.btn-mail {
  background-color: inherit;
  cursor: pointer;
  outline: none;
  border: 0;
  font-family: sans-serif;
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: -0.1rem;
  text-decoration: none;
  color: black;
  border-radius:;
  cursor: alias;
}

.btn-ig {
  background-color: inherit;
  position: relative;
  display: inline;
  padding:  0px;
  cursor: pointer;
  outline: none;
  border: 0;
  font-family: sans-serif;
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: -0.1rem;
  text-decoration: none;
  color: black;
  border-radius:;
  cursor: copy;
}


/* IMPRINT */

.imprint{
  display: inline;
  cursor: pointer;

}

.iitem {
  color: black;
  -webkit-transition: color 2s;
  -moz-transition: color 2s;
  transition: color 2s;
}

.iitem:hover{
  color: blue;
}

.i {
  position: relative;
  display: inline;
  font-family: sans-serif;
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: 0rem;
  background-color:;
  width:;
}

.i .itooltip {
  visibility: hidden;
  position: fixed;
  width: 20rem; /* 25vw */
  /* min-width: 15rem; */
  margin: auto;
  bottom: auto;
  top: 90%;
  left: 2vw;
  transform: scale(0) translate(0%, -100%);
  -webkit-transform: scale(0) translate(0%, -100%);
  -moz-transform: scale(0) translate(0%, -100%);
  transition: transform 0.5s;
  transform-origin: left;
  z-index: 1;
  background-color: blue;
  /* box-shadow: 5px 5px 5px 10px rgba(255, 255, 255, 0.3); */
  border-radius: 6px;
  padding: 6px;
  /* -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);*/
  /* -webkit-backdrop-filter: invert(1);
  backdrop-filter: invert(1); */
  /* -webkit-backdrop-filter: hue-rotate(64deg);
  backdrop-filter: hue-rotate(64deg);*/
  /* background: radial-gradient(ellipse at bottom, white, transparent);*/
  /* background: linear-gradient( white, blue);*/
  /* box-shadow: 4px 4px 10px red; */
  /* -webkit-text-stroke-width: 0.4px;
  -webkit-text-stroke-color: black; */
  text-align: left;
  color: white;
  font-family: sans-serif;
  font-size: 0.8rem;
  line-height: 0.9rem;
  letter-spacing: normal;
}

.i .itooltip::after {
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent; /* insert color on third position for arrow */
}

.i:hover .itooltip {
  visibility: visible;
  transform: scale(1) translate(0%, -100%);
  -webkit-transform: scale(1) translate(0%, -100%);
  -moz-transform: scale(1) translate(0%, -100%);
}


/* IMAGES */

img {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.small{
  width: 20vw; /* 20vw */
}
.medium{
  width: 20vw; /* 30vw */
}
.big{
  width: 30vw; /* 40vw */
}

#fast{
  transition: opacity 1s linear;
}
#slower{
  transition: opacity 1s linear;
}
#slow{
  transition: opacity 1s linear;
}

/* Media Queries */
@media screen and (max-width:500px){
  h1{
    color: blue;
  }
}

/*
.info {
  filter: blur(5px);
  display: inline;
  cursor: crosshair;
  color: white;
}

.info:hover {
  filter: blur(0px);
}

a:link{
  color: white;
  text-decoration: none;
  cursor: alias;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2vw;
  font-family: sans-serif;
  color: white;
  font-size: 1rem;
  letter-spacing: 0.05rem;
  line-height: 1.5rem;
}
*/