*, body {
	margin: 0px;
}

html {
	height: 100vh;
    max-width: 100vw;
	overflow-y: scroll;
	overflow-x: hidden;
}

input, p, h3, h2, h1, header {
	margin: 5px;
}

body, section.main {
	background-color: #f4b266;
	color: #a6ced8;
}

section.right, section.navbar {
	background-color: #632912;
	color: #a6ced8;
}

.primary {
	background-color: #bf442b;
}

.primary h2, .primary h1 {
	color: #a6ced8;
}

.secondary {
	background-color: #33b7d1;
}

.accent {
	background-color: #fbc48e;
}

h1, h2 {
	font-family: "Monofett", monospace;
	font-weight: 400;
	font-style: normal;
	color: #bf442b;
}

label, input, p, h3 {
	font-family: "Potta One", system-ui;
	font-weight: 400;
	font-style: normal;
}

a {
	text-decoration: none;
	color: #bf442b;
}

a:hover {
	text-decoration: none;
	color: #fbc48e;
}

a#now {
	color: #a6ced8;
}

img, div, input, button {
	border-radius: 12px;
}

div {
	max-width: 800px;
	max-height: 600px;
	margin: 20px;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: #33b7d1CC;
}

div {
	padding: 10px;
}

.floatr {
	float: none;
	max-height: 300px;
	margin: auto;
	margin-top: 20px;
	display: block;
}

.floatl {
	display: block;
	float: none;
	width: 80%;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 10px;
	
}

section#index article {
	max-height: 80vh;
}

section.main,
section#index,
section#projects {
	margin-bottom: 5px;
}

section.main {
	position: relative;
	display: inline-block;
	max-height: 100vh;
	width: 100vw;
	/*background-image: url('background-.png');
	background-repeat: repeat;
	background-position: center; 
	the concept is to have my art repeat over and over again as you scroll, to make the website more lively and less empty. but i need more art */
}

section.right {
	width: 100vw;
	height: auto;
	overflow-y: auto;
	position: relative;
	display: inline-block;
	margin-top: 30px;
	background-color: #63291288;
}

div.mainright,
div.mainleft {
	max-height: 40vh;
	margin: 5px;
}

img.floatr{
	object-fit: cover;
	max-width: 80%;
	height: 80%;
}

section#index div,
section#projects div {
	width: 80%;
}

section#projects div {
	max-height: 60%;
	margin: auto;
	margin-top: 3%;
}

section#projects.main {
	width: 100%;
}

section.right div h2 {
	color: #331104;
}

div.experience-container div {
	padding: 0px;
	margin: 0px;
}

section#projects div.primary {
	margin-top: 100px;
}

.maincont {
	row-gap: 5vh;
}

section#index.main article#xp {
	height: 80vh;
}

div#flowerpot {
	background-color: transparent;
	display: grid;
	overflow: hidden;
	justify-content: center;
	grid-template-columns: repeat(2, 40vw);
	grid-template-rows: repeat(2, 30vh);
	border-radius: 0px;
	padding: 0px;
	margin: auto;
	row-gap: 3vh;
	column-gap: 2vw;
	height: 70vh;
	margin-top: 5vh;
	margin-bottom: 5vh;
	max-height: none;
}

section.right div:first-child {
	background-color: #bf442b;
}

section#index.main article#landing {
	padding-bottom: 0px;
	padding-top: 10vh;
	height: 55vh;
}

section#index.main article#landing div {
	min-height: 10vh;
	max-height: 20vh;
	margin-bottom: 5vh;
}

h3.right {
	display: inline-block;
}

img.logo {
	display: inline-block;
	text-align: right;
	width: 30px;
	height: 30px;
	margin-left: 10px;
}

img.aboutme {
	width: 60%;
	height: 80%;
	margin: 20px;
}

section.main ul li {
	padding: 5px;
	list-style-image: url('list style image.png');
}

	section#projects div h2, section#projects div p {
		float: right;
		display: block;
		text-align: right;
	}

	img.projects {
		float: left;
		max-height: 60%;
		max-width: 80%;
		margin: 10px;
	}

section.navbar {	
	position: fixed;
	top: 0px;
	left: 0px;
	height: 70px;
	width: 100%;
}

	section.navbar ul {
		background-color: #f4b266;
		max-width: 330px; /* if img is on, this should be 370px */
		margin-right: 10px;
		margin-left: 20px;
		height: 30px;
		margin-top: 20px;
		padding-left: 0px;
	}


	section.navbar li {
		display: inline-block;
		margin-top: -5px;
	}

	section.navbar a {
		text-decoration: none;
		color: #632912;
	}

	section.navbar a:hover {
		color: #bf442b;
	}

	@font-face {
		font-family: billo;
		src: url(https://dl.dropbox.com/s/klv8tmajlqrb2xz/BILLO___.TTF);
		}

article.resume div {
	width: 80%;
	max-height: 60%;
	overflow: auto;
	overflow-x: hidden;
	margin: auto;
	margin-top: 20px;
}

.checkbox {
	-webkit-appearance: none;
	padding: 6px;
	background-color: #fafafa;
	border: 1px solid #cacece;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

	.checkbox:checked:after {
		content: '\2714';
		font-size: 14px;
		position: absolute;
		top: 0px;
		left: 3px;
		color: #632912;
		margin-top: -5px;
	}

section#projects div.invis {
	background-color: transparent;
	max-width: none;
	width: 99%;
}

section#index.main div {
	margin: auto;
	margin-top: 30px;
}

