/* reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0;}
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* main style */

body { 
  font-size: 16px;
  line-height: 1.75;
  background: #0C0B08 url(noisy.png);
  display: flex;
  justify-content: center; 
  align-items: center;
  margin: 0 auto;
  height: 100vh;
}

main { padding: 2rem; }

.pixelated {
  image-rendering: pixelated;
}

.opacity { filter: invert(100%); opacity: 0.5; transition: 0.5s ease-in-out; }
.opacity:hover { opacity: 0.9; transition: 0.5s ease-in-out; }

@media only screen and (max-width: 768px) {
main {
    width: 100%;
	}
}

@media only screen and (max-width: 480px) {
main {
    width: 100%;
	}
}