@font-face {
    font-family: 'inter';
    src: url('fonts/Inter.ttf') format('truetype');
	font-weight: 1 999;
}

@font-face {
    font-family: 'museomoderno';
    src: url('fonts/MuseoModerno-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 1 999;
}

@-webkit-keyframes pulse {
      0%,
	 100% {background-color: #121232;}
     20% {background-color: #0c1423;}
     40% {background-color: #16251e;}
     60% {background-color: #2d0c08;}
     80% {background-color: #2a0b24;}
}

@keyframes backblob {
  0%,
  100% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; margin-top: 200px; } 
   20% { border-radius: 54% 46% 15% 85% / 49% 70% 30% 51%; margin-top: 275px; } 
   40% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; margin-top: 150px; } 
   60% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; margin-top: 25px; } 
   80% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; margin-top: 100px; } 
}

@keyframes backblob2 {
  0%,
  100% { border-radius: 54% 46% 15% 85% / 49% 70% 30% 51%; background-color: #33334d; margin-top: 0px; } 
   20% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; background-color: #303a55; margin-top: 100px; } 
   40% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; background-color: #334d35; margin-top: 300px; } 
   60% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; background-color: #4a260e; margin-top: 150px; } 
   80% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; background-color: #470046; margin-top: 20px; } 
}

@keyframes backblob3 {
  0%,
  100% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; margin-top: 100px; } 
   20% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; margin-top: -25px; } 
   50% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; margin-top: 450px; } 
   70% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; margin-top: 225px; } 
   85% { border-radius: 54% 46% 15% 85% / 49% 70% 30% 51%; margin-top: 325px; } 
}

@keyframes backblob4 {
  0%,
  100% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; margin-top: 100px; } 
   30% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; margin-top: 450px; } 
   50% { border-radius: 54% 46% 15% 85% / 49% 70% 30% 51%; margin-top: 150px; } 
   70% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; margin-top: -50px; } 
   90% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; margin-top: 200px; } 
}

@keyframes fade1 {
  0%,
  100% { opacity: 1; } 
   20% { opacity: 0; } 
   80% { opacity: 0; }      
}	

@keyframes fade2 {
  0%,
  100% { opacity: 1; } 
   20% { opacity: 1; } 
   40% { opacity: 0; } 
   80% { opacity: 0; }       
}

@keyframes fade3 {
  0%,
  100% { opacity: 1; } 
   40% { opacity: 1; } 
   60% { opacity: 0; } 
   80% { opacity: 0; }       
}

@keyframes fade4 {
  0%,
  100% { opacity: 1; } 
   60% { opacity: 1; } 
   80% { opacity: 0; }       
}

* {
  font-family: 'inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 100%;
}

body { 
  margin: 0;
  padding: 0;
  background-color: #F2CA50;
  -webkit-animation: pulse 70s infinite both normal;
}

h1 {
   font-family: 'museomoderno', serif;
   font-size: 150%;
   color: #ffffff;
   font-weight: 600;
}

p {
  line-height: 130%;
  color: #333;
}

a {
  text-decoration: none;
}

body h1 a {
  text-decoration: none;
  color: #ffffff;
}

/* ------------------------------------------------------------ Portfolio Pages ----------------------------------------*/

.overflow {
  top: 20%;
  position: relative;
  height: 80%;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-color: white black;
  scrollbar-width: thin;
}

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

.project {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.description {
  flex: 30%;
  text-align: right;
  top: 0;
  margin-bottom: 25px;
  height: min-content;
  color: white;
    position: -webkit-sticky; /* Safari */
  position: sticky;
}

.blurb {
  margin-left: 10%;
  margin-top: 9px;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.2) 100%);
  padding: 0px 10px;
}


input[type='checkbox'] { display: none; } 

.lbl-toggle { display: block;
    padding: 10px 0px;
text-align: right;
font-size: 135%;
color: #FFF;
cursor: pointer;
border-radius: 7px;
transition: all 0.25s ease-out; } 

.lbl-toggle:hover { color: #DDD; } 

.lbl-toggle::before { content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .2s ease-out; } 

.toggle:checked+.lbl-toggle::before {
	transform: rotate(90deg) translateX(-3px); }

.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out; } 

.toggle:checked + .lbl-toggle + .collapsible-content {
	max-height: 500px; } 

.collapsible-content p { 
margin-bottom: 0;
  color: white;
  padding-bottom: 10px;
}

.collapsible-content a { 
    color: #ffffff;
	text-decoration: underline;
}


.headline {
  margin-left: 30%;
  position: fixed;
  top: 12%;
}

.headline h1 {
  color: white;
  margin-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.visuals {
  flex: 70%;
  text-align: left;
  margin-top: 0px;
  padding: 6px;
}

/* ------------------------------------------------------------ IDs ----------------------------------------*/

#behind {
  position: fixed;
  margin-left: 17%;
  left: -300px;
  top: -50px;
  z-index: -1;
  height: 600px;
  width: 400px;
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
  animation: backblob 70s ease-in-out infinite normal;
  max-width: initial;
  max-height: initial;
  overflow: hidden;
}