section#index.main div#welcome {
	max-width: 90vw;
	height: 17vw;
	padding: 10px;
	border-radius: 40px;
	margin: auto;
	margin-top: 50px;
	background-color: #bf442b;
	overflow: visible;
	background-image: url('gif.star.gif');
	background-blend-mode: overlay;
}
	
	header#header-text {
		font-size: 8vw;
		color: #a6ced8;
		text-shadow: 3px 3px #33b7d1;
		font-family: billo, 'bagel fat one';
		text-align: center;
		padding-top: 3%;
	}

section.main article {
	width: 100vw;
	height: 80vh;
	margin: auto;
	padding-bottom: 10vh;
}

section#index.main article#past {
	background-color: #a6ced8;
	padding-top: 25vh;
	padding-bottom: 25vh;
}

section#index.main article#xp {
	background-color: #f4b266;
	height: 70vh;
	padding-top: 0vh;
	padding-bottom: 8vh;
}

	div.flower {
		width: 40vw;
		height: 30vh;
	}
	
		div.flower div {
			margin: 5px;
		}

		div#topl {
			float: left;
			border-radius: 0px 40px 40px 40px;
			}
		
		div#topr {
			float: right;
			border-radius: 40px 0px 40px 40px;
			}
		
		div#botl {
			float: left;
			border-radius: 40px 40px 40px 0px;
			}
			
		div#botr {
			float: right;
			border-radius: 40px 40px 0px 40px;
			}

section#index.main article#now {
	background-color: #a6ced8;
	padding-top: 15vh;
	overflow: auto;
	background-image: linear-gradient(175deg,
      rgba(244, 178, 102, 1) 0, rgba(244, 178, 102, 1) 35%, rgba(166, 206, 216, 1) 60%);
}

/* fades out the bottom */
/* rgba(0,0,0, 1) 0 = colorcode(r,g,b, transparency from 0-1) location within the gradient */
section#index.main article#landing,
section#index.main article#past,
section#index.main article#xp {
  --mask: linear-gradient(to bottom,
      rgba(0,0,0, 0) 0, rgba(0,0,0, 1) 20%,
      rgba(0,0,0, 1) 80%, rgba(0,0,0, 0) 100%
  ) 100% 50% / 100% 100% repeat-x;

  border: hidden;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

/*div.slideshow {
	width: 45%;
	height: 80%;
	background-color: transparent;
	margin-right: 20px;
}


 div#ef {
	width: 45%;
	float: right;
	padding: 0px;
	margin-right: 20px;
	overflow: hidden;
}

div.flower div.slideshow img {
	max-width: 70%;
	object-fit: cover;
	float:right;
	margin-right: 20px;
} */

.maincont {
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	gap: 10px;
}

.mainleft {
	grid-column-start: 2;
	grid-column-end: 4;
}

.mainright {
	grid-column-start: 3;
	grid-column-end: 5;
}

html, body {
	height: 100vh;
}

html, body, section, article {
	width: 100vw;
	margin: 0px;
}

@media only screen and (min-width: 950px) { /* FOR NOT PHONES */

	section.right, section.main {
		top: 70px;
	}

	div:last-of-type {
		margin-bottom: 50px;
	}
	
	section.main,
	section.main#projects {
		max-height: 100vh;
		width: 100vw;
		top: 70px;
	}

	section.right {
		width: 25%;
		max-height: 100vh;
		overflow-y: scroll;
		position: absolute;
		top: 70px;
		right: 0px;
		margin-top: 0px;
	}
	
	.floatr {
		float: right;
		height: 70%;
		margin-right: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
		display: inline-block;
	}
	
	img.floatr {
		max-width: 45%;
	}
	
	.floatl {
		display: inline-block;
		float: left;
		width: 45%;
		margin-left: 20px;
		margin-top: 20px;
		margin-bottom: 0px;
	}
	
	body, section.main {
		height: 100vh;
	}
	
	section#projects div {
		width: 90%;
	}
	
	section#projects.main{
		width: 75%;
	}
	
	body,
	article#resume {
		margin-left: 0px;
	}
	
	section#index.main article#landing {
		padding-bottom: 0px;
		padding-top: 10vh;
		height: 60vh;
	}
	
	section#index.main article#landing div#welcome {
		height: 24vh;
		padding-top: 15px;
		margin-bottom: 5vh;
		margin-top: 3vh;
		width: 75%;
	}
	
	header#header-text {
		font-size: 6vw;
		padding-top: 2vw;
	}
	
	section#index.main article#landing div {
		min-height: 0px;
		max-height: none;
		padding-bottom: 0px;
		margin-bottom: 0px;
		position: relative;
	}
	
	section#index article {
		max-height: 80vh;
		width: 100vw;
	}
	
	section.main div#flowerpot {
		max-width: none;
		max-height: none;
		width: 98%;
		height: 65vh;
		padding-top: 5vh;
		padding-bottom: 5vh;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		grid-template-columns: repeat(2, 40vw);
		grid-template-rows: repeat(2, 28vh);
		row-gap: 5vh;
		column-gap: 1vw;
	}
	
	section.main div#flowerpot div {
		min-width: 39vw;
		max-width: 40vw;
	}
	
	section.main article {
		height: 100vh;
		width: 100%;
		margin-left: 0px;
		float: left;
		padding-bottom: 10vh;
	}
	
	section.main#projects,
	section.main article#resume	{
		overflow: auto;
	}
	
	section.main article#resume{
		padding-bottom: 10vh;
		margin-bottom: 10vh;
	}
	
	section.right {
		background-color: #632912;
	}
	
	section.right div:first-child {
		background-color: #33b7d1CC;
	}
	
	section.right div h2 {
		color: #bf442b;
	}
	
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
	scrollbar-width: auto;
    scrollbar-color: #fbc48e #bf442b;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #bf442b;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #fbc48e;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }