:root {
	--container-gap: 200px;
}

body {
  margin: 60px 0;
  line-height: 26px;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
  font-family: "Roboto family", monospace;
  font-weight: 100;
}

a {
  color: black;
  text-decoration: none;
}

a:visited {
  color: #333;
  text-decoration: none;
  
}
a:hover {
  background-color: black;
  color: white;
}

p {
  text-align: right;
}

h1 {
  display: block;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 50px;
}

h2 {
  display: block;
  font-size: 1.741rem;
  margin-top: 0;
  margin-bottom: 16px;
}

h3 {
  display: block;
  font-size: 1.516rem;;
  margin-top: 0;
  margin-bottom: 16px;
}

h4 {
  display: block;
  font-size: 1.320rem;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;

}


.visible.block-header {
  text-align: right;
  margin-left: 16px;
}

.content-section {
  display: none;
  margin-top: 30px;
  /* margin-left: 20px; */
  margin-bottom: 40px;
}

.content-sub-section {
  display: none;
}

.visible {
  display: flex;	
  text-align: right;
}

.visible .content-section,
.visible + .content-section,
.visible + .content-sub-section {
  display: block;
  margin-bottom: 50px;
}

.visible.block-container {
  text-align: right;
  
}

.visible.block-container .content-section {
  text-align: right;
}

.hidden {
  display: none;
}

.block-container {
  text-align: right;
  flex-direction: column;
  margin-bottom: 20px;
}

.block-sub-container {
  text-align: right;
  flex-direction: column;
  margin-bottom: 14px;
}

.block-header {
  font-size: 24px;
  text-align: right;
  color: black;
  transition: background-color 0.1s, color 0.1s;
}

.visible .block-header,
.block-header:hover,
.visible .block-sub-header,
.block-sub-header:hover {
	background-color: #000;
	color: #fff;
	align-self: flex-end;
}

.block-sub-header {
    color: black;
}

.container {
  margin-left: var(--container-gap);
  width: calc(50vw - var(--container-gap) * 2 );
}

.content {
  width: calc(100vw - var(--container-gap) * 2 );
}

.content-floated {
  width: calc(45vw - var(--container-gap));
  float: left;
  padding: 0;
}

.line {
	display: flex;
	gap: 28px;
	margin-bottom: 10px;
  }

.key {
  min-width: 100px;
  text-align: right;
  font-weight: 600;
}

.value {
  text-align: left;
}

.scroll-top {
  width: 48px;
  height: 48px;
  position: fixed;
  bottom: 85px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  cursor: pointer;
  border-radius: 0px;
  font-size: 10px;
}

.scroll-top-hidden {
  visibility: hidden; /* Hidden by default */
}

.photo-buttons button:hover, .close-button:hover,
.open-all:hover, .scroll-top:hover {
  background-color: #333; /* Add a dark-grey background on hover */
}

.open-all {
  width: 48px;
  height: 48px;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  cursor: pointer;
  border-radius: 0px;
  font-size: 10px;
}

.black-background {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 102vw;
  height: 100%;
  background-color: black;
  z-index: -1;
}


.js-photo-carousel-container {
  display: none;
  justify-content: center;
  background-color: black;
  width: 100%;
  position: relative;
  padding: 28px;
  
}

.photo-carousel-container {
  justify-content: center;
  background-color: black;
  width: 100%;
  position: relative;
  padding: 28px;
  margin: 50px 0 70px 0;
}

.line.active a {
  background-color: black;
  color: white;
}

.photo-carousel-container img {
  width: 100%;
  height: 500px;
  object-fit: contain;
  margin: 0 10px; 
}

.photo-carousel {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  z-index: 1;
}

.photo-buttons {
  position: absolute;
  bottom: 10px;
}

.photo-buttons button {
  cursor: pointer;
  background-color: black;
  color: white;
  border: none;
  padding: 5px 10px;
  margin: 0 5px;
}

.close-button {
  position: absolute;
  height: 48px;
  width: 48px;
  top: 50px;
  right: -170px;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: white;
  z-index: 999;
}

.copyright-text {
  text-align: center;
  font-size: 14px;
  color: #aeaeae;
  margin-top: 10px;
}

@media only screen and (max-width: 768px) {
  body {
    margin: 0 0 200px 0;
  }

  .container {
    margin-left: 0;
    width: 100%;
  }

  .content {
    width: 100%; /* Make the content full width on smaller screens */
    padding-right: 20px;
  }

  .content-floated {
    width: 100%; /* Make the floated content full width on smaller screens */
    float: none; /* Remove the float for smaller screens */
    margin-bottom: 50px;
  }

  h1 {
    text-align: right;
    margin-bottom: 50px;
  }

  .key {
    text-align: right;
  }

  .value {
    text-align: left;
  }

  .close-button {
    position: absolute;
    height: 48px;
    width: 48px;
    top: 50px;
    right: 29px;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: white;
    z-index: 1;
  }
}

@media screen and (min-width: 1300px) {
    :root {
        --container-gap: 0px;
    }

    .content-floated {
        max-width: 400px;
        width: 100%;
        height: auto;
    }
  
  .container {
    margin-left: auto;
    margin-right: auto;
    width: calc(50vw - var(--container-gap) * 2 );
  }

  .content {
    width: calc(100vw - var(--container-gap) * 2 );
    max-width: 990px;
  }

  .content-floated {
    width: calc(45vw - var(--container-gap));
    float: left;
    padding: 0;
  }
}

@media screen and (min-width: 2000px) {
    :root {
        --container-gap: 110px;
    }

    .content-floated {
        max-width: 400px; 
        width: 100%;
        height: auto;
    }
  
  .container {
    margin-left: auto;
    margin-right: auto;
    width: calc(50vw - var(--container-gap) * 2 );
  }

  .content {
    width: calc(100vw - var(--container-gap) * 2 );
    max-width: 990px;
  }

  .content-floated {
    width: calc(45vw - var(--container-gap));
    float: left;
    padding: 0;
  }
}