#behind-2 {
  position: fixed;
  left: 8%;
  top: -300px;
  z-index: -5;
  height: 1300px;
  width: 1000px;
  opacity: 0.6;
  filter: blur(12px);
  animation: backblob2 70s ease-in-out infinite normal;
  max-width: initial;
  max-height: initial;
}

#behind-4 {
  position: fixed;
  left: 2%;
  top: 0px;
  left: 100px;
  z-index: -4;
  height: 900px;
  width: 700px;
  filter: blur(2px);
  background-color: rgba(255, 255, 255, 0.1);
  animation: backblob4 90s ease-in-out infinite normal;
  max-width: initial;
  max-height: initial;
}

#behind-3 {
  position: fixed;
  margin-left: 17%;
  left: -400px;
  top: -50px;
  z-index: -3;
  height: 800px;
  width: 600px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.3);
  border-width: 2px;
  background-color: rgba(255, 255, 255, 0);
  animation: backblob3 120s ease-in-out infinite normal;
  max-width: initial;
  max-height: initial;
}

#gradient1 {
  left: 0;
  top: 0;
  position: absolute;
  height: 600px;
  width: 400px; 
  z-index: -5;
  background: rgb(104,19,218);
  background: linear-gradient(90deg, rgba(104,19,218,1) 0%, rgba(255,17,206,1) 100%);
  animation: fade1 70s ease-in-out infinite normal;
}

#gradient2 {
  left: 0;
  top: 0;  
  position: absolute;
  height: 600px;
  width: 400px; 
  z-index: -6;
  background: rgb(1,56,234);
  background: linear-gradient(90deg, rgba(1,56,234,1) 0%, rgba(55,206,251,1) 100%);
  animation: fade2 70s ease-in-out infinite normal;
}

#gradient3 {
  left: 0;
  top: 0;  
  position: absolute;
  height: 600px;
  width: 400px; 
  z-index: -7;
  background: rgb(30,217,79);
  background: linear-gradient(90deg, rgba(30,217,79,1) 0%, rgba(242,240,71,1) 100%);
  animation: fade3 70s ease-in-out infinite normal;
}

#gradient4 {
  left: 0;
  top: 0;  
  position: absolute;
  height: 600px;
  width: 400px; 
  z-index: -8;
  background: rgb(211,20,0);
  background: linear-gradient(90deg, rgba(211,20,0,1) 0%, rgba(238,129,0,1) 100%);
  animation: fade4 70s ease-in-out infinite normal;
}

#gradient5 {
  left: 0;
  top: 0;  
  position: absolute;
  height: 600px;
  width: 400px; 
  z-index: -9;
  background: rgb(217,10,215);
  background: linear-gradient(90deg, rgba(217,10,215,1) 0%, rgba(242,222,0,1) 100%);
}


/* ------------------------------------------------------------ Navigation Bar ----------------------------------------*/

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Responavigation {  
  margin-left: 30%;
  width: 70%;
  position: fixed;
  top: 7%;
  height: 7%;
  -ms-transform: translateY(-5%);
  transform: translateY(-5%);
  padding: 0;
  z-index: 50;
}

.Responavigation nav {
	  margin-left: 10px;
	    border-color: rgba(255, 255, 255, 1);
  border-width: 1px;
  border-style: none none solid none;
}

.Responavigation nav a {
    color: #ffffff;
    display: block;
}

.Responavigation nav h1 {
    margin: 0;
}

.Responavigation nav h1 a {
	font-family: 'museomoderno', serif;
	font-weight: 600;
	text-decoration: none;
}

.Responavigation nav > ul {
    margin: 0;
    padding: 0;
    text-align: left;
}
.Responavigation nav > ul > li {
    display: inline-block;
    list-style: outside none none;
}
.Responavigation nav > ul > li > a {
	  cursor: pointer;
	  display: block;
  	outline: none;
  	width: 100%;
	  text-decoration: none;
	  padding: 20px;
}

.Responavigation nav > ul li ul {
		background-color: rgba(0, 0, 0, 0.6);
		display: none;
		position: absolute;
		left: 0;
		top: 100%;
		width: 200px;
		z-index: 2000;
		margin: 2 0 0 0;
		padding: 0;
}
.Responavigation nav > ul li ul li {
	  width: 100%;
	  list-style:none;
  	text-align: left;
}
.Responavigation nav > ul li ul li > a {
	  text-decoration: none;
	   padding: 10px 20px;
		color: white;
}
.Responavigation nav ul li:hover {
	  cursor: pointer;
	  position: relative;
}
.Responavigation nav ul li:hover > ul {
  	display: block;
}
.Responavigation nav ul li:hover > a {
	 
}

