body {
 image-rendering: smooth;
}

img {
 outline: 1px solid black;
}

img:hover {
 cursor: pointer;
}

h1, h2 {
 margin-bottom: 0.5rem;
}

@media only screen and (max-width: 650px) {
 .para {
  margin-bottom: 2rem;
 }
}

.fullscreen {
 z-index: 9999;
 position: fixed;
 max-width: none;
 max-height: none;
 width: 100vw !important;
 height: 100vh !important;
 left: 0;
 top: 0;
 object-fit: contain;
 object-position: center;
 background: var(--dark);
}

.tri {
  padding-bottom: 0.5em;
}

.tri img {
 width: 40vw;
}

@media only screen and (max-width: 650px) {
 .tri {
  display: flex;
  flex-direction: column;
  gap: 0;
 }

 .tri img {
  width: 100%;
 }
}