style.css

/* basic website CSS */

body{
	background-color: #FAFAFF;
	font-family: 'Fira Sans', sans-serif; 
	font-weight: 300;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	font-size: 1em;
	line-height: 1.5em;
	margin: 0vw 0vw 1vw 0vw;
	scrollbar-color: #219ebc #F0ECE3;
	/* -webkit-overflow-scrolling: touch; */
}
/* CSS to change website scrollbar on chrome*/
::-webkit-scrollbar {
	width: 1em;
}

::-webkit-scrollbar-track {
	background: #F0ECE3;
}

::-webkit-scrollbar-thumb {
	background: #219ebc;
}

::-webkit-scrollbar-thumb:hover {
	background: #243143;
}


/* ::-webkit-scrollbar-button:decrement { 
    height: 14px;
    background: url("Images/Arrow.png") no-repeat;	
	border-bottom: 1px solid #F0ECE3;
	background-color: #F0ECE3;
}
	
::-webkit-scrollbar-button:increment  {
	height: 14px;
	background: url("Images/Arrow2.png") no-repeat;	
	background-color: #F0ECE3;
} */


hr{
	margin: 30px 0px; 
	border: dashed; 
	border-width: 1px; 
	border-color: #219ebc;
}


body, html{
	margin: 0vw;
	padding: 0vw;
}

p{
	font-size: 1.3em;
	font-weight: 400;
}

a:focus, button:focus{
	outline: #219ebc solid 5px;
	outline-offset: 2px;
}

h1{
	font-size: 2.5em;
	text-decoration: underline;
	line-height: 1em;
}

h2{
	font-size: 1.8em;
}

h3{
	font-size: 1.5em;
}

h4{
	font-size: 1.3em;
	margin-bottom: 0;
}

button{
	background: none;
	border: none;
}

.skip{
	color: white;
	position: absolute;
	left: 5px;
	top: 5px;
	opacity: 0;
	font-weight: 400;
}

.skip:hover{
	cursor:default;
}

.skip:focus{
	color: white;
	opacity: 1;
	margin: 5px;
}

.indexBod{
	position: absolute;
	height: 100vh;
	width: 100vw;
	background-color: #803d5f;
	/* animation: indexdis 2s linear 4s forwards; */
	visibility: hidden;
	z-index: 1;
}

.indexBodCont{
	position: absolute;
	height: 10vh;
	width: 10vh;
	left: 50%;
	top: 50%;
    transform: translate(-50%, -50%);
	opacity: 0%;
	/* animation: logopulse 2s linear 0s 1 backwards; */
	font-size: 5vh;
	color: #dbd8d0;
	font-weight: 800;
	text-align: center;
	line-height: 5vh;
}

@keyframes logopulse {
	50%{
		opacity: 100%;
	}
}

@keyframes indexdis {
	0%{
		opacity: 100%;
	}
	100%{
		opacity: 0%;
		visibility: hidden;
	}
}

.indexHolder{
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #803d5f;
	color: #f3e5d2;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
}

.indexCont{
	padding-top: 5vh;
	margin: 0px;
	/* margin-top:0.1vh; */
	color: #f3e5d2;
	font-size: 5em;
}

.indeName{
	
}

.indexButtons{
	gap: 2vh;
	margin-top: 5vh;
	display: flex;
	flex-flow: column wrap;
	text-align: center;
}

.indexButton{
	font-size: 2.5em;
	font-weight: 600;
	padding: 20px 30px;
	text-decoration: none;
	color: #43354c;
	background-color: #f3e5d2;
	border: 4px solid #43354c;
	border-radius: 5px;
	box-shadow: 12px 12px #43354c;
	cursor: pointer;
}

.positions{
	display: flex;
	flex-flow: row nowrap;
	position: absolute;
	bottom: 0;
	gap: 2vw;

}

.positions:hover, .positions:focus{
	bottom: 10px;
}


.posiWeb{
	width: 20vw;
	background-color: white;
	border-radius: 10px 10px 0px 0px;
}


.posiTitle{
	background-color: #1B998B;
	color: black;
	padding: 10px;
	font-size: 1.5em;
	font-weight: 600;
	text-align: center;
	border-radius: 10px 10px 0px 0px;
}

/* .indButtBlue{
	color: #18748C;
	border-color: #18748C;
	box-shadow: 12px 12px #18748C;
}

.indButtGreen{
	color: #0A4D47;
	border-color: #0A4D47;
	box-shadow: 12px 12px #0A4D47;
} */


