:root {
  --headline-color: white;
  --text-color: green;
  --element1-color: green;
  --element2-color: white;
  --background-color: white;
  --headline1-font-size: 2rem;
  --text-font-size: 1.3rem; 
  --font-1: serif;
  --spacing-wide: 0.4rem;
  --spacing-tight: 0.2rem;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
  font-size: 14px;
}

body {
  background-color: var(--background-color);
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-1);
  font-weight: bold;
  font-style: normal;
  overflow: hidden;
}

h1 {
  font-family: var(--font-1);
  font-weight: bold;
  font-size: var(--headline1-font-size);
  text-align: center;
  letter-spacing: -1px;
  line-height: 1;
  margin-block-start: 0rem;
  margin-block-end: 0rem;
  margin: 0;
}

p {
  font-family: var(--font-1);
  font-weight: bold;
  font-size: var(--text-font-size);
  /* text-align: center; */
  line-height: 1;
  margin-block-start: 0rem;
  margin-block-end: 0rem;
  padding: var(--spacing-tight) var(--spacing-wide);
}

p:empty {
  display: none;
}

a {
  color: var(--headline-color);
  text-decoration: none;
}

a:visited {
  color: var(--headline-color);
}

button {
  color: none;
  background: none;
  background-color: none;
  border: none;
}

img {
  /* background-image: url('data:image/svg+xml,<svg id="Ebene_2" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2020 2020"><defs><style> .cls-1 { fill: none; stroke: %23000000; stroke-miterlimit: 10; stroke-width: 20px; } </style></defs><g id="Ebene_1-2" data-name="Ebene_1"><g><rect class="cls-1" x="10" y="10" width="2000" height="2000"/><line class="cls-1" x1="10" y1="10" x2="2010" y2="2010"/><line class="cls-1" x1="10" y1="2010" x2="2010" y2="10"/></g></g></svg>'); */
  background-repeat: no-repeat;
  background-size: cover;
}

/* –––––– GENERAL CLASSES –––––––– */ 

.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0rem;
  overflow-y: hidden;
  align-content: center;
}

.underlined {
  text-decoration: underline dotted;
  -webkit-text-decoration: underline dotted;
  cursor: pointer;
}

/* –––––– START PAGE –––––––– */ 

/* .startpagelinks {
  padding: var(--spacing-wide);
} */


.aboutblurb {
 max-width: 50vw;
 font-family: var(--font-1);
 font-weight: bold;
 font-size: var(--headline1-font-size);
 /* padding: var(--spacing-wide); */
 text-align: center;
}

.centered {
  width: auto;
  height: auto;
  margin: auto;
  /* background-color: var(--element-color);
  border-radius: 200px; */
  color: var(--headline-color);
}

#contact {
  cursor: pointer;

}

#links {
  top: 0;
  right: 0;
  position: fixed;
}

#clipboard {
  cursor: pointer;
  /* margin: 0rem 1rem; */
}

#welcome-message {
  color: var(--headline-color);
  background-color: var(--element1-color);
  padding: var(--spacing-tight);
  margin: var(--spacing-wide);
}

/* –––––– WORK PAGE –––––––– */ 

.work-house {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  padding: var(--spacing-wide);
  padding-right: 0;
  padding-left: 0;
  overflow-y: scroll;
  align-content: flex-start;
  gap: var(--spacing-wide);
}

/* Styling the scrollbar in Firefox  */
.work-house {   
  scrollbar-color: var(--element1-color) var(--background-color);
  scrollbar-width: 10px;
}

/* Styling the scrollbar in Chrome and Safari */
.work-house::-webkit-scrollbar {
  width: 10px;
}

.work-house::-webkit-scrollbar-thumb {
  background-color: var(--element1-color); /* Set thumb color for Chrome and Safari */
}

.work-house::-webkit-scrollbar-track {
  background-color: var(--background-color); /* Set track color for Chrome and Safari */
}

.work-headline-wrapper {
  padding: var(--spacing-wide);
  padding-left: 0;
  background-color: var(--background-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-wide);
  height: 100%;
}

.work-entry-wrapper {
 width: 100%;
}

.work-entry {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 var(--spacing-wide);
  flex-wrap: wrap;
}

