*{
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  color:#A95454;
  background-color: #D4EBF5;
}

.html{
  margin: 0;
}


/*.mask{
  --mouse-x: 50%;
  --mouse-y: 50%;
  position: fixed;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  background-color: rgb(181, 211, 216);
  mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 70px,
    black 250px
  );
  -webkit-mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 140px,
    black 250px
  );
  z-index: 3;
}*/

html, body {
  cursor: none;
  cursor: url('img/General/raspberry.png'), auto;
}

canvas {
  display:block;
}

a {
  color: #A95454;
  text-decoration: none;
  cursor: url('img/General/cherry.png'), auto;
  font-weight: 100;
  font-size: small;
}

p{
  background: rgba(0,0,0,0);
  font-weight: 100;
  font-size: small;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1rem;
  font-weight: 100;
}

/* Navigation Styling*/

.Umbau{
  display: flex;
  justify-content: center;
  align-content: center;
}

.Umbau > img{
  width: 70%;
}

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: sans-serif;
  transition: all 0.3s ease;
}

.navigation-title{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  transition: all 0.3s ease;
}

.menu-footer{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

footer{
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.navigation > a {
  padding-left: 0.5rem;
  text-align: center;
}

span {
  display: inline-block;
  font-family: sans-serif;
  font-weight: 200;
  font-size: 24px;
  text-transform: lowercase;
  pointer-events: none;
  transition: transform 0.1s linear;
}



/* Project-Navigation Styling*/
.project-navigation-container {
 display: grid;
 grid-template-columns: [first] 1fr [line2] 1fr [line3] 1fr [end];
 grid-template-rows: [first-line] 22rem [second-line] 22rem[third-line];
 justify-items: center;
 z-index: 0;
}

.project-navigation-container > a > img { 
  transition: transform .5s;
  /*block-size: 33%;*/
  max-width: 30%;
  max-height:30%;
  object-fit: cover;
  position: absolute;
  border-radius: 0.4rem;
  filter: grayscale(100%);
}

.project-navigation-container > a > img:hover {
  transform: scale(1.3);
  border: 0.2rem, solid #FFC8C8;
  filter: none;
}

.project-numbers-bottom{
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  background-color: #D4EBF5;
  border-radius: 0.4rem;
  bottom: 40%;
}

.project-numbers-top{
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  background-color: #D4EBF5;
  border-radius: 0.4rem;
  top: 40%;
}


/* Project-Singles Styling*/

.project-1 {
  grid-column-start: first;
  grid-column-end: line2;
  grid-row-start: first-line;
  grid-row-end: second-line;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
}

.project-2 {
  grid-column-start: line2;
  grid-column-end: line3;
  grid-row-start: first-line;
  grid-row-end: second-line;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
}

.project-3 {
  grid-column-start: line3;
  grid-column-end: end;
  grid-row-start: first-line;
  grid-row-end: second-line;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
}

/*.project-titles{
  grid-column-start: first;
  grid-column-end: end;
  grid-row-start: second-line;
  grid-row-end: third-line;
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  overflow: hidden; 
  font-family: 'Europa', Arial, sans-serif;
  font-weight: 100;
}*/

.project-titles > a > p{
  padding-left: 2rem;
  padding-right: 2rem;
}

.project-4 {
  grid-column-start: first;
  grid-column-end: line2;
  grid-row-start: second-line;
  grid-row-end: third-line;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
}

.project-5 {
  grid-column-start: line2;
  grid-column-end: line3;
  grid-row-start: second-line;
  grid-row-end: third-line;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
}

.project-6 {
  grid-column-start: line3;
  grid-column-end: end;
  grid-row-start: second-line;
  grid-row-end: third-line;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
}


/*Projects Styling*/
.projectgallery { 
  display: flex;
  align-items: center;
  overflow: scroll;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.description {
  padding-right: 1rem;
  flex-basis: 35%;
  min-width: 35%;
}
.projectgallery > img {
  height: 30rem;
  padding: 1rem;
  border-radius: 2rem;
}

/*About me Styling*/
.aboutme {
  display: grid;
  align-items: center;
  grid-template-columns: [first] 0.9fr [line2] 1.2fr [line3] 0.9fr [end];
  grid-template-rows: [first-line] 40rem [second-line] ;
  justify-items: center;
  text-align: center;
}

.aboutme > p{
  padding: 0.5rem;
}

.news > ul > a{
 padding-bottom: 0.8rem;
}

.Kontakt > img {
  border-radius: 0.4rem;
  max-width: 60%;
}

.Kontakt > p {
  margin-top: 0rem;
  padding-left: 0.5rem;
  text-align: center;
}



/*Mobile Version*/
@media only screen and (max-width: 600px) {
  body {

/* Navigation Styling*/


.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: sans-serif;
  transition: all 0.3s ease;
}

.navigation-title{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  transition: all 0.3s ease;
}

h1{
  font-family: sans-serif;
  font-weight: 700;
  font-style: normal;
  padding-right: 0.5rem;
}

h3{
  font-family: sans-serif;
  font-weight: 50;
  font-style: normal; 
}
.navigation > a {
  padding: 0.3rem 0.3rem; 
  font-weight: 50;
  text-align: center;
}

/* Project-Navigation Styling*/
.project-navigation-container {
  display:flex;
  flex-direction: column;
}

.project-single{
  padding-top: 22%;
  padding-bottom: 22%
}

.project-navigation-container > a > p {
  font-family: 'Europa', Arial, sans-serif;
  font-weight: 50;
  font-size: small;
  margin-top: 0.8rem;
   
}

.project-navigation-container > a > img { 
   transition: transform .5s;
   max-width: 40%;
   max-height: 40%;
   object-fit: cover;
   position: absolute;
   border-radius: 0.8rem;
}

.project-numbers-bottom .project-numbers-top{
  display: flex;
  top: 40%;
  justify-content: end;
  align-items: center;
}


/*Projects Styling*/
.projectgallery { 
  justify-items: center;
  overflow: scroll;
}
.description {
  padding-right: 1rem;
  flex-basis: 80%;
  min-width: 80%;
}
.projectgallery > img {
  height: 20rem;
  padding: 1rem;
}

/*About me Styling*/
.aboutme {
  display: flex;
  flex-direction: column-reverse;
  align-items: start;
}

.aboutme > img {
  border-radius: 0.8rem;
}

.aboutme > p {
  max-width: 100%;
  margin-top: 1rem;
}
.aboutme > p > a {
  font-weight: 900;
}

  }
}

/* font-family: "gabriella", sans-serif;
font-weight: 900;
font-style: normal; */

/*
@font-face {
  src: url(data/GT-Super-Display-Light-Trial.otf);
  font-family: gtsuper;
}
---> Schrift verlinken!
*/