:focus-visible {
  outline : .4em solid;
}

body {
  overflow       : hidden;
  margin         : 0;
  width          : 100vw;
  height         : 100vh;
  display        : flex;
  flex-direction : column;
}

header {
  z-index         : 1;
  box-sizing      : border-box;
  padding         : .5em;
  min-height      : 130px;
  display         : flex;
  justify-content : center;
  align-items     : center;
}

header > div {
  flex-shrink : 0;
}

#header-logo {
  width  : 5em;
  height : 5em;
}

#header-text {
  margin-left    : .5em;
  border-left    : .1em solid;
  padding-left   : .5em;
  display        : flex;
  flex-direction : column;
}

main {
  overflow        : hidden auto;
  padding         : 2em;
  display         : flex;
  flex-wrap       : wrap;
  justify-content : center;
  align-items     : center;
  gap             : 2em;
}

.tile-description {
  width : 32em;
}

.tile-button-container {
  width           : 100%;
  height          : fit-content;
  display         : flex;
  justify-content : center;
  gap             : 1em;
}

.tile-button:hover {
  width : 18em;
}

.tile-separator, .tile-section-name, .tile-control, .tile-music-file, .tile-article-content img {
  width : 100%;
}

.tile-separator {
  display     : flex;
  align-items : center;
}

.tile-separator-line {
  border-top : .2em solid;
  flex-grow  : 1;
}

.tile-separator-line:first-child {
  margin-right : .5em;
}

.tile-separator-line:last-child {
  margin-left : .5em;
}

.tile-navigate, .tile-music, .tile-picture, .tile-video {
  border          : .2em solid;
  border-radius   : 1em;
  display         : flex;
  flex-direction  : column;
  justify-content : end;
  align-items     : center;
}

.tile-navigate, .tile-music, .tile-name, .tile-music-name {
  box-sizing : content-box;
}

.tile-navigate {
  width : 16em;
  scale : 1;
}

.tile-navigate:hover {
  scale : 1.1;
}

.tile-music {
  width : 20em;
}

.tile-picture, .tile-video {
  width : min-content;
}

.tile-article {
  width : 36em;
}

.tile-error {
  display        : flex;
  flex-direction : column;
  align-items    : center;
}

.tile-name, .tile-music-name {
  display     : flex;
  flex-grow   : 1;
  align-items : center;
}

.tile-name {
  min-height : 4em;
}

.tile-music-name {
  padding : 1em;
  height  : 4em;
}

.tile-section-name {
  border-bottom  : .2em solid;
  padding-bottom : .5em;
}

.tile-control {
  border-top : .2em solid;
  display    : flex;
}

.tile-control-button {
  padding   : .5em 0;
  flex-grow : 1;
}

.tile-cover, .tile-control-button:first-child {
  border-bottom-left-radius : 1em;
}

.tile-cover, .tile-control-button:last-child {
  border-bottom-right-radius : 1em;
}

.tile-error-dump {
  margin         : 1em 0;
  border         : .2em solid;
  border-radius  : 1em;
  padding        : 1em;
  display        : flex;
  flex-direction : column;
}

.tile-error-cover {
  border-radius : 1em;
}

.tile-cover, .tile-error-cover {
  width  : 16em;
  height : 16em;
}

.tile-article-cover {
  border-top-left-radius  : 1em;
  border-top-right-radius : 1em;
  width                   : 36em;
  height                  : 18em;
  filter                  : brightness(25%);
}

.tile-music-cover {
  width  : 20em;
  height : 20em;
}

.tile-picture-file, .tile-video-file {
  height : 20em;
}

.tile-article-content {
  border-top : .2em solid;
}

.tile-article-content p {
  margin : 1em 0;
}

.tile-article-content h1, .tile-article-content h2, .tile-article-content h3, .tile-article-content h4 {
  margin : 1em 0;
}

.tile-article-content ul {
  margin       : 1em 0;
  padding-left : 1em;
}

.tile-article-content ul li {
  padding-left : 1em;
}

.tile-article-content table {
  margin          : 1em 0;
  border-collapse : collapse;
  width           : 100%;
}

.tile-article-content table thead th, .tile-article-content table tbody td {
  border  : .2em solid;
  padding : .5em;
}

.tile-fullscreen .tile-control-button {
  border-radius : 0;
}

.tile-fullscreen .tile-name {
  padding : 1em 1em .5em 1em;
  height  : initial;
}

.tile-fullscreen .tile-section-name {
  padding-bottom : 0;
}

.tile-fullscreen .tile-picture-file {
  max-width  : 100vw;
  max-height : calc(100% - 8em);
  height     : auto;
}

.tile-fullscreen {
  z-index       : 1;
  position      : fixed;
  top           : 0;
  border        : none;
  border-radius : 0;
  width         : 100vw;
  height        : 100vh;
}

select, .tile-button {
  box-sizing    : border-box;
  border        : .1em solid;
  border-radius : .5em;
  padding       : 1em;
}

.tile-button {
  width  : 16em;
  height : fit-content;
}

audio::-webkit-media-controls-enclosure {
  border-radius : 0;
}

@media (max-width : 1224px) {
  .tile-picture-file {
    height : 16em;
  }
}

@media (max-width : 994px) {
  .tile-picture-file {
    height : 14em;
  }
}

@media (max-width : 880px) {
  .tile-picture-file, .tile-video-file {
    width  : calc(100vw - 4em);
    height : initial;
  }

  .tile-fullscreen .tile-picture-file {
    max-width : 100vw;
    width     : auto;
  }
}

@media (max-width : 684px) {
  .tile-article {
    width : calc(100vw - 4em);
  }
}

@media (max-width : 500px) {
  .tile-button {
    width : calc(100vw - 4em);
  }

  .tile-button:hover {
    width : calc(100vw - 4em);
  }

  .tile-navigate {
    width : calc(50vw - 4em);
  }

  .tile-navigate:hover {
    scale : 1;
  }

  .tile-music, .tile-article-cover, .tile-error-cover, .tile-music-cover {
    width  : calc(100vw - 4em);
    height : calc(100vw - 4em);
  }

  .tile-navigate .tile-cover, .tile-article-cover {
    width  : calc(50vw - 4em);
    height : calc(50vw - 4em);
  }

  .tile-article-content ul {
    padding : 0;
  }

  .tile-article-content th, .tile-article-content table td {
    padding : .2em;
  }
}