/* (C) Robin Schmidtke 2019 */

@font-face {
  font-family: "Civilitate";
  src: url("font/CivilitateTrialV0.2-Medium.woff2");
}  

:root {
  --color-main: #d8ff00;
  --font-size-big: 4.2em;
  --font-serif: 'Civilitate', serif;
  --font-sans: 'nimbus-sans-condensed', sans-serif;
}

::-moz-selection {
  color: black !important;
  background: var(--color-main) !important;
}

::selection {
  color: black !important;
  background: var(--color-main) !important;
}

* {
  font-size: 22px;
}


html {
  font-size: 1em;
  cursor: default;
}

body {
  font-family: var(--font-serif);
  font-size: 1em;
  background: #ac988b;
  color: #2b2143;
  line-height: 400%;
  text-decoration: none;


}

.container {
  max-width: 1280px !important;
  margin: 0 auto;
}

.big-text {
  font-size: var(--font-size-big);
  font-family: var(--font-serif);
  margin: 0px 0px;
  line-height: 160%;

}

.imprint {
  font-weight: 300;
  font-family: var(--font-sans) !important;
  font-size: 1em;
  color: #020734;

}

.imprintbig {
  font-weight: 300;
  font-family: var(--font-sans) !important;
  font-size: 2em;
  color: #020734;

}



/*
.big-text a:after {
  border-radius: 50px;
  content: '⬉';
  font-size: 0.1em;
  position: absolute;
  margin-left: -0.7em;
  margin-top: 2em;
  transform: rotate(90deg);
}
*/

a.class1 {
  font-weight: 300;
  font-family: var(--font-serif) !important;
  font-size: 2.3em;
  color: inherit;
  text-decoration: none;
  border-bottom: 0px solid black;
  line-height: 170%;
}

a.class2 {
  font-weight: 300;
  font-family: var(--font-sans) !important;
  font-size: 1em;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid black;
}

a.class3 {
  font-weight: 300;
  font-family: var(--font-sans) !important;
  font-size: 1em;
  color: inherit;
  text-decoration: none;
  border-bottom: 0px solid black;
}

a.class4 {
  font-weight: 300;
  font-family: var(--font-serif) !important;
  font-size: 1em;
  color: inherit;
  text-decoration: none;
  border-bottom: 0px solid black;
  line-height: 170%;
}

p {
  font-weight: 300;
  font-family: var(--font-sans) !important;
  font-size: 1em;
  color: #020734;
  line-height: 160%;

}

li {
  font-weight: 300;
  font-family: var(--font-sans) !important;
  font-size: 1em;
  color: #020734;
  line-height: 160%;

}

strong {
  font-weight: 300;
  font-family: var(--font-sans) !important;
  font-size: 1em;
  color: #020734;
  line-height: 160%;

}

h2 {
  font-weight: 300;
  font-family: var(--font-sans) !important;
  font-size: 2em;
  color: #020734;
  
}


/* Links */

.links ul {
  list-style: none;
  padding: 0;
}

.links ul li:after {
  content: "\A";
  white-space: pre;
}

.links ul li .post-image {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  height: 40vh;
  width: 40vw;
  top: 30vh;
  left: 30vw;
  margin: 0;
  padding: 0;

  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  z-index: 0;


}

.links ul li:hover .post-image {
  opacity: 1;
}

.mouse {
  position: absolute;
  width: 230px;
  height: 230px;
  background: var(--color-main);
  border-radius: 100%;
  margin-left: -115px;
  margin-top: -115px;

  background: rgb(216, 255, 0);
  background: radial-gradient(circle, rgba(255, 100, 0, 1) 15%, rgba(255, 100, 0, 0) 62%);
}

.gradient {
  pointer-events: none !important;

  display: block;
  position: fixed;
  top: 0;
  width: 110vw;
  min-height: 1400px;
  max-height: 50vh;

  z-index: -1;

  background: -moz-linear-gradient(top, rgba(255, 100, 0, 1) 0%, rgba(255, 100, 0, 0) 33%, rgba(255, 100, 0, 0) 79%);
  background: -webkit-linear-gradient(top, rgba(255, 100, 0, 1) 0%, rgba(255, 100, 0, 0) 33%, rgba(255, 100, 0, 0) 79%);
  background: linear-gradient(to bottom, rgba(255, 100, 0, 1) 0%, rgba(255, 100, 0, 0) 33%, rgba(255, 100, 0, 0) 79%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f2445', endColorstr='#2f2445', GradientType=0);
}

/* Gimmicks */

.backgroundpic {
  opacity: 1;
  position: scroll;
  height: 100vh;
  top: 0px;
  left: center;
  width: 100%;
  background: url(img/fabulastemporis.png) center center no-repeat;
  background-size: contain;
  *z-index: 1;*
}


.name {
  font-weight: 300;
  font-family: var(--font-serif) !important;
  font-size: 1em;
  color: #020734;
  cursor: crosshair;
}

.image1 {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  height: 70vh;
  top: 0px;
  left: 15vw;
  width: 70vw;
  background: url(img/DSC_0310e.png) center center no-repeat;
  background-size: contain;
  z-index: 1;
  /* border: 1px solid black; */
  /*outline: 1px solid red;*/
}

.image2 {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  height: 70vh;
  top: 0px;
  left: 15vw;
  width: 70vw;
  background: url(img/Offingen.png) center center no-repeat;
  background-size: contain;
  z-index: 1;
  /* border: 1px solid black; */
  /*outline: 1px solid red;*/
}

.image3 {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  height: 70vh;
  top: 0px;
  left: 15vw;
  width: 70vw;
  background: url(img/IMG_3092.png) center center no-repeat;
  background-size: contain;
  z-index: 1;
  /* border: 1px solid black; */
  /*outline: 1px solid red;*/
}

.image4 {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  height: 70vh;
  top: 0px;
  left: 15vw;
  width: 70vw;
  background: url(img/hase.png) center center no-repeat;
  background-size: contain;
  z-index: 1;
  /* border: 1px solid black; */
  /*outline: 1px solid red;*/
}

.name:hover .image1 {
  opacity: 1;
}
.name:hover .image2 {
  opacity: 1;
}
.name:hover .image3 {
  opacity: 1;
}
.name:hover .image4 {
  opacity: 1;
}


/* Media Queries */

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .big-text {
    font-size: 1.8em;
  }
  .image1 {
    height: 90vh;
    top: 0px;
    left: 5vw;
    width: 90vw;
  }
  .image2 {
    height: 90vh;
    top: 0px;
    left: 5vw;
    width: 90vw;
  }
  .image3 {
    height: 90vh;
    top: 0px;
    left: 5vw;
    width: 90vw;
  }
  .image4 {
    height: 90vh;
    top: 0px;
    left: 5vw;
    width: 90vw;
  }
  .backgroundpic {
    left: center;
    width: 90vw;
    height: 100vh;

  }
  .container {
    padding: 5px !important;
  }
    a.class1 {
    font-size: 1em;
  }

}