[type="checkbox"], label {
	  display: none;
}

#hidename {
	display: none;
}

#namehide {
	display: none;
}

/* ------------------------------------------------------------ Image Gallery and Lightbox ----------------------------------------*/

.thumb {
    max-height: 200px;
	margin-left: 4px;
	margin-top: 4px;
}

.lightbox {
    position: absolute;
    z-index: 1000;
    height: 0;
    width: 0;
    text-align: center;
    top: 0;
    left: 0;
	margin-top: 0px;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
    opacity: 0;
}

.lightbox:target {
/** Remove default browser outline */
    outline: none;

    width: 100%;
    height: 100%;
    opacity: 1 !important;
    
}

.lightbox:target img {
    border: solid 17px rgba(77, 77, 77, 0.8);
    opacity: 1;
    webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.light-btn {
    color: #fafafa;
    background-color: #333;
    border: solid 3px #777;
    padding: 5px 15px;
    border-radius: 1px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    top: 45%;
    z-index: 99;
}

.light-btn:hover {
    background-color: #111;
}

.btn-prev {
    left: 2%;
}

.btn-next {
    right: 2%;
}

.btn-close {
    position: absolute;
    right: 2%;
    top: 2%;
    color: #fafafa;
    background-color: #92001d;
    border: solid 5px #ef4036;
    padding: 10px 15px;
    border-radius: 1px;
    text-decoration: none;
	z-index: 99;
}

.btn-close:hover {
    background-color: #740404;
}


/* ------------------------------------------------------------ Narrow Screen ----------------------------------------*/

@media screen and (max-width: 900px) {

  .project {   
    flex-direction: column;
  }
  
  .description {
	text-align: left;
	padding-left: 10px;
	width: 100%;
  }

.description p {
  padding-left: 10px;
  margin-left: 0;
  animation: none;
}

.lbl-toggle {
text-align: left;
}

.blurb {
  margin-left: 0;
  margin-top: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 100%);
}

.headline {
  margin-left: 0;
  margin-right: 0;
}

#behind {
  margin-left: 20%;
    left: -200px;
  height: 500px;
  width: 300px;
}  

#behind-2 {
  left: -450px;
}

/* ------------------------------------------------------------ Navigation Bar - Narrow Screen ----------------------------------------*/

.Responavigation {  
  margin-left: 0px;
    width: 100%;
	height: 40px;
	  position: fixed;
}

	.Responavigation nav ul {
		display: none;
	}
	
	.Responavigation nav ul li h1 {
		display: none;
	}
	
	.Responavigation label {
		display: block;
		background-color: rgba(255,255,255,0);
		width: 40px;
		height: 40px;
		cursor: pointer;
		position: fixed;
		right: 0;
		top: -2px;
	}
	
	.Responavigation nav {
	  margin-left: 0px;
  border-width: 0px;
  border-style: none;
}
	
	
	.Responavigation label:after{
		content:'';
		display: block;
		width: 30px;
		height: 3px;
		background: white;
		margin: 7px 5px;
		box-shadow: 0px 10px 0px #ffffff, 0px 20px 0px #ffffff
	}
	
	.Responavigation [type="checkbox"]:checked ~ ul {
		display: block;
		z-index: 997;
		position: absolute;
		right: 0;
		left: 0;
		top:40px;
	}
	
	.Responavigation nav a {
		color: #fff;
		padding-top: 15px;
	}

	.Responavigation nav ul {	
			background-color: rgba(0,0,0,0.8);
			}
	
	.Responavigation nav ul li {
		display: block;
		float: none;
		width: 100%;
		text-align: left;
		text-indent: 20px;
	}
	
	.Responavigation nav > ul > li {
		margin-left: 0px;
	}
	
	.Responavigation nav > ul li ul li {
		display: block;
		text-indent: 40px;
		float: none;
	}
	
	.Responavigation nav > ul li ul {
		display: block;
		position: relative;
		width: 100%;
		z-index: 998;
		float: none;
		background-color: rgba(0,0,0,0.0);
	}

#namehide {
	display: inline-block;
  position: fixed;
  top: 7%;
  margin-left: 10px;
    padding-bottom: 15px;
  z-index: 999;
    border: 15px;
}

#nameshow {
  margin-bottom: 10px;
  padding-bottom: 17px;
    position: relative;
		display: inline;
}

#nameshow a{
	font-family: 'museomoderno', serif;
	font-weight: 600;
	text-decoration: none;
}

#hidename {
	display: block;
  position: fixed;
  top: 7%;
  height: 37px;
  width: 100%;
  margin-left: 10px;
  border-color: rgba(255, 255, 255, 1);
  border-width: 1px;
  border-style: none none solid none;
}
  
}


@media only screen and (max-height: 900px) {
	
.headline {
  top: 12%;
}

.overflow {
  top: 25%;
  height: 75%;
}

}