@charset "UTF-8";
@import url("../webfonts/Mathanifo_Script/stylesheet.css");
@import url("../webfonts/adelia/stylesheet.css");
@import url("../webfonts/Crimson_Foam/stylesheet.css");
@import url("../webfonts/AddingtonCF_Regular/stylesheet.css");
@import url("../webfonts/The_Seasons_Regular/stylesheet.css");
@import url("../webfonts/pixelart/stylesheet.css");
@import url("../webfonts/pixelart/stylesheet.css");
@import url("../webfonts/slkscr/stylesheet.css");


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
	margin: 0px;
	height: auto;
	overflow-x: hidden;
	border-bottom-left-radius: 0px;
}

.steam_link {
    display: flex;
    justify-content: center; /* Horizontally centers the content */
    align-items: center; /* Vertically centers the content if needed */
}
.steam_link a {
	padding-top: 50px!important;
}

@font-face {
	font-family: 'pixelart';
	src: url('fonts/pixelart.ttf') format('truetype');
}

/* Ensure mobile menu visibility when active */


.games-content {
	position: relative;
	width: 100vw;
	align-content: center;
	justify-content: center;
	z-index: 1!important;
}
.games-content img {
	height: auto;
    width: 100%; /* Make the image fill the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Removes bottom space/gap */
}

.games-text {
    position: absolute; /* Positioned relative to the nearest positioned ancestor (container in this case) */
    top: 0; /* Align to the top of the container */
    left: 0; /* Align to the left of the container */
    width: 100%; /* Overlay covers the full width of the container */
    height: 100%; /* Overlay covers the full height of the container */
    background: linear-gradient(344deg, rgba(0,0,0,0.87718837535014) 51%, rgba(255,255,255,0) 100%);
    color: white; /* Text color */
    display: flex; /* Flexbox for centering content */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    text-align: center; /* Center text alignment */
}

.games-text p{
	width: 50%;
}

.about-content {
    padding-top: 50px;
    display: flex;
    width: 50vw;
    margin-left: calc((100vw - 50vw) / 2);
    align-items: center; /* Changed from align-content to align-items */
    justify-content: center;
}

.games-text p {
    color: white;
    text-align: justify;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	line-height: 1.5;
}

.about-content p {
    color: white;
    text-align: justify;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	line-height: 1.75;
}

h4 {
	font-family: slkscr;
	font-size: 75px;
	color: white;
	text-align: center;
	width: auto;
}
.navbar-container {
	transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1; /* Initially fully visible */
    transform: translateY(0); /* Initially at normal position */
	display: flex;
    justify-content: space-around; /* Or whatever your current styling is */
}

.index-text {
	display: block;
	width: 50vw;
	height: auto;
	text-align: center;
	margin-left: 25vw;
	margin-top: 25vh;
}

.pp-text {
	display: block;
	width: 50vw;
	height: auto;
	text-align: center;
	margin-left: 25vw;
	margin-top: 25vh;
}

.index-text h5 {
	font-size: 100px;
	font-family: slkscr;
	color: white;
}

.index-text h3 {
	font-size: 50px;
	padding-top: 50px;
	font-family: slkscr;
	color: white;
	font-style: italic;
}

.pp-text p {
    color: white;
    text-align: left;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	
	
}

.pp-text h3 {
	font-size: 50px;
	padding-top: 50px;
	font-family: slkscr;
	color: white;
	font-style: italic;
	text-align: left;
}

.pp-text h4 {
	padding-bottom: 100px;
}

.copyright {
    width: 100vw;
    height: auto;
    bottom: 0;
    display: flex;
	padding-top: 50px;
	padding-bottom: 15px;
	text-align: center;
	justify-content: center;
	color: white;
}

.copyright h1 {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

.about-content a {
	display: inline!important;
	font-style: italic;
	text-decoration: none; /* Removes underline */
    color: inherit; /* Inherits the color from the parent element */
	text-decoration: none; /* Optional: removes underline */
    transition: text-shadow 0.3s ease; /* Smooth transition for the glow effect */
}

.about-content a:hover {
	text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700, 0 0 15px #ffd700, 0 0 20px #ffcc00, 0 0 25px #ffcc00, 0 0 30px #ffcc00, 0 0 35px #ffcc00;
}


#fadeDiv {
    transition: opacity 0.4s ease-out;
    opacity: 1; /* Start fully visible */
    display: flex-box;
}