.indexContent{
	display: flex;
	flex-flow: column nowrap;
	position: absolute;
	top: 0%;
	left: 0%;
	background-color: #803d5f;
	height: 100%;
	width: 100%;
	z-index: 0;
}

#indexWelcome{
	color: white;
	text-align: center;
	margin-top: 3vh;
	text-decoration: none;
	animation-name: welcomeFadeIn;
	animation: 2s ease-out 0s welcomeFadeIn;
	animation-fill-mode: forwards;
}

#welcomeLogo{
	align-self: center;
	margin-top: 5vh;
	max-width: 10vw;
	animation: 2s ease-out 7s welcomeFadeIn;
	animation-fill-mode: forwards;
}

@keyframes welcomeFadeIn {
	0%{
		opacity: 0%;
	}
	100%{
		opacity: 100%;
		transform: translateY(5vh);
	}
}


/* CSS for Index Page */

.large{
	background-color: #803d5f;
	width: 100vw;
	/* text-align: center; */
	min-height: 100vh;
	margin: 0px;
	animation: backgrnd 1.5s ease-in-out;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	gap: 3vh;
}

.introTop{
	animation: fadein 1s linear 1.5s forwards;
	opacity: 0;
	padding-top: 5vh;
	margin: 0px;
	/* margin-top:0.1vh; */
	color: rgb(243, 229, 210);
	font-size: 5em;
}

.introTopDiv{
	text-align: center; 
	width: 30em; 
	line-height: 5em;
}

.introItems{
	animation: fadein 1s linear 1.5s forwards;
	opacity: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin-top: 2vh;
	text-align: center;
}

.introItemDiv{
	color: rgb(243, 229, 210);
	padding: 0vw 3vw;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}

.introItemDiv a{
	text-decoration: none; 
	color: rgb(243, 229, 210);
}

#indexLogo{
	max-width: 10vw;
}

/* .lateAnimate{
	animation: goDown 3s 10s;
} */

@keyframes goDown {
	from{transform: translate(0, 0)}
	to{transform: translate(0, 100vh)}
}

@keyframes fadein {
	from{opacity: 0}
	to{opacity: 1}
}

@keyframes backgrnd{
	from{transform: translate(0, -100vh)}
	to{transform: translate(0, 0)}
}
/* CSS for header of website */

.name a{
	color: white;
	text-decoration: none;
	font-weight: 400; 
	font-size: 1.5em; 
	padding-bottom: 0.1vw;
}

/* .name{
	animation: loadAnim 1.7s linear 0s 1 backwards;
}

@keyframes loadAnim {
	0%{transform: translate(0,-200px);}
	100%{transform: translate(0);}
} */

.header{
  color: white;
  padding: 0vw 7vw;
  display: flex;	
  /* height: 4em; */
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 2em;
  font-weight: 800;
  line-height: 1em;
  background-color: #803d5f;
}


.header li{
	list-style-type: none;
	/* animation: loadAnim 1.7s linear 0s 1 backwards; */
}

.header ul{
	padding: 0px;
}

.headLinks{
	overflow:visible;
}

.dropdown {
  float: left;
  overflow: hidden;
  transition: all 0.3s ease 0s;
  /* transition: transform 0.2s; */
}

.dropdown:hover{
  color: #FECB34;
  /* transform: translate(0px, -4px); */
}

/* @keyframes aniname {
	from{transform: translate(0, 0);}
	to{transform: translate(0, -10px);}
} */

.header-category{
  color: white;
  transition: all 0.3s ease 0s;
  margin: 0px;
  padding: 0px;
  text-decoration:none;
  font-weight: 600;
}

.dropdown-button{
	font-size: 1em;
	padding: 0px;
	cursor: pointer;
}

.header-category:hover{
	color: #FECB34;
	font-style: italic;
}

.dropdown-button:focus + .dropdown-content{
	visibility: visible;
}

.dropdown:focus-within .dropdown-content{
	visibility: visible;
}

.dropdown-content {
  visibility: hidden;
  position: absolute;
  background-color: #F0ECE3;
  min-width: 160px;
  transition: visibility 0.65s ease-in;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;
  padding-left: 0vw;
  transform: translate(-20px);
  color: #052C39;
  font-weight: 400;
}

