@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@400..800&display=swap');
@font-face {
    font-family: 'vampireregular';
    src: url('vampire-webfont.woff2') format('woff2'),
         url('vampire-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
	--main-bg-color: #00000a;
	--main-text-color: rgb(230, 230, 230);
	--main-color: #b1292d;
	--main-link-color: #b1292d;
	--secondary-link-color: #3c2b59;
  }
  *, *:before, *:after {
	box-sizing: inherit;
  }
html, body {	
	background: rgb(0,0,34);
	background: linear-gradient(270deg, rgba(0,0,34,1) 0%, rgba(0,0,10,1) 19%, rgba(0,0,10,1) 81%, rgba(0,0,34,1) 100%);
	color: var(--main-text-color);
	font-family: "Eczar", serif;
	font-optical-sizing: auto;
	font-style: normal;
	margin: 0;
	font-size: 16px;
	letter-spacing:1px;
	cursor: default;
}


@media (max-width: 1200px) {
    body {
      background: var(--main-bg-color);
    }

}

/* Firefox only */
@-moz-document url-prefix() {
	* {
	  scrollbar-width: thick;
	  scrollbar-color: var(--main-color) var(--main-bg-color);
	}
	}
	
	/* Works on Chrome, Edge, and Safari */
	*::-webkit-scrollbar {
	  width: 20px;
	}
	
	*::-webkit-scrollbar-track {
	  background: #000022;
	}
	
	*::-webkit-scrollbar-thumb {
	  background: linear-gradient(to bottom, #000022 0%, var(--main-color), var(--main-color) 100%);
	  border-radius: 20px;
	  border: 5px solid #000022;
	  width: 2rem;
	  height: 2rem;
	}
	

.container {
	display: grid;
	grid-template-columns:  minmax(300px, 870px);
	grid-template-areas:
	  'header'
	  'nav'
	  'main'
	  'footer';
	  justify-content: center;

}

header {
	grid-area: header;
	margin: 0 auto;
}

a {
	text-decoration: none;
	color: var(--main-link-color);
}
a:hover  {
	transition: all 0.3s ease;
	position: relative; left: 1.5px; top: 1.5px;
	color: var(--secondary-link-color);
}


  a[href^="http://"]:where(:not([href*="midnight-rain.net"]))::after,
a[href^="https://"]:where(:not([href*="midnight-rain.net"]))::after, 
a[href^="//"]:where(:not([href*="midnight-rain.net"]))::after {
    content: " \2924";
    font-size:10px;
}
a:has(> img)::after {
    content: "" !important;
}
a:has(img):hover {
}

nav {
	grid-area: nav;
}

nav.links {
    margin: 0 auto;
    max-width: max-content;
    height: auto;
    padding: 8px 0px;
    border-radius: 15px;
	word-spacing: 10px;
}
nav.links a {
	font-size: 1.255rem;
	padding: 6px;
	color: var(--main-link-color);
	text-transform: uppercase;
	text-shadow: 2px 2px 2px black;
  }
  nav.links a:hover {
	position: relative; left: 1.5px; top: 1.5px;
	color: var(--secondary-link-color);
  }

main {
	grid-area: main;
}

h1 {
	text-shadow: 2px 3px 3px black;
	color: var(--main-color);
	margin-bottom:-10px;
	font-family: 'vampireregular';
	font-size: 3rem;
}

p {
	line-height: 190%;
	text-align: justify;
	margin-top:5px;
}

footer {
	grid-area: footer;
}


img {
	max-width:100%;
}

main img {
	box-shadow: 3px 4px #b32327;
}
main img:hover {
	box-shadow: none;
	position: relative; left: 3px; top: 4px;
}

i {
	color: #9589b2;
}

u {
	text-decoration: none;
	color: #7a7bcc;
	border-bottom: dashed 1px;
}