F/* CSS Document */


		 @font-face {
				font-family: franklin gothic;
  				src: url("fonts/franklin-gothic.otf") format("otf");
		}
	 	 @font-face {
				font-family: franklin gothic light ;
  				src: url("fonts/franklin-gothic-light.otf") format("otf");
		}

		 @font-face {
  		       font-family: boston-angel-regular;
               src: url("../fonts/boston-angel-regular-webfont.woff2") format('woff2'),
                    url("../fonts/boston-angel-regular-webfont.woff") format('woff'),
                    url("../fonts/boston-angel-regular.ttf") format('truetype');
		}

		@font-face {
    			font-family: gallient;
    			src: url("../fonts/gallient-webfont.woff") format('woff');
   				font-weight: normal;
    			font-style: normal;

		}
		 
		
		.video-container {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  z-index: -1;			  
			}


		/*
		#home-bg {
			
			 background: url("../images/Portfolio-Backdrop-Trees.jpg");
  			 background-repeat: no-repeat;
  		     background-size: cover;
	
			}

		*/

		 body {
			 background-color: black;
			 margin:0 0 0 0;
			 font-family: neue-haas-grotesk-display, helvetica, sans-serif;
			 font-color: white;
				 
		 }


		 #centerWrapper {
			 width: 90%;
			 background-color: none;
			 margin: 0 auto;
			 border: 5px white;
			  
			 /*this is css and this is how you do a jazzy comment. also remember f5 is how you refresh the preview*/
		 }

		.navbar {
		     display: flex;
  			 justify-content: space-between;
			 align-items: center;     
			 flex-wrap: nowrap;
			 background: none;
			 text-decoration: none;
		     list-style-type: none;

			
			}
		 
		   nav>li>a {
			 display: flex;
			 font-size: 1.1vw;
			 font-family: Helvetica;
			 color: white;
			 padding-left: 50px;
			 font-weight:bold;
			 background-color: none; 
			 text-decoration: none;
			 background: none;
			 list-style-type: none;
			 

		 }
			
		   @media only screen and (max-width: 767px) {
  		 	nav>li>a {
   		 	 	font-size: 11pt;
				  }
			 }
		 
		  /*4k Res */
		  @media only screen and (min-width: 2000px) {
  		 	.nav_links li a {
   		 	 	font-size: 24pt;
				
				  }
		 }
			 
		
		 header {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background-color: none;
			padding-top: 4.5%;
		 }
		 
		   @media only screen and (max-width: 767px) {
  		 	header {
   		 	 padding-top: 9.5%;
				  }
		 }
		 
		  #logo  {
			 
  			display: block;
		    order: 0;
			background: none;
			align-items: flex-start;
		 }

		 
		  @media only screen and (max-width: 767px) {
  		 	#logo {
				width: 100%;
				
				  }
		 }
		 
		  /*4k Res */
		  @media only screen and (min-width: 2000px) {
  		 	.logo a {
   		 	 	font-size: 26pt;
				
				  }
		 }
		

		/* Old Nav Bar that still is in use in some places, like mobile nav on homepage */
		 .nav_links {
			 
  			display: flex;
			list-style: none;
			text-decoration: none;
		 }
		 
		  .nav_links li {
			 display: inline-block;
			 padding: 0px 60px 0 0px;
			 background: none;
			 margin-right: auto;
			 
			
		 }
		 
		  /*For some reason adding just li, a messes with the links in the footer;
		 this is my workaround. For future reference copy the nav code from elsewhere*/
		 
		  .nav_links li a {
			 transition: all 0.3s ease 0s;
			 text-decoration: none;
			 color: white;
			 font-family: Helvetica;
			 font-weight: bold;
			 font-size: 10pt;
		 }
		 
		 @media only screen and (max-width: 767px) {
  		 	.nav_links li {
   		 	 	padding: 0px 40px 0 0;
				  }
			 }
		 
		  /*4k Res */
		  @media only screen and (min-width: 2000px) {
  		 	.nav_links li a {
   		 	 	font-size: 24pt;
				
				  }
		 }
		 
		  .nav_links li a {
			 transition: all 0.3s ease 0s;
		 }
		 
		   .nav_links li a:hover {
			 color: lightgoldenrodyellow;
		 }
		 
		 main {
			 background-color: none;
			 margin: 0 0 0 0;
			 font-size: 1.5vw;
			 font-family: franklin gothic, helvetica, sans-serif;
			 font-weight: lighter;
		 }	
		 
		 #videoBG {
			 position: fixed;
			 z-index: -1;
		 }

		/*Desktop View for contact page */	 
		  @media only screen and (max-width: 767px) {
  		 #desktop-Home {
   		 	 	display: none;
			 
 			 	} 
		 }

		/*Mobile View for Home page */	 
          #mobile-Home {
			 color: white;
			 font-family: neue-haas-grotesk-display, helvectica, sans-serif; 
			 font-size: 2.9vw; 
			 text-align: justify; 
			 line-height: 1.5;
		 }
		 
		 @media only screen and (min-width: 768px) {
  		 #mobile-Home {
   		 	 	display: none;
			 
 			 	} 
		 }


		
		/*Overall grid structure for the work page */
		.grid {
   			display: grid;
   			grid-template-columns: repeat (1, 1fr);
   			row-gap: 3.5%;
			background: none;
			padding-top: 25%;
			padding-bottom: 15%;
			
			 }
		
		/*Figure is each picture that links to the page.*/
 		figure{
  			 background:none;
  			 display:flex;
   			 width:100%;
   			 margin:0;
		     
			 }

		/*The structure of each row (the picture and link under said pic.) I think this keeps the caption
		from floating away. I think.*/
		.inner{
  			display:flex;
  			flex-direction:column;
			
			}
		
		/*t as in text, basically the caption under the pictures that also link to the pages*/
		.t{
  			margin-top:8px;
			font-family: neue-haas-grotesk-display, sans serif;
			font-weight: 500;
			font-size: 1.5vw;
			color: white;
			
  
			}
		
		 @media only screen and (max-width: 426px) {
  		 	.t {
   		 	 	font-size: 9pt;
				margin-top: 4px;
				  }
		 }
		
		 .t>a {
			 text-decoration: none;
			 color: white;
			 
		 }

		 /* Work-pg-hr is for work page hr, and controls the hr on my work page. */
		 .work-pg-hr {
			position: relative; 
			margin-top: 15%; 
			margin-bottom: 5%
			 
		 }
		 
		  @media only screen and (max-width: 767px) {
  		 	.work-pg-hr {
   		 	 	margin-top: 55%;
				margin-bottom: 5%;
				  }
		 }
	
		 .center {
			 display: block;
  		     margin-left: auto;
  			 margin-right: auto;
  		   	 width: none;
		 
		 }

		 p {

			 color: white;
			 	 
		 }
			
	
		 .iframe-container {
           position: relative;
           overflow: hidden;
  		   width: 100%;
 		   padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
		}

		.responsive-iframe {
		  position: absolute;
		  top: 0;
		  left: 0;
		  bottom: 0;
		  right: 0;
		  width: 100%;
		  height: 100%;
}

		
		
		/*Converts Desktop View to Mobile View for About Me Page */
		 @media only screen and (max-width: 767px) {
  		 	#remi-desktop-about-view {
   		 	 	display: none;
			 
 			 	} 
		 }

		 /*Holds About Me structure where I want it/relative to the photo */		 
		 #about-text-container {
			 
			 position: absolute;
			 background: none;
			 width: 90.2%;
			 height: 79%;
			 margin-top: 4%;
			 
			 
		 }

		/*The entire About Me text arrangement/structure */	
		 #about-me-text-chunk {
			color:white;
			background-color: none;
			height: 55%;
			width: 70%;
			float: right;
			margin-top: 5.9%;
			 		 
		 }

		/* Holds together the text next to "About" */	 
		 #about-text-chunk {
			 text-align: justify; 
			 width: 54.5%; 
			 height: 30%; 
			 font-family: neue-haas-grotesk-display, helvectica, sans-serif; 
			 font-weight: 500;
			 font-size: 1vw; 
			 margin-left: 1%; 
			 float: right;
			 margin-top: 7.9%; 
			 margin-right: 2%; 
			 word-spacing: 0.3px;
			 
		 }
		 
		  
		 /* Remember Remi this is just a temporary solution */
		 @media screen and (min-width: 2100px) {
  		 	#about-text-chunk {
   		 	 margin-top: 9.5%;
				
 			 	}
		 }

		 /* Holds together the text next to "Me" */	 		
		 #me-text-chunk {
			 direction: rtl; 
			 text-align: justify; 
			 width: 58%; 
			 height: -15%;  
			 font-family: neue-haas-grotesk-display, helvetica, sans-serif; 
			 font-weight: 500;
			 font-size: 1vw; 
			 float: left; 
			 margin-left: 8.5%;
			 margin-top: 2.7%;
			 	 
		 }
		
		 
		 @media screen and (min-width: 2100px) {
		 #me-text-chunk {
			margin-top: 3.9%; 
			 }
		 }

		
		 
		 /* This is the mobile view of the About Me page */	 
		 #mobile-about-bio {
			 color: white;
			 font-family: neue-haas-grotesk-display, helvectica, sans-serif; 
			 font-size: 12pt; 
			 /*text-align: justify;*/ 
			 line-height: 1.3;
			 font-weight: 500;
		 }
		 
		@media only screen and (min-width: 768px) {
  		 #mobile-about-bio {
   		 	 display: none;
			 
			 
 			 	} 
		 }
		 
		/* Centers my profile pic in mobile view */	 
		 .pfp-center {
			 display: block;
 			 margin-left: auto;
  		     margin-right: auto;
  		     width: 85%;
			 padding-top: 6em;
			 padding-bottom: 3em;
		 }
		
		  /* Holds contact text structure in Desktop View */	 
		  #contact-text-chunk {
			color:white;
			background-color: none;	 
			float: left;
			width: 60%;
			font-family: neue-haas-grotsek-display, helvetica, sans-serif;
			font-size: 11vw; 
			background: none;
			 
			 /*remi dial is struggling to make this work*/
				 
		 }
		 
		 /* stops said structure from floating away */	 
		 #contact-text-container {
			 
			 position: absolute;
			 width: 70%;
			 height: 40%;			 
			 top: 35%;
		     background: none;
			 
			 	 
		 }
	
		 /*Desktop View for contact page */	 
		  @media only screen and (max-width: 767px) {
  		 #desktop-contact-view {
   		 	 	display: none;
			 
 			 	} 
		 }
		  
          /*Mobile View for contact page */	 
          #mobile-contact-view {
			 color: white;
			 font-family: neue-haas-grotesk-display, helvectica, sans-serif; 
			 font-size: 2.9vw; 
			 text-align: justify; 
			 line-height: 1.5;
		 }
		 
		 @media only screen and (min-width: 768px) {
  		 #mobile-contact-view {
   		 	 display: none;
			 
 			 	} 
		 }

		 .footer {
   			position: absolute;
    		bottom: 0;
    		left: 0;
    		right: 0;
    		height: auto;
    		width: 100%;
			padding-bottom: 20%;
			
		}
		 
		 .footer-content {
			 
			font-family: Neue-haas-grotesk-display, helvectica, sans-serif;
			font-size: 1.2vw;
			padding-bottom: 5%;
			width: 100%; 
			background: none;
 	 
		 }
			
			@media only screen and (max-width: 767px) {
  		 	.footer-content {
   		 	 	font-size: 3vw;
				  }
			 }
			
		
   		
		  #footer-Container {
			 width: 100%;
			 height:auto;
			 position: static;
			 background: none;
		 }
		 
		 
		 #textBox {
			 font-family: franklin gothic light, Helvetica, sans serif;
			 width: 100%;
			 background:none;
			 	 
		 }
		 
		 #textContainer {
			 width: 85%;
			 height:auto;
			 position: static;
			 background: none;
			 
		 }

		/*Text box for "work" on my work page */
		 #text-box-work {
			 font-family: boston angel, boston-angel-regular, Helvetica, sans serif;
			 width: 2.2em;
			 font-size: 12.5vw;  
			 background: none;
			 float: right;
			 margin-right: 15%;
			 margin-top: 11%;
			 color: white;
			 	 
		 }
		 
		/*Text container for "work" on my work page, so it doesn't slip and slide away */
		 #text-container-work {
			 width: 90%;
			 height: 25%;
			 position: absolute;
			 background: none;
			 z-index: -100;
			 			 
			 
		 }
		
		/* Img-container, img-item, and img-item img, control the picture formatting when theres more than
		one pic in a row, basically the picture grids.*/
		 	 .img-container {
  				flex-direction:row;
  				display: flex;
  				background-color: none;
 				width: 100%;
  				height: auto;
  				align-content: center;
 				flex-flow: row; 
			    padding-bottom: 2%;
			   }

			.img-item {
 				background-color: none;
				width: 100%;
  				margin: 0.5%;
  				order: 1;  
				
				
				}
		 	
		 	.img-item img {
  				width: 100%;
				object-fit: cover;
				
		 }

		/*Title, subheading and desc are the formatting for the work pages (eg. IRSC Internship Work) that control
		the main title, "created for" and the main text describing the designs*/

		 .title {
			 font-family: "neue-haas-grotesk-display", sans-serif;
			 font-weight: 550;
			 font-style: normal;
			 color: white; 
			 font-size: 46pt; 
			 margin-top: -3%;


		 }
		 
		 /*Basically the "Created For/Design Brief" sections*/
		 .subheading{
			 font-family: "Helvetica", sans-serif;
			 font-weight: 550;
			 font-style: normal;
			 font-size: 19pt;
			 
			 
		 }

		  /*Text explaing design*/
		 .desc {
			font-family: "neue-haas-grotesk-display", sans-serif;
			font-weight: 500;
			font-style: normal;
			margin-top: -2%;
			font-size: 18pt;
			width: 70%;
			margin-bottom: -0.5%;
			 
		 }
	






		 
		 /*4k Res */
		  @media only screen and (min-width: 2000px) {
  		 	.subheading {
   		 	 	font-size: 34pt;
				margin-top: 1%;
				  }
		 }
		 
		 /*~Tablet Size*/
		   @media only screen and (max-width: 768px) {
  		 	.subheading {
   		 	 	font-size: 18pt;
				
				
				  }
		 }
		  /*~L Phone Size*/
		   @media only screen and (max-width: 426px) {
  		 	.subheading {
   		 	 	font-size: 13pt;
			
				  }
		 }
		   /* S Phone Size */
		   @media only screen and (max-width: 320px) {
  		 	.subheading {
   		 	 	font-size: 10pt;
			
				  }  
		 }
		 
		
		 
		   /*4k Res */
		  @media only screen and (min-width: 2000px) {
  		 	.desc {
   		 	 	font-size: 28pt;
				margin-top: -2%;
				  }
		 }
		 
		 
		  @media only screen and (max-width: 768px) {
  		 	.desc {
   		 	 	font-size: 15pt;
				width: 85%;
				margin-top: -3%;
				  }
		 }
		 
		  @media only screen and (max-width: 426px) {
  		 	.desc {
   		 	 	font-size: 9.5pt;
				width: 90%;
				margin-top: -4%;
				margin-bottom: -2%;
				  }
		 }
		 
		  @media only screen and (max-width: 320px) {
  		 	.desc {
   		 	 	font-size: 8pt;
				margin-top: -4.5%;
				  }  
		 }
		 
		  /*4k Res */
		  @media only screen and (min-width: 2000px) {
  		 	.desc {
   		 	 	font-size: 28pt;
				margin-top: -2%;
				  }
		 }
		 
		 
		  @media only screen and (max-width: 768px) {
  		 	.desc {
   		 	 	font-size: 15pt;
				width: 85%;
				margin-top: -3%;
				  }
		 }
		 
		  @media only screen and (max-width: 426px) {
  		 	.desc {
   		 	 	font-size: 9.5pt;
				width: 90%;
				margin-top: -4%;
				margin-bottom: -2%;
				  }
		 }
		 
		  @media only screen and (max-width: 320px) {
  		 	.desc {
   		 	 	font-size: 8pt;
				margin-top: -4.5%;
				  }  
		 }
		 
		  /*4k Res */
		  @media only screen and (min-width: 2000px) {
  		 	.title {
   		 	 	font-size: 85pt;
				
				  }
		 }
		 
		 /*Small Laptop */
		  @media only screen and (max-width: 1024px) {
  		 	.title {
   		 	 	font-size: 35.5pt;
				
				  }
		 }
		 
		 		@media only screen and (max-width: 768px) {
  		 	.title {
   		 	 	font-size: 28pt;
				
				  }
		 }
		 
		  		@media only screen and (max-width: 600px) {
  		 	.title {
   		 	 	font-size: 18pt;
				
				  }
			}
		  		@media only screen and (max-width: 426px) {
  		 			.title {
   		 	 		font-size: 16pt;
				
				  }
			  }
			  
		  @media only screen and (max-width: 376px) {
  		 	.title {
   		 	 	font-size: 14pt;
				
				  }
			  }
			 
		   @media only screen and (max-width: 320px) {
  		 	.title {
   		 	 	font-size: 13pt;
				
				  }  
		 }
		  
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1920px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  font-family: helvectica;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 8x;
  width: 8px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

.videos {
  display: grid;
  grid-template-columns: repeat(3, 1);
  grid-template-rows: 1;
  grid-template-areas: "video-1 video-2 video-3";
  gap: 0.5rem;
  padding: 0.5rem;
  border: 0px dashed blue;
  padding-top: 3%;
}

.video {
  min-height: 6rem;
  border: 0px dashed red;
}

.video-1, .video-2, .video-3 {
  grid-area: video-1; /* All videos occupy the same grid area */
}

/* Media query for smaller screens */
@media only screen and (max-width: 768px) 
{
  .videos {
    grid-template-rows: repeat(3, 1); /* Stack videos vertically */
    grid-template-areas:
      "video-1"
      "video-2"
      "video-3"
  }
}