.hidden-navbar {
    opacity: 0; /* Fully transparent when hidden */
    transform: translateY(-100%); /* Move up out of view */
    pointer-events: none; /* Prevents interaction when invisible */
}

.homepage {
    width: 100vw;
    height: auto;
    background: rgb(8,2,14);
    background: linear-gradient(170deg, rgba(8,2,14,1) 7%, rgba(36,9,65,1) 31%, rgba(172,0,172,1) 73%, rgba(255,130,0,1) 100%);
    font-weight: 400;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#lavender {
	font-size: 50px;
}
.main {
    display: flex;
    justify-content: center;
    background-image: linear-gradient(
  180deg,
  hsl(243deg 100% 4%) 19%,
  hsl(243deg 45% 15%) 49%,
  hsl(258deg 49% 23%) 61%,
  hsl(273deg 55% 30%) 69%,
  hsl(287deg 65% 35%) 76%,
  hsl(300deg 100% 34%) 81%,
  hsl(320deg 100% 43%) 86%,
  hsl(332deg 100% 48%) 90%,
  hsl(349deg 100% 58%) 93%,
  hsl(12deg 100% 60%) 97%,
  hsl(31deg 100% 50%) 100%
);
    background-image: none;
    margin: 0px;
}

.gap_filler {
	width: 100%!important
		;
	height: 50px!important;
}

.left {
	width: 15vw;
	background-color: #ECDDCF;
	
}


.home a {
	font-size: 90px;
	color: #9E6158;
}

.home a:hover {
	color: white!important;
}

.right {
	width: 15vw;
	background-color: #ECDDCF;
	z-index: 0;
}

.right img {
    max-width: 100%;
    max-height: 200%;
    margin-top: 121px;
}

.center {
	display: flex;
	justify-content: center;
	flex-direction: column;
  	align-items: center;
	width: 100vw;
	background-color: #010012;
}

/* Style the navbar as a horizontal list 
.navbar {
    display: flex;
    justify-content: space-between;
    color: white;
    padding: 10px;
}
*/

/* Style the navbar as a horizontal list */

.navbar {
    position: fixed; /* Set the position to fixed */
    top: 0; /* Stick it to the top of the viewport */
    left: 0; /* Stick it to the left of the viewport */
    width: 100%; /* Make it span the full width of the viewport */
    height: auto;
    padding: 10px;
    z-index: 100; /* Ensure it's above other elements */
    display: flex; /* Add this property */
    justify-content: space-around; /* Add this property */
	font-family: slkscr;
}

a, img {
    margin: 0!important;
    padding: 0!important;
    display: block!important; /* This removes any line-height or whitespace issues */
}

a {
    display: inline-block; /* or 'block' depending on your layout needs */
    line-height: 0; /* This removes any extra space below the image */
}

.navbar-text {
    top: 0; /* Stick it to the top of the viewport */
    left: 50; /* Stick it to the left of the viewport */
    width: 100vw;
    padding: 0px;
    z-index: 100; /* Ensure it's above other elements */
    display: flex; /* Add this property */
    justify-content: center;
    margin-top: 54px;
}

.navbar-text a {
	padding-right: 70px!important;
	padding-left: 70px!important;
}

#home {
    width: 200px!important;
    position: absolute;
    top: 0;
    left: 100px;
    font-family: "pixelart";
}

nav {
	display: none;
	z-index: 1000;
}

a img {
    border: none; /* Removes the default border that some browsers add on image links */
    transition: opacity 0.3s ease;
}
a:hover img {
    opacity: 0.5; /* Changes opacity on hover to indicate interactivity */
}

#home a {
	color: #9E6158;
	font-size: 70px;
	-webkit-tap-highlight-color: transparent; /* For WebKit browsers */
}

#home a:hover {
	color: white!important;
}

.hidden {
    opacity: 0; /* Start with zero opacity */
    visibility: hidden; /* Hide the element without affecting layout */
    transition: opacity 0.5s, visibility 0.5s; /* Add a transition effect on opacity and visibility */
}

.visible {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Make the element visible */
}

