/* Designed by Joshua Saint-Ulysse 13NOV24 */

body {
	/* margin-top: 2em; */
	margin-right: 3em;
	margin-bottom: 2em;
	margin-left: 3em;
	background-color: #231F20;
}

body p {
	font-family: 'poppinslight', sans-serif;
	text-decoration: none;
	color: #FCCC06;
}

body pre {
	font-family: 'poppinslight', sans-serif;
	text-decoration: none;
	color: #FCCC06;
}

body a {
	font-family: 'poppinslight', sans-serif;
	color: #FCCC06;
}

nav img {
	width: 110px;
	height: 110px;
}

#nav1 a {
	font-family: 'poppinsreg', sans-serif;
	text-decoration: none;
	color: #FCCC06;
}

#nav1 .rp1_title1, #nav1 .rp1_title2, #nav1 p {
	color: #231F20;
}

/* Navbar img and links */

header {
	margin-bottom: 4em;
}

#repos1 {
	position: relative;
}

.rp1_img {
	position: absolute;
	top: -44px;
	left: -16px;
}

.rp1_title1 {
	position: absolute;
	top: 25px;
	left: 19px;
	font-size: 14px;
}

.rp1_nav1_1 {
	position: absolute;
	top: 8px;
	right: 193px;
}

.rp1_nav1_2 {
	position: absolute;
	top: 8px;
	right: 146px;
}

.rp1_nav1_3 {
	position: absolute;
	top: 8px;
	right: 62px;
}

.rp1_nav1_4 {
	position: absolute;
	top: 8px;
	right: 0px;
}


	/* Mobile */
	@media screen and (min-width: 320px) {

				/*
				From Here to End Comment, 
				Code Sourced From Erik Terwan
				24th of November 2015
				MIT License
				*/

				.rp1_nav1_1, .rp1_nav1_2, .rp1_nav1_3, .rp1_nav1_4 {
					display: none;
				}

				* {
				  scroll-behavior: smooth;
				}
				
				/* Menu code starts here */
				
				#menuToggle
				{
				  display: block;
				  /* You can also use relative/absolute here if you want to stay on the top */
				  position: fixed;
				  top: 25px;
				  right: 25px;
				  
				  z-index: 1;
				  
				  -webkit-user-select: none;
				  user-select: none;
				}
				
				#menuToggle a
				{
				  text-decoration: none;
				  color: #231F20;
				  
				  transition: color 0.3s ease;
				}
				
				#menuToggle a:hover
				{
				  color: tomato;
				}
				
				
				#menuToggle input
				{
				  display: block;
				  width: 40px;
				  height: 32px;
				  position: absolute;
				  top: -7px;
				  right: -5px;
				  
				  cursor: pointer;
				  
				  opacity: 0; /* hide this */
				  z-index: 2; /* and place it over the hamburger */
				  
				  -webkit-touch-callout: none;
				}
				
				/*
				 * Just a quick hamburger
				 */
				#menuToggle span
				{
				  display: block;
				  width: 33px;
				  height: 4px;
				  margin-bottom: 5px;
				  position: relative;
				  
				  background: #FCCC06;
				  border-radius: 3px;
				  
				  z-index: 1;
				  
				  transform-origin: 4px 0px;
				  
				  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				              opacity 0.55s ease;
				}
				
				#menuToggle span:first-child
				{
				  transform-origin: 0% 0%;
				}
				
				#menuToggle span:nth-last-child(2)
				{
				  transform-origin: 0% 100%;
				}
				
				/* 
				 * Transform all the slices of hamburger
				 * into a crossmark.
				 */
				#menuToggle input:checked ~ span
				{
				  opacity: 1;
				  transform: rotate(45deg) translate(-2px, -1px);
				  background: #231F20;
				}
				
				/*
				 * But let's hide the middle one.
				 */
				#menuToggle input:checked ~ span:nth-last-child(3)
				{
				  opacity: 0;
				  transform: rotate(0deg) scale(0.2, 0.2);
				}
				
				/*
				 * Ohyeah and the last one should go the other direction
				 */
				#menuToggle input:checked ~ span:nth-last-child(2)
				{
				  transform: rotate(-45deg) translate(0, -1px);
				}
				
				/*
				 * Make this absolute positioned
				 * at the top left of the screen
				 */
				#menu
				{
				  position: absolute;
				  right: -50px;
				  max-width: 220px;
				  width: 100vw;
				  max-height: 100vh;
				  margin: -100px 0 0 -50px;
				  padding: 50px;
				  padding-top: 125px;
				  box-sizing: border-box;
				  overflow-y: auto;
				  background: #FCCC06;
				  list-style-type: none;
				  -webkit-font-smoothing: antialiased;
				  /* to stop flickering of text in safari */
				  
				  transform-origin: 0% 0%;
				  transform: translate(100%, 0);
				  
				  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
				}
				
				#menu li
				{
				  padding: 10px 0;
				  font-size: 22px;
				}
				
				#menu li label
				{
				  cursor: pointer;
				}
				
				/*
				 * And let's slide it in from the left
				 */
				#menuToggle input:checked ~ ul
				{
				  transform: none;
				}

				/********** End Comment **********/
	}


	/* Tablet */
	@media screen and (min-width: 768px) {

		#repos2 {
			display: none;
		}

		.rp1_nav1_1, .rp1_nav1_2, .rp1_nav1_3, .rp1_nav1_4 {
			display: block;
		}

	}


	/* Desktop */
	@media screen and (min-width: 1024px) {

		#repos2 {
			display: none;
		}

		.rp1_nav1_1, .rp1_nav1_2, .rp1_nav1_3, .rp1_nav1_4 {
			display: block;
		}

	}