@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700;900;1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

:root {
  --scrollpos: 0;
  --TitleColor: #111111;
  --MainAccent: #006D77;
  --MainAccentLight: #83c5be;
  --TextColorSecondary: #444444;
  --BackgroundColor: #edf6f9; 
  --SecondaryAccentLight: #ffddd2;
  --SecondaryAccent: #e29578;
 } 


* {
  scroll-behavior: smooth;
  box-sizing:border-box;
    margin: 0;
  padding: 0;
} 




body {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
   cursor: none;
transform: rotate(var(--scrollpos));

}


::-webkit-scrollbar {
  display: none;
}

*, *::before, *::after{
  -webkit-box-sizing: border-box;
}
h1, h2 {
  font-family: source code pro;
  color: var(--TitleColor);
  font-size: 200%;
  margin: 13px 6px;
  font-weight: 400;
}
.introimg {height: 64px; filter: invert(100%);}
.introimg:hover {padding: 4px;} 
.introimg img {object-fit: fill; height: 100%;}
.intro h1 {font-weight: 400; }
.textbox h1 span {
  color: var(--MainAccent);
}
.textbox p span, .textbox ul span {
  font-weight: bold;
}

p, a, .textbox ul {font-family: open sans; font-size: 20px; color: var(--TitleColor); margin: 0; padding-left: 9px; font-weight:300;}
.introSection .textbox {padding-top: max(50px, 10vw);}
.projects h1 {padding: 30px 20px 0px 45px; }
.projectbox p {padding-bottom: 20px}
.projectbutton {font-size: 130%; margin: 20px 0px 0px 0px; padding: 16px; color: var(--MainAccent); text-decoration: none; }
.projectbox a {transition: 0.3s; }
.intro {padding: 20px; }

.image{ border-radius: 5px; padding: 0;}

.sixteenbynine.image {aspect-ratio: unset;}
.onebyone.image {aspect-ratio: unset;}


.projectbox, .otherbox {display: flex; justify-content: center;
flex-direction: row; width: 100%; padding: 20px; align-items: center; }
.stack {width: 55%;} 
.projectSection .projectbox {flex-direction: column;}

.projectbox img:hover {transform: scale(1.05); filter: grayscale(40%);}
.beep .stack {width: unset; height: 400px}
.projectbox .image {width: 55%; overflow: hidden;}
.projectbox img{transition: 0.3s; width:100%;}
.projectbox img { filter: grayscale(0%);}
.otherbox img, .otherbox video {width: 100%; height: 100%; border-radius: 20px;}
.smalldivider{height: 5px; width: 60%; background: var(--TitleColor); margin: 16px auto; border-radius: 0px;}
.mediumdivider{height: 20px; width: 100%; background: var(--MainAccent); margin: 20px 0px 40px 0px;}
.otherbox {padding: 20px;}
.otherbox p {padding-bottom: 20px; }
.otherbox .image {margin: 80px 0px 0px 20px; }
.lessspacing .otherbox {padding-top: 0px; padding-bottom: 0px;}
.lessspacing .otherbox .image {margin: 20px 0px 0px 20px;}

.introSection img {padding: 50px; object-fit: contain; border-radius: 0;}
.introSection img:hover {padding: 50px; border-radius: 0; }
.introSection .image {padding-top: 20px;}

.topspacer {height: 100px; width: 100%;}
.textboxstraight {width: 50%; margin-left: 20px;}
.textboxstraight a {color: var(--MainAccentLight)}
.extrapadding {padding-top: 20px;}
/* WIP animation */

.arrows {
  display: flex;
  justify-content: space-between;
  position: fixed;
  margin-top: 49vh;
  align-items: flex-start;
  width: 100%;
  padding: 20px; 
}
.past {padding-top: 80px;}
.arrow {
  width: 40px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--MainAccent);
  transition: all 0.3s ease; 
  transform-origin: center;
  margin-top: 30px;
  opacity: 0.7;
}
.right {margin-left: auto;}
.arrow img {
  height: 100%;
  display: none;
}

.right img {
  margin-left: 15px; 
}

.left img {
  transform: rotate(180deg);
  margin-left: 5px; 
}

.arrow:hover {
  width: 100px;
  padding: 15px;
  margin-top: 0px;
  opacity: 1;

}

.arrow:hover img {
  display: inline;
}

/*Scrolling text */
.tickerwrapper li {
  margin: auto;
  padding: auto;
  font-family: source code pro;
  font-size: 16px;
  color: var(--MainAccent);
}

.tickerwrapper{
  /* the outer div */
  margin: 0px 0px 40px 0px;
    position: relative;
  top: 26px;
  left:0%;
  width: 100%;
  height: 26px;
  overflow: hidden;
  background: var(--MainAccentLight)

} 
.maintitle {font-size: 48px; margin-left: 20%;}
ul.list {
  position: relative;
  display: inline-block;
  list-style: none;
  padding:0;
  margin:0;
}

ul.list.cloned {
  position: absolute;
  top: 0px;
  left: 0px;
}

ul.list li {
  float: left;
  padding-left: 20px;
}

/*navbar code */

.topnav {
z-index: 200;
position: fixed;
width: 100%;
background: white;

display: flex; justify-content: space-between;
flex-direction: row; align-items: center;
}
.topnav a {
  float: left;
  display: block;
 text-align: center;
 text-decoration: none;
 font-size: 24px;
 font-family: nunito; 
 color: var(--MainAccent);
  transition: 0.3s;
}
.padded { padding: 20px 20px;}
 .padded:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: black;
  padding: 24px 24px;
}
.topnav a:active, .projectbox a:hover, projectbox a:active {
  color: black;
}

.topnav .icon {
  display: none;
}

.splitter {
  aspect-ratio: 4/3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: width 2s ease; 
  border-radius: 20px;
}

.split {
  transition: width 2s ease-in-out;  width: 30%; height: 100%; background-color: var(--SecondaryAccent); opacity: 1; height: 100%; border-radius: 20px;
}

.splitter:hover .split{
  height: 30%; width: 100%; opacity: 1;
}

.splitter:hover {flex-direction: column;}


.textbox li span {color:var(--MainAccent);}
.textbox li {font-size: 100%; color: var(--TextColorSecondary)}

.line-pattern div {
  width: 100%;
  background:
    linear-gradient(to bottom, var(--TitleColor) 25%, transparent 25%);
  background-size: 100% 10px;
}

.line-pattern div:nth-child(1) {
    background-size: 100% 60px; 
height: 120px;
}

.line-pattern div:nth-child(2) {
    background-size: 100% 40px; 
height: 120px;
}

.line-pattern div:nth-child(3) {
    background-size: 100% 30px; 
height: 90px;
}

.line-pattern div:nth-child(4) {
    background-size: 100% 20px; 
height: 60px;
}

.line-pattern div:nth-child(5) {
background-size: 100% 10px; 
height: 40px;
}

.textbox ul {color: var(--TextColorSecondary); margin: 0; padding-left: 29px; }

a {cursor: none;}

.ball {
	background: red;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	mix-blend-mode: difference;
  z-index: 1000;
  pointer-events: none;
}

.beepbot {
  display: flex;
  justify-content: space-evenly;
  height: 100vh; /* Full screen height */
}

.page-text {
  display: flex;
    flex-direction: row;
  justify-content: flex-start;
  height: 100vh; /* Full screen height */
}

.text-container {
  width: 35%;
  padding:  40px; 
  padding-top: 80px; 
 overflow-y: auto;  
  height: 100vh;
}

.overflow-y {width: 100%;;
}
.page-text .text-container:nth-of-type(2) {
  padding-left: 5%;
}
.image-container {
  width: 50%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers images */
  overflow-y: auto; 
}

.image-container img,
.image-container video {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* Adds spacing between images */
}

.text-navbar {
  position: fixed;
  display: flex;
  background: none;  
  z-index: 300;
  
  width: 35%;
  justify-content: space-around;
  padding: 0px 40px;  
}

.text-navbar a, .text-navbar button {
  background-color: transparent;
  border: none;
  color:var(--TitleColor);
  text-decoration: none;
  font-weight: bold;
  padding: 0px 0px;
  transition: 0.3s; 
}
.text-navbar a:first-child {color:var(--MainAccent);}
.text-navbar a:hover, .text-navbar button:hover {
  color:var(--SecondaryAccent); cursor: none;
}

.textunderimage {font-size: 80%; margin-bottom: 20px; color:var(--TextColorSecondary);}
.sources {font-size: 80%; color:var(--TextColorSecondary); margin-bottom: 0px; padding-bottom: 0px;}
.downloadlink {margin-bottom: 30px; color:var(--MainAccent); font-size: 200%; text-align: center;}

main {
  position: relative;
  display: flex;
  width: 100%;
}

main > article {
  height: 100%;
  width: 100%;
  transition: transform 400ms ease; 
  position: absolute; 
  
}

main > article[data-status="inactive"] {
  transform: translateX(-100%);
  transition: none;
}

main > article[data-status="active"] {
  transform: translateX(0%);
}

main > article[data-status="before"] {
  transform: translateX(-100%);
}

main > article[data-status="after"] {
  transform: translateX(100%);
}

main > article[data-status="becoming-active-from-before"] {
  transform: translateX(-100%);
  transition: none;
}

main > article[data-status="becoming-active-from-after"] {
  transform: translateX(100%);
  transition: none;
}

p {margin-bottom: 20px;}

@media screen and (max-width: 600px) {
  .responivemenu a {display: none;}
  .responivemenu a:first-child {padding-top: 70px;}
  .topnav{align-items: start;}
  
  .topnav a.icon {
    float: right;
    display: block;
  }
  .projectbox, .otherbox{flex-direction: column; justify-content: center;}
  .stack {width: 100%;}
  .textbox .stack {margin-left: 0px;}
  .projects h1 {padding: 10px 20px 0px 20px; }
  .otherbox .image {margin-bottom: 20px; padding-left: 0px; padding-right: 30px;}
.beep .stack {width: 100%; height: unset;}
.ball {width: 0; height: 0;}


/* Stack everything */
.beepbot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 100%;
}

/* Stack text and images */
.text-container {
  width: 100%;
  height: auto; /* Allow content to expand naturally */
  overflow: visible;
  text-align: center; /* Center-align text */
  padding: 20px;
  padding-top: 80px;
}
.text-navbar {
  width: 50%; /* Make it full width */
  justify-content: space-between;
  padding: 0;
}
.image-container {  
  width: 100%;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: fixed
  }
  .topnav.responsive a.icon {
    position: fixed;
    right: 0px;
    top: 0px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}