.navbar a {
    text-decoration: none;
    padding: 10px 20px;
    cursor: pointer;
    font-family: slkscr;
}

.navbar h5:hover {
    color: white;
    font-family: slkscr;
}

/* Style the sections */
.section {
    height: 100vh; /* Adjust as needed */
    padding: 20px;
    font-size: 24px;
}

/* Smooth scrolling behavior */
html {
    scroll-behavior: smooth;
}

.bumper {
    height: 25vh;
}

.center h1 {
	font-family: "pixelart";
	text-align: center;
	font-size: 300px;
	font-weight: lighter;
	margin: 0px;
	color: #9E6158;
}

.center h5 {
    font-size: 25px;
    text-align: center;
    margin: 0px;
    color: #3ae4eb;
    font-weight: lighter;
    font-family: slkscr;
	text-decoration: none; /* Optional: removes underline */
    transition: text-shadow 0.3s ease; /* Smooth transition for the glow effect */
}

.center a:hover {
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700, 0 0 15px #ffd700, 0 0 20px #ffcc00, 0 0 25px #ffcc00, 0 0 30px #ffcc00, 0 0 35px #ffcc00;
}

.welcome {
	position: flex;
	width: 100%;
	height: auto;
}

.date-master {
	width: auto;
	display: flex;
	justify-content: center;
}

#center-div {
	border-left: thin solid #9E6158;
	border-right: thin solid #9E6158;
}

.rsvp-parent {
	padding-top: 80px;
	width: auto;
	display: flex;
	align-content: center;
	justify-content: center;
}

button {
	background-color: #ECDDCF;
	height: 75px;
	width: 200px;
	border-color: #9E6158;
	color: #9E6158;
	border-style: solid;
	border-radius: 6px;
	font-size: 30px;
	font-family: "AddingtonCF-Regular";
	transition: background-color 0.7s, color 0.7s;
	transition: border-color 0.7s, color 0.7s;
}


button:hover {
	 background-color: #9E6158;
	 color: #ECDDCF;
	 border-color: #ECDDCF;
     cursor: pointer;

}
.e-with-fixed-bg {
  width: 100vw;
  height: 70vh;
  /* Important */
  position: relative;
  z-index: 1;
}

.bg-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

}

.bg-cover {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-image: url("../images/IMG_4244.JPG");
    transform: translateZ(0);
    will-change: transform;
}

.bg-venue {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url("../images/lyrebird_falls.png");
  transform: translateZ(0); 
  will-change: transform;
}

.bg-venue-sg {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url("../images/shangri-la.png");
  transform: translateZ(0); 
  will-change: transform;
}

.buffer {
	position: flex;
	height: 5000px;
	width: 100vw;
	background-color: white;
}

.schedule {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

h2 {
	text-align: center;
	font-weight: 500;
	font-size: 150px;
	color: #9E6158;
	font-family: "Crimson Foam";
	margin: 0px;
	padding-top: 80px;
	
}

.schedule img {
	width: 80%;
	height: auto;
}

.line {
	display: flex;
	justify-content: center;
	width: 600px;
	height: 1px;
	border-bottom: thin solid #9E6158;
	padding-bottom: 80px;
	margin: auto;
}

.details {
	display: grid;
	place-items: center;
}

.container {
	display: block;
	box-sizing: border-box;
	position: relative;
    overflow: hidden;
}

.hover-image {
  width: 200px; /* Adjust image size */
  height: auto;
  transition: transform 0.3s;
}

.paw-print-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* Prevent paw prints from interfering with mouse events */
  /* Your existing styles for .paw-print-container go here */
}


.paw-print {
  background-image: url('../images/paw-print.png'); /* Add an image for the paw print */
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  animation: fall 4s ease-in infinite, fade 4s ease-in infinite;
  transform-origin: center; /* Set the transform origin to the center of the paw print */
}

@keyframes fall {
  0% {
    transform: translateY(-100vh) rotate(0deg); /* Start from above the screen */
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg); /* End at the bottom of the screen */
    opacity: 0;
  }
}