.dropdown-content a {
  float: none;
  /* color: #052C39; */
  /* visibility: hidden; */
  color: black;
  padding: 12px 16px;
  transition: visibility 0.65s ease-in;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #FECB34;
}

.dropdown-content a:focus {
	background-color: #FECB34;
  }

.dropdown:hover .dropdown-content{
	visibility: visible;
}



	
/* CSS for all "works" pages */
.works-content{
	margin: 1vh 7vw;
}

.works-content a{
	color: black;
}

.works-content a:hover{
	color: #168376;
	font-weight: 600;
}


/* CSS for Code page */

.rainbow{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
/*
.rainbow:hover{s
	background-color: blue;
	color: white;
}*/

.rainbow-code{
	flex-basis: 55%;
}

.rainbow-text{
	flex-basis: 40%;
	align-self: center;
	padding: 1em;
	text-align: left;
}

.codepen-carousel{
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
}

.codepen-ex{
    flex: 0 0 auto;
	width: 500px;
}

.codepen-text{
	display: block;
}

.html-code{
	margin-left: 5px;
}

/* CSS for Art/Illustration */
.stickers{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.sticker-content{
	flex-basis: 20vw;
	display: flex;
	flex-flow: column wrap; 
	text-align: center;
}

.graphicDesign{
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
}
.graphicTxt{
	flex-basis: 50%;
}

.subheader{
	margin-top: 5px;
	font-style: italic;
}

.infographic{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}	

.info-image{
	flex-basis: 53%;
}

.info-text{
	flex-basis: 43%;
	align-self: center;
	text-align: left;
}

.char-design{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.char-container {
  position: relative;
  flex-basis: 53%;
}

.char-text{
	flex-basis: 43%;
	text-align: left;
	align-self: center;
}

.char-slide{
	display: none;
}

.char-prev, .char-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.char-next{
	right: 0;
	border-radius: 3px 0 0 3px;
}

.char-prev:hover, .char-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
  text-align: center;
  background-color: #052c39;
  padding: 0.1em 1em;
  color: white;
}


.NIL_Images{
	display: flex; 
	flex-flow: row wrap; 
	margin-bottom: 20px;
	gap: 20px;
}

.NIL_screengrab{
	width: 40%;
}

/* CSS for video page */
.vid{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 1vh 0vw;
}

.vid-embed{
	flex-basis: 55%;
	align-self: stretch;
}

.vid-text{
	flex-basis: 40%;
	align-self: flex-start;
	padding: 1em;
	overflow-y: auto; 
	max-height: 675px;
	/* background-color: #F0ECE3; */
	line-height: 1.7em;
}


/* CSS for photography page */

.photoholder{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.photo{
	flex-basis: 50%;
}

.photo-text{
	flex-basis: 40%;
	align-self: center;
	padding-left: 2vw;
}

.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

.slideshow-container a{
	color: #1b998b;
	
}

/* Hide the images by default */
.slides1{
	display: none;
}

.slides2{
	display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  top: 50%;
  margin-top: -22px;
  padding: 5px;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  transition: 0.6s ease;
  border-radius: 3px;
}

.next {
  right: 7vw;
}

.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
	color: #168376;
}

.prev:focus, .next:focus {
	background-color: rgba(0,0,0,0.8);
	color: #168376;
}

.dot1, .dot2, .dot3, .dot4, .dot7, .dot8 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 10px 5px 0px;
  background-color: #fecb34;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


.active{
  background-color: #ff7a00 !important;
}

.dot1:hover, .dot2:hover, .dot3:hover, .dot4:hover, .dot7:hover, .dot8:hover {
  background-color: #ab5403;
}


.land-photos{
	display: flex;
	flex-flow: row wrap;
	gap: 4px;
	
}

.land-column{
	flex-basis: 33%;
	gap: 3px;
}

.land-column img{
	width: 100%;
}



/* CSS for Resumé page */

.resume-content{
	display: flex;
	flex-flow: row nowrap;
}

.resume-info{
	/* flex-basis: 60%; */
	margin-right: 15px;
}

.resume-me{
	display: flex;
	flex-flow: row nowrap;
	gap: 1em;
	justify-content: center;

}

.resume-me-picture{
	flex-basis: 35%;
	text-align: center;
	/* align-self: center; */
}

.resume-me-text{
	flex-basis: 60%;
	margin-top: 0;
	padding-top: 0;
	margin-right: 20px;
}

.resume-me-text p, .resume-me-text h3{
	font-weight: 400;
	font-size: 1em !important;
	margin-bottom: 0.5em;
	margin-top: 0em;
}

.resume-container1{
	/* margin-left: 5vw; */
	/* display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center; */
	text-align: left;
	background-color: #f0ece3;
	padding: 0em 2vw;
	gap: 3vw;
	margin-right: 1vw;
	max-width: 100%;
}

.resume-certificate{
	background-color: #f0ece3;
	/* padding: 10px 10px 10px 50px; */
	/* margin-right: 1vw; */
	font-weight: 400;
	text-align: left;
}

.resume-certificate ul{
	list-style-type: none;
}

.resume-certificate li{
	flex-basis: 45%;
}

.certif-title{
	font-weight: 600;
	font-size: 1.1em;
}

.certif-list{
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
}

.resume-education{
	display: flex;
	/* flex-flow: column nowrap; */
	flex-flow: row wrap;
	gap: 35px;
	margin-bottom: 2vh;
	text-align: left;
	/* max-width: 40%; */
	padding: 0em 1em;
}

.resume-edu-block{
	flex-basis: 45%;
}

.resume-education a{
	color: black;
	transition: all 0.3s ease 0s;
}
.resume-education a:hover{
	color: #18748C;
}

.resume-skills{
	text-align: left;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	padding: 0em 0em;
	max-width: 40%; 
}

.resume-holder{
	text-align: left;
	background-color: #F0ECE3;
	padding: 10px 50px;
	margin-right: 1vw;
}

.resume-holder h2{
	color: #052C39;
}

.resume-skill-sub{
	padding: 0 1em;
}

.resume-skill-sub li{
	display: inline-block;
	border-right: 1px solid #43354c;
	padding: 0 1em;
	font-weight: 400;
	text-align: left;
	line-height: 2em;
	margin-left: 0;
}

.resume-skill-sub ul{
	padding-left: 0;
}

.resume-list li:last-child{
	border-right: none;
}

.resume-skill-sub button{
	font-size: 1em; 
	cursor: pointer; 
	text-decoration: underline;
}


.resume-skill-sub button:hover{
	font-style: italic;
}

.resume-holder hr{
	border: 1px dashed #052C39;
}

.listHide{
	display: none !important;
}

.listShow{
	display: inline-block;
}



/* #adobe_unfold{
	display: none;
} */

.resume-skill-sub a{
	color: inherit;
	transition: 0.5s;
}

.resume-skill-sub a:hover{
	font-style: italic;
	color: #14766A;
}

.resume-skill-sub h3{
	

}

.certif{
	color: black;
	/* font-style: italic; */
	font-size: 0.9em;
}

.certif:hover{
	color: #14766A;
}

#download-resume{
	color: black;
	font-weight: 400;
	transition: all 0.3s ease 0s;
	text-decoration: none;
}

#download-resume:hover{
	text-decoration: underline;
	color: #14766A;
}

