body {   background-image: url("./images/spiderman.jpg");
	background-size: cover;
  	background-repeat: no-repeat;
    background-size: 50vw 90vh;
	background-color: #181818;
	background-position: center top 10%;
}		

.navbar-nav {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

/* Add some basic styling to the navigation bar and body */
		.body {
			font-family: Arial, sans-serif;
      color: #dedede;

		}
		.navbar {
			background-color: #010101;
			color: #fff;
			text-align: center;
		}
		.navbar a {
			color: #fff;
			text-decoration: none;
		}
		.navbar a:hover {
			background-color: #787878;
		}

.offwhite-paragraph {
			background-color: #F5F5F5; /* off-white background */
			opacity: 70%;
			color: #222; /* off-black text towards grey */
			padding: 10px; /* add some padding for better readability */
			text-align: center; /*moves the text into the centre */
		  }

.footer {
			background-color: #DEDCDE; /* off-black background */
			padding: 20px; /* add some padding for better readability */
			display: flex; /* make the footer a flex container */
			justify-content: center; /* center the footer grid horizontally */
			position: fixed; /* position the footer absolutely */
			bottom: 0; /* pin the footer to the bottom of the page */
			width: 100%; /* make the footer full-width */
		  }
		  
.footer-grid {
			display: grid; /* make the footer grid a grid container */
			grid-template-columns: repeat(4, 1fr); /* create a grid with 4 columns */
			gap: 20px; /* add a gap between grid cells */
		  }
		  
.footer-link {
			color: #FFFFFF; /* white text color */
			text-decoration: none; /* remove underline from links */
		  }
		  
.footer-link:hover {
			color: #CCCCCC; /* light grey text color on hover */
		  }
@media screen and (orientation: landscape) and (max-width: 413px) {

	h1 {
		visibility: hidden;
	}
}


@media screen and (orientation: portrait) and (max-width: 413px) {
	h1 {
		visibility: hidden;
	}
	body {
		background-size: 75vw 80vh;
		background-color: #181818;
	}

	.navbar-toggler-icon, .navbar-toggler {
		visibility: visible;
	}
}
@media screen and (min-width: 414px) and (max-width: 915px) {
	body {
		background-image: url("./images/spiderman.jpg");
		background-color: #181818;
	}
		/* .image-grid {
			display: grid;
			grid-template-columns: repeat(1, 1fr);

}
		.image-grid img {
			width: 100%;
			height: auto;
		} */
	/* .offwhite-paragraph, .footer {
		visibility: hidden;
	} */
	h1 {
			visibility: hidden;
	}
	.navbar-toggler-icon, .navbar-toggler {
		visibility: hidden;
	}
	.navbar {
		visibility: visible;
	}

}

@media screen and (orientation: landscape) and (min-width: 916px) and (max-width: 1194px) {
	body {
		background-image: url("spiderman.jpg");
		background-color: #181818;
		background-size: 75vw 90vh;
	}
		/* .image-grid {
			display: grid;
			grid-template-columns: repeat(1, 1fr);

}
		.image-grid img {
			width: 100%;
			height: auto;
		} */
	.offwhite-paragraph, .footer {
		visibility: hidden;
	}
	h1 {
			visibility: hidden;
	}
	.navbar-toggler-icon, .navbar-toggler {
		visibility: hidden;
	}
	.navbar {
		visibility: visible;
	}

}

@media screen and (min-width: 1195px) {
	body {
		background-image: url("./images/spiderman.jpg");
		background-position: center top 10%;
		background-size: 50vw 100vh;
		background-color: #DEDCDE;
	}
	button {
		visibility: hidden;
		display: none;
	}
	.navbar {
		visibility: visible;
	}
	#homeforLandscape {
		visibility: hidden;
	}
	.image-grid {
    	display: grid;
    	grid-template-columns: repeat(3, 1fr);
    	gap: 10px;
    	align-items: center; /* Center items vertically */
    	justify-items: center; /* Center items horizontally */
    	max-width: 100vw; /* Limit grid width to viewport width */
    	margin: 0 auto; /* Center the grid */
}

	.image-grid img {
    	width: 100%;
    	height: auto; /* Allow images to maintain their aspect ratio */
	}
}

.cookie-prompt {
  	background-color: #222;
  	color: #eee;
  	text-align: center;
  	padding: 8px 0;
  	font-size: 0.9em;
  	font-family: Arial, sans-serif;
  	position: relative;
  	margin-top: 10px;
  	border-top: 1px solid #444;
}
h1 {
    font-family: Arial, sans-serif;
    color: #DEDCDE;
    position: absolute;
    bottom: 20px;
    left: 30%;
    transform: translateX(-50%);
}
/* .image-grid img {
	width: 100%;
	height: auto;
} */