@keyframes fade {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.grid-box {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: repeat(3, 1fr);
	gap: 80px;
	margin-top: 24px;
}

.box {
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	align-content: center;
}

.box h3 {
    font-family: "Crimson Foam";
    font-size: 74px;
    font-weight: lighter;
    margin: 0px;
    color: #9E6158;
}

.box p {
	font-family: "AddingtonCF-Thin";
	margin: 0px;
	font-size: 20px;
}

.box-image {
	display: block;
	align-items: center;
	align-content: center;
	background-image: url(../images/flowers_2.png);
	height: 150px;
	width: 150px;
	background-size: 150px auto;
	background-repeat: no-repeat;
	border-radius: 199px;
	margin: 0px;
	transition: transform 0.3s;
}

#Lulu {
	background-image: url(../images/lulu.jpg)!important;
}

#Heme {
	background-image: url(../images/Heme.jpg)!important;
}

#Esther {
	background-image: url(../images/Esther.jpg)!important;
}

#Alisha {
	background-image: url(../images/Alisha.jpg)!important;
}

#Rina {
	background-image: url(../images/Rina.jpg)!important;
}

#Sarah {
	background-image: url(../images/Sarah.jpg)!important;
}

#Hayden {
	background-image: url(../images/Hayden.jpg)!important;
}

#MatN {
	background-image: url(../images/MatN.PNG)!important;
}

#Bailey {
	background-image: url(../images/Bailey.jpg)!important;
}

#Harry {
	background-image: url(../images/Harry.jpg)!important;
}

#Zac {
	background-image: url("../images/Zac.jpg")!important;
}

#MattH {
	background-image: url(../images/MattH.jpg)!important;
	cursor: pointer;
}

.venue h3 {
	font-family: "AddingtonCF-Regular";
	font-size: 30px;
	text-align: center;
	font-weight: lighter;
}

.schedule h3 {
	font-family: "AddingtonCF-Regular";
	font-size: 30px;
	text-align: center;
	font-weight: lighter;
}

.venue a, p {
	font-family: "AddingtonCF-Regular";
	font-size: 20px;
	text-align: center;
}

.directions-div {
	padding-top: 40px;
	padding-bottom: 50px;
	display: flex;
	align-content: center;
	justify-content: center;
}

#directions {
	height: 50px;
	width: auto;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 20px;
}


.grid-item a, p {
	font-family: "AddingtonCF-Regular";
	font-size: 20px;
	margin: auto;
	padding: 20px;
}

.grid-item p {
	margin-right: 0px;
}

.grid-item button {
	text-align: center;
	width: 40px;
	height: 40px;
	font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fas .fa-map-marker-alt {
    line-height: 1; /* Adjust the line height to control vertical alignment */
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  /*grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 1fr); */
  gap: 10px; /* Adjust the gap size as per your preference */
}


.grid-item {
	width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* Adjust the padding as per your preference */
}

.grid-container-details {
    display: grid;
    grid-template-columns: auto;
    /*grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 1fr); */
    gap: 10px; /* Adjust the gap size as per your preference */
    border: medium none #9E6158;
    width: 50vw;
    margin-bottom: 50px;
}

.grid-container-details a {
	text-align: center;
	padding-bottom: 40px;
	font-size: 20px;
}

.grid-container-details #subheading {
	margin-top: 10px;
	padding-bottom: 40px;
}

.grid-item-details a, p {
	font-family: "AddingtonCF-Regular";
	font-size: 20px;
	margin: auto;
	padding: 20px;
}


.grid-item-details {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  position: 50px;
}

.grid-item-details h3 {
    font-family: "AddingtonCF-Regular";
    font-size: 30px;
    text-align: left!important;
    font-weight: lighter;
    padding: 0px;
    margin-top: -17px;

}


.grid-item h3 {
	font-family: "AddingtonCF-Regular";
	font-size: 30px;
	text-align: left!important;
	font-weight: lighter;
  }
.grid-item a {
	text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit the color from the parent element (your <h3>) */
	text-align: left!important;
} 
.grid-item a:hover {
	color: white;
}

.grid-container_wrapper {
  display: flex;
  flex-direction: column;
}

.btn-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.grid-container_rsvp {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 10px; /* Adjust the gap size as per your preference */
	
}

.remove-guest {
    display: none;
    height: auto;
    width: 50px;
    padding-bottom: 0px;
    margin-bottom: 12px;
    margin-top: 5px;
    align-items: center;
    justify-content: center;
}


