style.css

@font-face {
	font-family: 'Minecraft'; 
	src: url('assets/Minecraft-LCE.eot?') format('embedded-opentype'),
		 url('assets/Minecraft-LCE.ttf') format('truetype'),
		 url('assets/Minecraft-LCE.woff') format('woff'),
		 url('assets/Minecraft-LCE.woff2') format('woff2');
	
	font-style: normal;
	font-weight: normal;
  }
  
  @font-face {
	font-family: 'Terraria'; 
	src: url('assets/terraria.ttf') format('truetype');
	
	font-style: normal;
	font-weight: normal;
  }
  
  @font-face {
	font-family: 'Minecraft'; 
	src: url('assets/Minecraft-LCE-Bold.eot?') format('embedded-opentype'),
		 url('assets/Minecraft-LCE-Bold.ttf') format('truetype'),
		 url('assets/Minecraft-LCE-Bold.woff') format('woff'),
		 url('assets/Minecraft-LCE-Bold.woff2') format('woff2');
	
	font-style: normal;
	font-weight: bold;
  }
  
  body {
	  position: relative;
	  min-width: 100%;
	  min-height: 100%;
	  font-family: 'Minecraft', sans-serif;
	  background-image: url('assets/Panorama.png');
	  background-size: cover;
	  background-attachment: fixed;
	  margin: 0;
	  padding: 0;
	  background-repeat: repeat-x;
	  animation: panorama 60s linear infinite;
  }
  
  .backdrop-blur {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  backdrop-filter: blur(10px);
	  z-index: -30;
  }
  
  .panorama-button {
	  position: fixed;
	  bottom: 4px;
	  left: 4px;
	  height: 40px;
	  width: 40px;
	  background-image: url("/assets/btn-panorama.png");
	  cursor: pointer;
  }
  
  .panorama-button:hover {
	  background-image: url("/assets/btn-panorama-hover.png");
  }
  
  .center {
	  margin-left: auto;
	  margin-right: auto;
	  text-align: center;
  }
  
  .guibox {
	  font-family: 'Minecraft', sans-serif;
	  padding: 2em;
	  border-image: url('/assets/guimenu.png');
	  border-image-slice: 128 128 fill;
	  border-image-width: 64px;
	  margin-top: 10px;
  }
  
  .logo {
	  display: inline-block;
	  aspect-ratio: 720 / 188;
	  width: 720px;
	  max-width: 90%;
	  image-rendering: pixelated;
	  background-size: cover;
  }
  
  .logo {
	  background-image: url('assets/logo.png');
  }
  
  .github-button, .patreon-button, .youtube-button {
	  display: inline-block;
	  height: 80px;
	  width: 80px;
	  image-rendering: pixelated;
	  background-size: cover;
  }
  
  .github-button {
	  background-image: url('assets/btn-github.png');
  }

  .youtube-button {
	background-image: url('assets/btn-youtube.png');
}
  .patreon-button {
	  background-image: url('assets/btn-patreon.png');
  }
  
  .github-button:hover {
	  background-image: url('assets/btn-github-hover.png');
  }
  
  .patreon-button:hover {
	  background-image: url('assets/btn-patreon-hover.png');
  }

  .youtube-button:hover {
	background-image: url('assets/btn-youtube-hover.png');
}
  
  .minecraft-button {
	  display: inline-block;
	  width: 400px;
	  height: 40px;
	  background-image: url('assets/btn-minecraft.png');
	  background-size: cover;
	  image-rendering: pixelated;
	  line-height: 32px;
	  text-decoration: none;
	  color: #ffffff;
	  text-shadow: 1px 1px 0 #000;
	  text-align: center;
	  cursor: pointer;
  }
  
  .minecraft-button:hover {
	  background-image: url('assets/btn-minecraft-hover.png');
	  color: #ffff55;
	  text-shadow: 1.25px 1px 0 #000;
  }
  
  .button-list {
	  display: grid;
	  gap: 8px;
	  margin: 8px;
	  grid-template-columns: auto;
  }
  
  h1 {
	  font-weight: bold;
	  text-shadow: 0.125em 0.125em #3f3f15;
	  color: #FFFF55;
	  font-size: 32px;
  }
  
  h2:before {
	  content: '--- ';
  }
  h2:after {
	  content: ' ---';
  }
  
  /* Credits */
  .multiple-credits-grid {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  grid-template-areas: 	"a b"
				  "c b"
				  "d e"
				  "f g"
				  "h i";
	  gap: 5px;
  }
  
  .single-credit-flexbox {
	  display: flex;
	  gap: 10px;
	  text-align: right;
  }
  
  .single-credit-flexbox ul {
	  margin: 0;
	  list-style: none;
	  padding-left: 0;
	  text-align: left;
  }
  
  .pixelated {
	  image-rendering: pixelated;
  }
  
  @media screen and (max-width: 1000px){
	  h2:before {
		  content: '';
	  }
	  h2:after {
		  content: '';
	  }
  }
  
  @media screen and (max-width: 1100px){
	  .multiple-credits-grid {
		  grid-template-areas:	"a"
					  "c"
					  "b"
					  "d"
					  "e"
					  "f"
					  "g"
					  "h"
					  "i";
		  grid-template-columns: none;
	  }
  }
  
  .container {
	  padding-top: 10px;
	  text-align: center;
	  margin-left: auto;
	  margin-right: auto;
	  width: 1000px;
	  max-width: 90%;
  }
  
  @media screen and (max-width: 530px){
	  .minecraft-button {
		  width: 240px;
		  font-size: 10px;
		  background-image: url('assets/btn-minecraft-small.png');
	  }
	  
	  .minecraft-button:hover {
		  background-image: url('assets/btn-minecraft-small-hover.png');
	  }
  }
  
  @keyframes panorama {
	  0% {
		  background-position: 0;
	  }
	  
	  100% {
		  background-position: calc(100vh / 144 * -820);
	  }
  }