@import url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap");

body {
  margin: 0px;
  font-size: 28px;
}

header {
  z-index: 100;
  position: sticky;
  top: 0;
  background-color: lightcoral;

  height: 4em; 
}

main {
  background-color: lightgreen;
  padding: 1em;
}

footer {
  background-color: lightblue;
}

header,
main,
footer {
  margin: 0px auto 0px auto;
  max-width: 50em;
}

h1 {
  text-align: center;
  font-size: 72px;
}

h2 {
  font-size: 48px;
  margin-bottom: 0.25em;
  margin-top: 0.75em;
}

div.row {
  background-color: rgb(216, 255, 211);
}

p {
  text-align: justify;
  hyphens: auto;
}

/* 
div[class^="col"] {
    border: 1px solid darkblue;
} */

#mod-icon {
  /* width: clamp(4em, 24vw, 10em); */
  width: min(75vw, 10em);
  height: auto;
  max-width: 100%;
}

.gear-container {
  background-color: red;
}

.kis-video-grid {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 1em;
}

.kis-video-wrapper {
  padding: 0;
  display: flex;
  justify-content: center;
  margin: 1em;
}

.kis-video {
  box-sizing: border-box;
  aspect-ratio: 9/16;
  height: 25em;

  padding: 0;
  border-radius: 0.5em;
}

.kis-video:hover {
}

code {
  background: #272822;
  color: #f8f8f2;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  font-family: "Cascadia Code", sans-serif;
}