.grid-item_rsvp {
  display: flex;
  justify-content: center;
  align-items: center;
}

.master-container {
    position: relative;
    display: grid;
    grid-template-columns: auto;
    gap: 10px;
    padding-bottom: 20px;
	
}

#guest {
	height: auto;
	padding: 10px;
	
}
.button_wrapper {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto;
	grid-row-gap: 10px;
	justify-content: center;
}


#form {
	background-color: none;
}

input {
	color: #9E6158;
	background: none;
	border-color: #9E6158;
	border-style: solid;
}

select:hover {
	border-color: white;
}

input:hover {
	border-color: white;
}

select {
	background-color: #ECDDCF;
	border-style: solid;
	border-radius: 1px;
	border-color: #9E6158;
	color: #9E6158;
}

.form-control {
	background: none!important;
	color: #9E6158!important;
	border-color: #9E6158!important;
	border: none!important;
}
	
.footer {
	width: 100vw;
	height: calc(100vh - 40vh);
	background-color: #ECDDCF;
}

.main_login {
	display: flex;
	justify-content: center;
	align-content: center;
	margin-top: 10vh;
	
}

#password {
	border-style: solid!important;
	border-width: 1px!important;
	border-color: black!important; 
}

#username {
	border-style: solid!important;
	border-width: 1px!important;
	border-color: black!important; 
}

body {
	background-color: #010012!important;
}
	.grid-container_rsvp {
		border-style: solid;
		border-color: #9E6158;
		margin: 15px;
		border-width: 1px; /* Adjust the thickness as needed */
	}
	
	.grid-container_rsvp {
	  display: grid!important;
	  grid-template-rows: repeat(2, 1fr);
	  grid-template-columns: repeat(1, 1fr);
      gap: 0px!important;
	}
	
	.remove-guest {
		width: 60px;
		position: 30px;
		margin: 0px;
		margin-bottom: 15px;
		margin-top: 15px;
		transform: translateX(-50%);
		margin-left: 50%; /* Adjust the value based on your needs */
	}
	
	.form-control {
		max-width: 450px!important;
		padding-bottom: 10px!important;
	}
	.form-control label {
		padding-bottom: 10px;
		font-size: 35px;
	}
	.form-control input {
	width: 425px;
	font-size: 30px;
	}
	
	.form-control select {
	width: 425px;
	font-size: 30px;
	}
	
	.duplicate-btn {
		font-size: 30px;
	}
	.submit-btn {
		font-size: 30px;
	}
	.remove-guest {
		font-size: 30px;
	}
	
	.welcome h5 {
		font-size: 35px;
	}

		.bg-cover {
		position: fixed;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: 50% 70%;
		background-image: url("../images/IMG_4244.JPG");
		transform: translateZ(0);
		will-change: transform;
		background-repeat: no-repeat;
	}

@media (max-width: 1500px) {
	
	nav {
		display: block;
		position: relative!important;
	}
	
	.navbar-container {
		display: none;
	}
	
	nav {
    position: fixed!important;
    left: 0px;
	}
	#menuToggle {
	  display: block;
	  position: relative;
	  top: 75px;
	  left: 50px; /* Adjust if necessary to better fit your layout */
	  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 55px;
  height: 50px;
  position: absolute;
  top: -7px;
  left: -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: 55px;
  height: 8px;
  margin-bottom: 5px;
  position: relative; 
  background: #ffd700;
  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(-5px, -5px);
  background: #ffd700;
}

/*
 * 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, 0px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 100vw;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
	background: #8800ff;
  /* 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: 35px 0;
  font-size: 30px;
	color: aqua;
	font-family: slkscr;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}
	
	.center {
		display: flex!important;
		
	}
	
	.games-content img {
		z-index: 1!important;
	}
	#home img{
		position: absolute;
		right: 0!important;
		top: 0!important;
	}
	
	.logo-box {
    position: fixed; /* Fixes the position relative to the viewport */
    right: 307px; /* Aligns the logo box to the right edge of the viewport */
    top: 0; /* Aligns the logo box to the top edge of the viewport */
    z-index: 100; /* Ensures it is above other content */
}
	.about-content {
		width: 75vw!important;
		margin: 12vw;
	}
	
	.games-content p {
		width: 75vw;
	}

}