body {
  background-color: black;
  display: grid;
  justify-items: center;
}

nav {
  display: flex;
  justify-content: center;
}

a:hover {color: MistyRose; text-decoration: underline;}

header, a {
  color: Thistle;
  text-align: center;
  padding: 0 10px 0 10px;
  text-decoration: none;
}

main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  width: 60lvw;
  @media (width < 1000px) {width: 90lvw;}
  @media (width < 750px) {width: 60lvw;}
}

image-col {
  grid-column: auto / span 4;
  display: flex;
  flex-flow: column nowrap;
  margin: 10px;
  @media (width < 750px) {grid-column: auto / span 12;}
}

img {
  padding: 10px;
  width: 100%;
}



krita:has(input:checked) img {
    display: none;}
sketch:has(input:checked) img {
    display: none;}
    
    
krita:has(#krita-id:checked) img[class~="krita"] {
    display: inline-block;}