#res-down-hold{
	text-align: center;
	padding: 2px 0px 15px;
	margin-right: 1vw;
	background-color: #f0ece3;
}


/* .resume-more{
	text-align: left;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	gap: 0.5vw;
	margin-right: 1vw;
	align-self: center;
} */

.lookimage{
	display: block;
	max-width: 100%; 
	min-width: 186px;
}

.lookoverlay{
	position: relative;
	bottom: 64px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.8); /* Black see-through */
	color: #f1f1f1;
	width: 100%;
	transition: .5s ease;
	opacity:0;
	color: white;
	padding: 20px 0px;
	font-size: 2em;
	font-weight: 600;
	text-align: center;
}


/* .resume-more a{
	text-decoration: none;
} */

/* .lookcontainer:hover .lookoverlay{
	opacity: 1;
} */

.timeline{
	position: relative;
	top: 0px;
	margin-bottom: auto;
}

.timeline::after { /*line*/
  content: '';
  position: absolute;
  width: 6px;
  background-color:#43354c; 
  background-image: linear-gradient(#052c39, #5d4a69);
  top: 0;
  bottom: 0;
  left:0;
}

.container{
  padding: 10px 0px 10px 40px;
  position: relative;
}

.container::after { /*circles*/
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fafaff;
  border: 4px solid #fecb34;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
  left: -16px;
}

.container::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  z-index: 1;
  left: 30px;
  border: medium solid #f0ece3;
  border-width: 10px 10px 10px 0;
  border-color: transparent #f0ece3 transparent transparent;
}