.work-title {
  /* border: 2px solid var(--headline-color); */
  /* border-radius: 999px; */
  padding: var(--spacing-tight);
  margin-left: var(--spacing-wide);
  color: black;
  /* color: var(--headline-color); */
  background-color: var(--background-color);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.work-title:hover {
 color: var(--element1-color);
 /* border: 2px solid var(--element-color); */
}

details[open] {
  background-color: rgba(242, 255, 0, 0.989);
}

details[open] > summary {
  /* background-color: var(--background-color); */
  /* border: 2px solid var(--headline-color); */
}

details[open] > summary .work-title {
  color: var(--element1-color);
  /* border: 2px solid var(--headline-color); */
}

details[open] > summary .work-description {
  display: block;
  /* border: 2px solid var(--headline-color); */
}

details[open] > .work-description {
  /* background-color: var(--background-color); */
  display: block;
  /* border: 2px solid var(--headline-color); */
}

/* details[open] > .work-description p {
  background-color: var(--background-color);
  border: 2px solid var(--headline-color); 
} */

.work-description p {
  background-color: var(--background-color);
  color: black;
  /* border: 2px solid var(--headline-color); */
}

details[open] > summary .work-entry-hero-image  {
  display: block;
  /* border: 2px solid var(--headline-color); */
}

details summary::-webkit-details-marker {
  display:none;
}



.work-timeframe {
 /* border: 2px solid var(--text-color); */
 /* border-radius: 999px; */
 height: fit-content;
 color: var(--headline-color);
 background-color: var(--text-color);
}

.work-category-tag {
 /* border: 2px solid var(--text-color); */
 /* border-radius: 999px; */
 height: fit-content;
 color: var(--headline-color);
 background-color: var(--text-color);
}

.work-entry-hero-image {
  width: 100%;
  max-height: 50vh;
  background-color: none;
  overflow: visible;
}

.work-entry-hero-image img {
  height: 100%;
  width: 100%;
  /* max-width: 100%; */
  object-fit: contain;
  background-color: black;
}

.work-entry-hero-image video {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.work-description {
 text-align: left;
 padding: var(--spacing-tight) var(--spacing-wide);
 color: var(--text-color) !important;
 display: none;
}

.work-description p {
  text-align: left;
  padding: var(--spacing-tight) var(--spacing-wide);
  color: var(--text-color) !important;
 }

.work-description span {
  text-align: left;
  color: var(--text-color) !important;
  background-color: transparent !important;
 }

.work-description a {
  color: var(--text-color);
  text-decoration: dotted underline; 
  -webkit-text-decoration: dotted underline; 
}

.work-archive-gallery {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
}

.work-archive-img-container {
 width: calc(100%/8);
}

.work-archive-img-container img {
width: 100%;
height: auto;
display: block;
}

.work-archive-img-container video {
width: 100%;
height: auto;
display: block;
}

.typecontainer {
  width: auto;
  height: auto;
  margin: auto;
  /* background-color: var(--element-color); */
  /* border-radius: 200px; */
  color: var(--headline-color);
  padding: var(--spacing-tight);
}

/* .centered:hover {
    height: 100%;
    width: 100%;
    border-radius: 0;
    transition: 1s; 
    display: flex;
    justify-content:center;
    align-items:center;
} */

.nav-button {
  width: auto;
  height: auto;
  margin: var(--spacing-wide);
  color: var(--headline-color);
  background-color: var(--element1-color);
  /* border-radius: 100px; */
  padding: var(--spacing-tight);
}

.nav-button a {
  color: var(--headline-color);
}

/* .nav-button:hover {
  color: var(--headline-color);
  background-color: var(--element-color);
  border: 2px solid var(--headline-color); 
} */

.nav-button:hover a {
color: var(--headline-color);
}

#about {
  top: 0;
  left: 0;
  position: fixed;
}

#backbutton {
  top: 0;
  right: 0;
  position: fixed;
  margin-right: calc( var(--spacing-wide) + 9px);
}

#work {
  bottom: 0;
  right: 0;
  position: fixed;
}

.contactwrapper {
  position: fixed;
  left: 0; 
  bottom: 0;
  display: block; 
  width: auto;
  height: auto;
  max-width: 50vw;
  background-color: var(--background-color);
}

.image-container {
  height: auto;
  width: auto;
  box-sizing: border-box;
  display: none;
  overflow: hidden;
}

.image-container img {
  height: auto;
  width: auto;
  margin-top: 0;
  margin-left: 3px;
  margin-right: 0;
  margin-bottom: 3px;
  max-width: 50vw;
  max-height: 80vh;
}

.modal, .modal1, .modal2{
  display: block;
  height: fit-content;
  margin: var(--spacing-wide);
  background-color: var(--element1-color);
  color: var(--healine-color);
  padding: var(--spacing-tight);
}

@media only screen and (max-width: 1100px) {
  .work-archive-img-container {
    width: calc(100%/3);
  }
}
@media only screen and (max-width: 600px) {

  .work-archive-img-container {
    width: calc(100%/2);
  }

  .aboutblurb {
    max-width: 100%;
  }

  #welcome-message {
    width: min-content;
  }

  .work-entry-hero-image {
    height: fit-content;
  }

  .work-entry-hero-image img {
    width: 100%;
    height: auto;
  }

  .work-entry {
    justify-content: center;
  }

  .work-archive-gallery {
    justify-content: center;
  }

  .work-description p {
    text-align: center;
  }

}