:root {
  --dark: #5f5d5c;
  --dark2: #beb7aa;
  --light: #beb7aa;
  --lighter: #9dcae0;
  --link-light: #5aace7;
  --link-dark: rgb(195, 235, 255);
}
body {
  margin: 0;
  font-family: sans-serif;
  font-size: 2vh;
  font-weight: bolder;
  color: #222;
  transition: background-color 0.3s ease;
  overflow-y: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

h1 {
  font-weight: 50;
  color: #222;
  padding-top: 5vh;
  text-align: center;
  position: relative; 
  z-index: 2; 
}

h4 {
  font-weight: 50;
  font-size: 3vmin;
  color: #222;
  text-align: center;
  position: relative; 
  z-index: 2; 
}

.credit {
  position: absolute;
  top: 25px;
  right: 25px;
  padding: 1vmin;
  background-color: rgba(95, 93, 92, 0.7);
  z-index: 2;
  backdrop-filter: blur(5px);
}


h3 {
  padding-top: 5vh;
  text-align: start;
}

.parallax {
  background-image: url("images/building.png");
  min-height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  position: relative;
  text-align: center;
}

.sketches {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 1;
}

.panel {
  min-height: 100vh;
  /* outline: 3px solid hotpink; */
}

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

.hidden-process {
  display: flex;
  font-size: 2vh;
  margin-top: 5vh;
  padding-top: 2vh;
  margin-bottom: 2vh;
}

.process {
  display: flex;
  padding: 2vh;
  border: solid 3px var(--light);
  font-size:1vh;
  display: none;
}

.color-white {
  background-color: #ffffff;
}
.color-black {
  background-color: var(--dark);
}

section {
  font-size: 2vh;
  padding-top: 5vh;
  line-height: 200%;
  background-color: #ffffff;
  color: #222;
}

.dark {
  color: #ffffff;
  background-color: var(--dark);  
}

ol li {
  font-size: 2vh;
  margin-bottom: 1vh;
  margin-top: 1vh;
}

ul li {
  font-size: 2vh;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

a:link {
  text-decoration: none;
  z-index: 1;
}

hr {
  width: 5vw;
  border-top: solid 10px;
}

p {
  font-size: 2vh;
  padding-top: 1vh;
}

.light-text {
  color: white;
}

button {
  font-size: 2vh;
  padding: 2vh;
  border-radius: 10;
  background-color: white;
  border: solid 3px var(--light);
}

button:hover {
  background-color: var(--light);
  color: white;
}

.dark-button {
  font-size: 2vh;
  border: solid 3px var(--dark2);
  background-color: var(--dark);
  color: white;
}

.dark-button:hover {
  border: solid 3px var(--dark2);
  color: #222;
  background-color: var(--dark2);
}

footer {
  background-color: var(--dark);
  /* display: flex; */
  text-align: center;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2vh;
  padding-top: 10vh;
  padding-bottom: 2vh;
}



a:hover {
  border-radius: 1em 0 1em 0;
  background-image: linear-gradient(
    -100deg,
    rgba(144, 144, 144, 0.1),
    rgba(200, 200, 200, 0.2) 95%,
    rgba(149, 149, 149, 0.1)
  );
}

.map {
  margin-bottom: 5vmin;
}


#content-wrapper{
	display: flex;
  margin-top: 5vmin;
}

#img-container{
  display: flex;
	z-index: 1;
	position: relative;
}

#lens{
	z-index: 2;
	position: absolute;
	height: 125px;
	width: 125px;
	border:2px solid black;
	background-repeat: no-repeat;
	cursor: none;
}

#featured{
	cursor: pointer;

}

.thumbnail{
	object-fit: cover;
	cursor: pointer;
	opacity: 0.5;
	margin: 5px;
	border: 2px solid black;

}

.thumbnail:hover{
	opacity:1;
}

.active{
	opacity: 1;
}