.content{
  padding: 5px 20px;
  background-color: #f0ece3;
  position: relative;
  border-radius: 6px;
}

.content p{
	font-weight: 400;
	font-size: 1em;
	margin-bottom: 0.5em;
	margin-top: 0em;
}

.content h3{
	font-weight: 400;
	font-size: 1em;
	margin-bottom: 0.5em;
	margin-top: 0em;
}

.content h2{
	margin-bottom: 0.5em;
	line-height: 1em;
}

/* CSS FOR THESIS PAGE */
.thesis h3{
	font-size: 1.3em;	
}

/* CSS for Design page */

.design{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.design-iframe{
	flex-basis: 55%;
}

.design-text{
	flex-basis: 40%;
	align-self: center;
	padding: 1em;
	text-align: left;
}


.slides3{
	display: none;
}

.slides4{
	display: none;
}

.slides7{
	display: none;
}
.slides8{
	display: none;
	text-align: center;
}

.dot3, .dot4, .dot5, .dot6, .dot7, .dot8 {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 5px;
	background-color: #fecb34;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.dot3:hover, .dot4:hover, .dot5:hover, .dot6:hover, .dot7:hover, .dot8:hover{
	background-color: #ab5403;
}


/* CSS FOR GAME DESIGN PAGES */

.cards{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
}

.game-holder{
	margin-top: 40px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
}

.game-preview{
	flex-basis: 45%;
	min-height: 250px;
}

.game-text{
	flex-basis: 45%;
	align-self: center;
}

.memories-holder{
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
}

.memories-images{
	flex-basis: 45%;
}

.memories-text{
	flex-basis: 50%;
}

.memories-vids{
	width: 48%;
}

#prototype{
	width: 100%; 
	height: 600px;
}

/* CSS FOR MODDING */
.cantrip{
	color: #052c39;
}

.progressionList br{
	margin-bottom: 3px;
}

/* CSS FOR THESIS PAGE */
.thesis-interface{
	display: flex;
	flex-flow: column wrap;
	justify-content: space-evenly;
}

/* CSS FOR CONTACT PAGE */
.intouch{
	text-decoration: none;
	text-align: center;
	margin: none;
	padding: none;
	order: 10;
	line-height: 1em;
}
.contact-works-content{
	display:flex;
	flex-flow: row nowrap;
	justify-content: center;
	min-height: 75vh;
	background-color: #803d5f;
}

.contact-content{
	display: flex;
	flex-flow: row nowrap;
	gap: 2vw;
	align-items: center;
	margin: none 7vw;
	width: 70%;
	background-color: #F0ECE3;
	border-radius: 50px;
	padding: 0px 2.5vw 0px 0px;
}


.contact-content button:hover{
	cursor: pointer;
}

.contact-tester{
	color: white;
	height: 100%;
	background-color: #43354c;
	flex-basis: 40%;
	/* min-width: 50%; */
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	padding: 0 1em;
	border-radius: 10px 0px 0px 10px;
}

.contact-tester a{
	color: white;
	text-decoration: underline 3px #FECB34;
	transition: 0.5s;
}

.contact-links{
	cursor: pointer;
	white-space: nowrap;
}

.contact-links:hover a{
	text-decoration-color: #ab5403;
}

.contact-links i{
	padding-right: 1em;
	color: #FECB34;
	transition: 0.5s;
}

.contact-links:hover i{
	color: #ab5403;
}

#myPhone{
	cursor: default;
}

.contact-buttons{
	flex-basis: 35%;
	padding: 0px 7.5%;
}

.contact-form-holder{
	margin: none;
	flex-basis: 50%;
	font-weight: 400;
	padding: 0px 7.5%;
}

.contact-form{
	display: flex;
	flex-flow: column nowrap;
	font-size: 1.2em;
	margin-bottom: 2vh;
}

.contact-form label{
	padding-left: 3px;
	margin-bottom: 5px;
}

.contact-form input{
	/* border-radius: 20px; */
	border: 3px solid #243143;
	padding: 10px;
	background: #f0ece3;
	margin-bottom: 10px;
	transition: 0.5s;
}

#jobOp, #network, #freelance, #intern, #ment, #linked{
	width: 25px;
	height: 25px;
}

.contact-form input:focus{
	background-color: #dbd8d0;
	border-color: #803d5f;
	border-radius: 10px;
	outline: none;
}

