@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
@font-face {
  font-family: winclassic; /* set name */
  src: url(https://files.catbox.moe/at34sp.otf); /* url of the font */
}

@font-face {
font-family: 'NeoDgm';
src: url(https://humantooth.neocities.org/fonts/neodgm_pro.woff) format('woff');
font-weight: normal;
}

body, html {
  background-image: url("assets/khbg.webp");
  background-size: cover;
	padding: 0;
	margin: 0;
	font-size: 13px;
	color: white;
	font-family: 'Source Code Pro', monospace;
	background-attachment: fixed;
}

.theweb {
  display: grid;
  grid-template:
    "header header header"
    "main main sidebar"
    "footer footer footer"
    / 200px 1fr;
}

/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
***/


.navigation {
  border: ridge;
  background: black;
}


.welcome {
  margin: 5px;
  background-image: url("https://i.pinimg.com/236x/3e/74/27/3e7427a9fca361a573bd9f30b18ba9f9.jpg");
  display: grid;
  grid-template:
    "box1 box1"
    "box2 box3"
    / 1fr;
}

.welcome p {
  margin: 15px;
}

.welcome img {
  margin: 15px;
}

header { 
  grid-area: header;
  height: 300px;
  background-repeat: no-repeat;
  background-image: url("https://static.wikia.nocookie.net/logopedia/images/0/01/Kingdom_Hearts_II_Logo.png/revision/latest?cb=20240907234552");
  background-size: 80%;
  background-position: center;
}


aside {
  display: grid;
  grid-area: sidebar;
  grid-template:
    "nav"
    "music"
    / 1fr;
}

main { 
  grid-area: main;
  border: ridge;
  background: black;
  height: 900px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  
}

footer {
  display: flex;
  justify-content: center;
  grid-area: footer; 
  height: 100px;
  background-size: cover;
}

.infobox1 {
  border: ridge;
  margin: 15px;
  background-color: black;
  grid-area: box1;
}

.boxinbox {
  display: flex;
}

.boxinbox img {
  max-width: 70%;
}


.infobox1 h1 {
  margin: 10px;
}

img {
	max-width: 80%;
}

.para1 {
  
}

.infobox2 {
  border: ridge;
  margin: 15px;
  background-color: black;
  grid-area: box2;
  width: 400px;
}


.infobox3 {
  border: ridge;
  margin: 15px;
  background-color: black;
  grid-area: box3;
}

.page {
	padding: 24px;
	background-color: black;
}

.page h1:first-child {
	margin-top: 0;
}

.wrapper {
	margin: 0 auto;
	width: 1100px;
}

.menu {
	text-align: center;
	margin-bottom: 24px;
	margin-top: 24px;
}

.menu a {
	color: white;
}



#hof1 {
  background-image: url(https://i.pinimg.com/1200x/b3/35/17/b33517478ea1f5e5d38178a38caeb64e.jpg);
    background-position: center;
    
}

#hof2 {
  background-image: url(https://i.pinimg.com/736x/18/b4/f8/18b4f84259050fa429d9eea6f9cf69d4.jpg);
    background-position: center;
}

#hof3 {
  background-image: url(https://images.launchbox-app.com//d1cc3127-8b16-4947-9891-52d4865d7e11.png);
  background-position: center;
  background-size: cover;
}

#hof4 {
  background-image: url(https://www.nintendo.com/eu/media/images/10_share_images/games_15/nintendo_ds_22/H2x1_NDS_PokemonPlatinum_enGB_image1600w.jpg);
  background-size: cover;
}

#hof5 {
  background-image: url(https://static0.thegamerimages.com/wordpress/wp-content/uploads/2020/09/pokemon-black-and-white.jpg);
  background-size: cover;
  background-position: center;
}

.navigation {
  border: ridge;
  position: static;
  color:white;
  grid-area: nav;
}

h1 {
  font-family: NeoDgm;
  font-size: 22px;
}

h2, h3, h4, h5 {
	font-size: 12px;
}

h1 {
	border-bottom: 1px solid white;
}

h2 {
	border-bottom: 1px dotted white;
}

a {
  color: white;
}

table {
	border-collapse: collapse;
}

td, th {
	vertical-align: top;
	border: 1px solid white;
	padding: 3px 6px;
}

th {
	background: white;
	color: black;
}

.width-50 {
	max-width: 50%;
}

.border {
	padding: 3px;
	border: 1px solid white;
}

table.border-0 th, table.border-0 td {
    border: 0;
}

.border-0 {
    border: none;
}

#nav {
  display: grid;
  height: 220px;
}

#nav a {
    margin-top: 5px;
    margin-bottom: 5px;
    color: #000;
    text-decoration: none;
    text-align: center;
    border: 1px solid #003c74;
    background: linear-gradient(180deg, #fff, #ecebe5 86%, #d8d0c4);
    padding: 5px;
    font-family: winclassic;
    width: auto;
    height: auto;
    border-radius: 3px;
}


#nav a:hover{
    box-shadow: inset -1px 1px #fff0cf,inset 1px 2px #fdd889,inset -2px 2px #fbc761,inset 2px -2px #e5a01a;
}