*{
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  color:#FFC8C8;
  background-color: #2A3336;
}

.html{
  margin: 0;
 
}


/*.mask{
  --mouse-x: 50%;
  --mouse-y: 50%;
  position: fixed;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  background-color: rgb(174, 161, 69);
  mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 40px,
    black 150px
  );
  -webkit-mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 140px,
    black 150px
  );
  z-index: 1000;
}*/

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

canvas {
  display:block;
}


a {
  color: #FFC8C8;
  text-decoration: none;
  cursor: url('img/General/cherry.png'), auto;
}

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

/* Navigation Styling*/

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

.Umbau > img{
  width: 70%;
}

.navigation {
  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: 400;
  font-style: normal; 
}
.navigation > a {
  padding-left: 0.5rem;
  font-weight: 100;
  text-align: center;
}

span {
  display: inline-block;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 36px;
  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] 18rem [second-line] 9rem [third-line] 18rem [fourth-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.8rem;
}

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


.project-titles > a > p:hover {
  font-weight: 900;
  transform: scale(1.3)
}

.arrows> svg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: transparent
}



/* 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: third-line;
  grid-row-end: fourth-line;
  display: flex;
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
}

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

.project-6 {
  grid-column-start: line3;
  grid-column-end: end;
  grid-row-start: third-line;
  grid-row-end: fourth-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: 28%;
  min-width: 28%;
}
.projectgallery > img {
  height: 30rem;
  padding: 1rem;
  border-radius: 2rem;
}

/*About me Styling*/
.aboutme {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.aboutme > img {
  border-radius: 0.8rem;
}

.aboutme > p {
  max-width: 30%;
  margin-top: 0rem;
  padding-left: 0.5rem;
}
.aboutme > p > a {
  font-weight: 900;
}

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

/* Navigation Styling*/


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

h1{
  font-family: sans-serif;
  font-weight: 50;
  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: grid;
  grid-template-columns: [first] 1fr [line2] 1fr [line3] 1fr [end];
  grid-template-rows: [first-line] 11rem [second-line] 11rem [third-line] 11rem [fourth-line];
  align-content: start;
}

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

.project-titles{
  display: flex;
  flex-direction: column;
}

.project-navigation-container > a > img { 
   transition: transform .5s;
   /*block-size: 13%;*/
   object-fit: cover;
   position: absolute;
   border-radius: 0.8rem;
}

/*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!
*/