textarea{
	border: 3px solid #243143;
	padding: 5px;
	height: 10vh; 
	font-size: 16px;
	background: #f0ece3;
}

textarea:focus{
	background-color: #dbd8d0;
	border-color: #803d5f;
	border-radius: 5px;
	outline: none;
}

#submit{
	cursor: pointer;
	margin-top: 15px;
	width: 50%;
}



/* CSS FOR FOOTER */

footer{
	color: white;
	background-color: #803d5f;
	margin-bottom: 0px;
	padding: 20px 10px 0.5vw 10px;
	font-weight: 400;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	gap: 100px;
}

footer ul{
	list-style-type:none;
	padding-left: 0px;
}

footer a{
	color: white;
	text-decoration: none;
}
footer a:hover{
	color: #FEE495;
	text-decoration: underline;
}

footer_name{
	order: 1;
}
footer_jump{
	order: 2;
}
footer_reach{
	order: 3;
}

#linkedimg{
	filter: invert(100%);
}

/* CSS FOR MEDIA QUERYS */

@media screen and (max-width: 800px), ((pointer:coarse), (pointer:none)){
	.resume-me{
		flex-flow: column nowrap;
		align-items: center;
	}

	.resume-me-picture{
		text-align: left;
		margin-bottom: 1em;
	}

	.contact-content{
		flex-flow: column nowrap;
		margin: none;
		width: 100%;
		background-color: #F0ECE3;
		border-radius: 30px 30px 20px 0px;
		padding: 0px 2.5vw 5vw 0px;
	}
	
	.contact-tester{
		width: inherit;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		padding-top: 5%;
		padding-bottom: 5%;
		border-radius: 20px 10px 10px 20px;
		align-items: flex-start;
	}
	.contact-form input{
		padding: 20px;
		font-size: 1em;
	}

	body{
		overflow: auto;
	}

	.large{
		flex-flow: column nowrap;
		overflow: auto;
	}
	
	.introTop{
		padding-top: 0vh;
		margin-top: 0vh;
		font-size: 2.5em;
	}

	#indexLogo{
		max-width: 30vw;
	}

	.introTopDiv{
		line-height: 2.5em;
	}
	
	.introItems{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		/* margin-top: 2em; */
		text-align: center;
		margin-top: 7vh;
	}

	.randimg, .meimg{
		max-width: 40vw;
		align-self: center;
	}	

	.introItemDiv{
		padding: 0vw;
		font-size: 1em;
	}
	
	.header{
		padding: 0vw 1vw;
		flex-flow: column nowrap;
		justify-content: space-around;
		align-items: center;
	}	
	.site-navigation{
		order: 3;
	}
	.name{
		display: none;
	}
	.logo-img{
		order: 1;
		padding-bottom: 1vh;
	}
	
	.land-column{
		flex-basis: 100%;
		max-width: 100%;
	}
	
	
	.resume-info{
		flex-basis: 100%;
	}

	.resume-container1{
		flex-basis: 100%;
		flex-flow: column nowrap;
		padding-right: 0px;
		margin-right: 0px;
	}

	.resume-holder{
		margin-right: 0;
		padding: 10px 20px;
	}

	.resume-education{
		flex-basis: 100%;
		max-width: 100%;
		justify-content: flex-start;
		gap: 10px;
	}

	.resume-edu-block{
		flex-basis: 100%;
	}
	

	.resume-skills{
		flex-basis: 100%;	
		width: 95%;
		max-width: 100%;
		justify-content: flex-start;
		align-self: left;
		text-align: left;
		padding-left: 1em;
		padding-right: 1em;
	}
	.resume-me-picture{
		flex-basis: 100%;
	}
	.resume-me-text{
		flex-basis: 100%;
	}
	
	.resume-certificate{
		margin-right: auto;
	}

	#res-down-hold{
		padding-left: 2em;
		padding-top: 2px;
		margin-right: auto;
	}
	/* .resume-more{
		flex-flow: row wrap;
		gap: 0px;
	} */
	
	/* .lookimage{
		width: 40vw;
	} */
	
	.sticker-content{
		flex-basis: 70%;
	}


	.design-iframe{
		flex-basis: 100%;
	}
	
	.design-text{
		flex-basis: 100%;
		align-self: center;
		padding: 1em;
		text-align: left;
	}

	.game-holder{
		margin-top: 20px;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-evenly;
	}

	.game-text{
		padding: 0px 10px;
	}

	footer{
		gap: 20px;
	}

	footer_name{
		order: 3;
		padding-bottom: 2vh;
	}
	footer_jump{
		margin: 0vw 10vw;
		order: 1;
	}
	footer_reach{
		margin: 0vw 10vw;
		padding-top: 0;
		order: 2;
	}
}

