@charset "UTF-8";

/* ! Fonts */

:root
{
  --sans-serif: "microgramma-extended", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --background: #f1f1fd;
  --text: #b1afa8;
}

@font-face
{
    font-family: 'nunito';
    src: url('../fonts/nunito/Nunito-Medium.woff2') format('woff2'),
        url('../fonts/nunito/Nunito-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'nunito';
    src: url('../fonts/nunito/Nunito-SemiBold.woff2') format('woff2'),
        url('../fonts/nunito/Nunito-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'nunito';
    src: url('../fonts/nunito/Nunito-Bold.woff2') format('woff2'),
        url('../fonts/nunito/Nunito-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'nunito';
    src: url('../fonts/nunito/Nunito-ExtraBold.woff2') format('woff2'),
        url('../fonts/nunito/Nunito-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'nunito';
    src: url('../fonts/nunito/Nunito-Black.woff2') format('woff2'),
        url('../fonts/nunito/Nunito-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

*,
*:before,
*:after
{
  box-sizing: border-box;
}

html
{
  font-size: 1vw;

  min-height: 100vh;
  min-width: 100wh;
}

body
{
  font-size: 4rem;
  letter-spacing: .05em;

  padding-bottom: 1em;
}

@media (max-width: 240px)
{
  html
  {
    font-size: 2.4px;
  }
}

@media (min-width: 670px)
{
  body
  {
    font-size: 3rem;
  }
}

@media (min-width: 1000px)
{
  html
  {
    font-size: 10px;
  }
}

a
{
  color: inherit;
}

body
{
  line-height: 1;
  font-family: var(--sans-serif);
  font-weight: 500;
  color: var(--text);
  background: var(--background);

  margin: 0 1rem;
}

/* ! Logo */

#blippo
{
  height: 45rem;
  width: 100%;
  color: transparent;

  background: var(--text);
  -webkit-mask-image: url('/img/blippo-block.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.hidden
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

/* Screenshots */

.list.screenshots
{
  display: flex;
  flex-flow: row wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
}

.list.screenshots .screenshot
{
  width: 44rem;
  height: 24.75rem;
  position: relative;
  background-color: var(--text);
  overflow: clip;
  border-radius: 0.675em;
}

.list.screenshots .screenshot img
{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.screenshots.fourthree .screenshot
{
  width: 44rem;
  height: 33rem;
  overflow: clip;
}

.screenshots.fourthree .screenshot img
{
  width: 133.334%;
  height: 100%;
  left: -16.667%;
}

#viewer
{
  width: 100vw;
  height: 100vh;
  display: grid;
  place-content: center;
  background: rgba(0,0,0,0.75);
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: 250ms opacity ease;
  z-index: 1000;
}

#viewer #image
{
  display: block;
  width: 100vw;
  height: 56.25vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 128rem;
  max-height: 72rem;
  transform: scale(0);
  transition: 500ms transform ease;
  cursor: pointer;
  z-index: 10000
}

#zoomedImage
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

body.viewer
{
  overflow: hidden;
  pointer-events: none;
}

body.viewer #viewer
{
  opacity: 1;
  pointer-events: all;
}

body.viewer #viewer #image
{
  transform: scale(1);
}

/* Footer */

#footer
{
  font-size: 0.7em;
  text-align: center;
  justify-content: center;
  align-items: center;
}

#footer nav,
#footer p
{
  text-align: center;
  margin: 1em auto;
}
#footer a
{
  color: inherit;
}

div.logos
{
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  max-width: 70rem;
  gap: 0 1em;
  justify-content: center;
  align-items: center;
}

div.logos>div
{
  color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  height: 24rem;
}

#logo-dotd
{
  background-image: url(/img/dotd-laurels-2024-alpha.png);
  background-size: 33rem;
  flex: 1 1 33rem;
}

#logo-sxsw
{
  background-image: url(/img/laurels-SXSW-2025.png);
  background-size: 30rem;
  flex: 1 1 30rem;
}
#logo-nvg
{
  height: 16rem;
  background-image: url(/img/laurels-Nouvelle-Ville-Gak-66-72.png);
  background-size: 26rem;
  flex: 1 1 26rem;
}

#logo-panic
{
  font-size: 1em;
}
#logo-panic a
{
  display: block;
  width: 5em;
  height: 5em;
  margin: 2em auto 1em auto;

  color: transparent;
  text-indent: -9999rem;
  background: var(--text);
  -webkit-mask-image: url(/img/panic-interlaced.svg);
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
}