:root {
  --text-color:       rgb(60, 60, 60);
  --background-color: hsl(0 0% 10%);
  --hover-color:      rgb(100, 100, 100);
  --active-color:     rgb(23, 87, 23);
}


html, body, div, main, svg, h1, a, i {
  margin: 0;
  padding: 0;
  user-select: none;
}


svg {
  display: block;
}


i {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 2rem;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  padding: 0.5em;
}


/* In fullscreen the #wrapper is the "fullscreen" element. Thus its important
   that both body and @wrapper have background color set. */


body {
  font-family: system-ui;
  background-color: var(--background-color);
}


#wrapper {
  width: 100dvw;
  height: 100dvh;
  background-color: var(--background-color);
  display: grid;
  grid-template-rows: repeat(2, 10rem);
  grid-template-columns: repeat(2, 10rem);
  justify-content: space-between; 
  align-content: space-between;
}


h1 {
  grid-area: 1 / 1 / 2 / 3;
  padding-block: 0.3em;
  font-size: 1.5rem;
  text-align: center;
  color: var(--text-color);
}


a, a:hover, a:visited, a:active {
  text-decoration: none;
  cursor: pointer;
}


a {
  background-color: transparent;
  color: var(--text-color);
  display: flex;

  &:hover {
    color: var(--hover-color);
  }

  &.active {
    color: var(--active-color);
  }  
}


#fullscreen { 
  grid-area: 1 / 1 / 2 / 2; 
  justify-content: flex-start;
  align-items: flex-start;
}


#sound { 
  grid-area: 1 / 2 / 2 / 3; 
  justify-content: flex-end;
  align-items: flex-start;
}


#prev { 
  grid-area: 2 / 1 / 3 / 2; 
  justify-content: flex-start;
  align-items: flex-end;
}


#next { 
  grid-area: 2 / 2 / 3 / 3; 
  justify-content: flex-end;
  align-items: flex-end;
}


#app {
  grid-area: 1 / 1 / 3 / 3;
  display: flex;
  flex-flow: column nowrap;
  justify-items: stretch;
  justify-content: center;
  align-items: stretch;
}


#app > svg {
  width: 100%;
  &.ar-2-1 {
    aspect-ratio: 2 / 1;
  }
  &.ar-1-1 {
    aspect-ratio: 1 / 1;
  }
}