@media screen and (max-width: 1150px){
	.contact-content{
		flex-flow: column nowrap;
		margin: none;
		width: 100%;
		background-color: #F0ECE3;
		border-radius: 30px 30px 20px 0px;
		padding: 0px 2.5vw 5vw 0px;
	}

	.resume-me{
		gap: 1em;
	}
	
	.memories-images{
		flex-basis: 100%;
	}

	.memories-text{
		flex-basis: 100%;
	}

	#prototype{
		height: 400px;
	}
	
	.memories-vids{
		width: 100%;
	}
	
	.contact-tester{
		width: inherit;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		padding-top: 5%;
		padding-bottom: 5%;
		border-radius: 20px 10px 10px 20px;
		align-items: center;
	}

	.contact-tester a{
		color: white;
		text-decoration: underline 1px #FECB34;
		transition: 1s;
	}

	.contact-form input{
		padding: 15px;
		font-size: 1em;
	}

	.rainbow{
		flex-flow: column nowrap;
	}
	.rainbow-code{
		flex-basis: 100%;
	}
	.rainbow-text{
		flex-basis: 100%;
		padding-left: 0em;
	}
	
	.vid{
		flex-flow: column nowrap;
	}
	.vid-embed{
		flex-basis: 100%;
	}
	.vid-text{
		flex-basis: 100%;
	}
	
	.resume-info{
		flex-basis: 100%;
	}
	.timeline{
		flex-basis: 100%;
	}
	.resume-content{
		flex-flow: row wrap;
	}

	
	.NIL_Images{
		display: flex; 
		flex-flow: column wrap; 
		margin-bottom: 20px;
		gap: 0px;
	}

	.NIL_screengrab{
		width: 100%;
	}
	
	.info-image{
		flex-basis: 100%;
	}

	.info-text{	
		flex-basis: 100%;
		padding: 0vw 2vw;
	}
	
	.char-container {
		flex-basis: 100%;
	}
	.char-text{
		flex-basis: 100%;
		padding: 0vw 2vw;
	}
	
	.photo{
		flex-basis: 100%;
	}
	.photo-text{
		flex-basis: 100%;
		padding: 0vh 2vw 1vh;
	}
	
	.land-column{
		flex-basis: 50%;
		max-width: 50%;
	}
	
	.design-iframe{
		flex-basis: 100%;
	}
	
	.design-text{
		flex-basis: 100%;
		align-self: center;
		padding: 1em;
		text-align: left;
	}
	
}


@media screen and (min-width: 1151px){
	.timeline{
		flex-basis: 33%;
	}
	
	.resume-info{
		flex-basis: 66%;
	}

	footer{
		justify-content: center;
		gap: 10vw;
	}
}



/*
@media screen and (orientation: portrait){
	.header{
		padding: 0vw 1vw;
		flex-flow: column nowrap;
		justify-content: space-around;
		align-items: center;
	}
	.site-navigation{
		order: 3;
	}
	.name{
		display: none;
	}
	.logo-img{
		order: 1;
		padding-bottom: 1vh;
	}
	
	.land-column{
		flex-basis: 100%;
		max-width: 100%;
	}
	
	
	.resume-info{
		flex-basis: 100%;
	}
	.resume-container1{
		flex-flow: column nowrap;
		padding-right: 0px;
		margin-right: 0px;
	}
	
	.resume-education{
		flex-basis: 100%;
		max-width: 100%;
	}
	.resume-skills{
		flex-basis: 100%;
		max-width: 100%;
	}
	.resume-me-picture{
		flex-basis: 100%;
	}
	.resume-me-text{
		flex-basis: 100%;
	}
	.resume-more{
		flex-flow: row wrap;
		justify-content: flex-start;
		gap: 0vw;
	}
	
	
	.sticker-content{
		flex-basis: 70%;
	}

}
*/



@media screen and (min-width: 2000px){
	.contact-tester{
		padding-left: 10%;
	}
	
	.resume-content, .works-content{
		margin: 1vh 15vw;
	}
	.header{
		padding: 0vw 7vw;
	}
}