/*
 ***********************
 * RESET AND NORMALIZE *
 ***********************
*/

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address,
big, code, del, dfn, em, img, q, s, samp, small, strong, sub, sup, tt, var, b, u, i, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr,
th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu,
main, nav, output, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
  margin: 0;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

figure {
  margin: 1em 40px;
}

img {
  border-style: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

[hidden] {
  display: none !important;
}

[clear] {
  clear: both;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/* Box Model */

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

/* A better looking default horizontal rule */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 *****************
 * CSS VARIABLES *
 *****************
*/

:root {
  /* Colors */

  --color-bg: #00100A;
  --color-sep: #00462B;

  --color-green: #00EA8E;
  --color-blue: #698EFF;
  --color-purple: #8A4DCD;
  --color-pink: #E4ABB2;
  --color-red: #FF3356;
  --color-yellow: #FFD265;

  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray: #B2B7B5;

  /* Type */
  --type-h1-size: 1.5rem;
  --type-h1-line: 2.4rem;

  --type-h2-size: 1.2rem;
  --type-h2-line: 1.6rem;

  --type-h3-size: 1.2rem;
  --type-h3-line: 1.6rem;

  --type-h4-size: 1.2rem;
  --type-h4-line: 1.6rem;

  --type-p-size: 1.3rem;
  --type-p-line: 1.6rem;

  --type-p-small-size: 1.2rem;
  --type-p-line: 1.6rem;

  --type: 'iA Quattro', ui-monospace, monospace;
  --type-mono: 'iA Mono', ui-monospace, monospace;

  /* Grid */
  --grid-base: 8px;

}

/*
 *******************
 * FONTS *
 *******************
*/
  
@font-face {
    font-family: 'iA Quattro';
    font-style: normal;
    font-weight: normal;
    src:    url("./fonts/iAWriterQuattroS-Regular.eot") format('eot'),
            url('./fonts/iAWriterQuattroS-Regular.woff') format('woff'),
            url('./fonts/iAWriterQuattroS-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'iA Quattro';
    font-style: normal;
    font-weight: bold;
    src:    url("./fonts/iAWriterQuattroS-Bold.eot") format('eot'),
            url('./fonts/iAWriterQuattroS-Bold.woff') format('woff'),
            url('./fonts/iAWriterQuattroS-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'iA Mono';
    font-style: normal;
    src:    url("./fonts/iAWriterMonoS-Regular.eot") format('eot'),
            url('./fonts/iAWriterMonoS-Regular.woff') format('woff'),
            url('./fonts/iAWriterMonoS-Regular.woff2') format('woff2');
}


/*
 *******************
 * BASE *
 *******************
*/

html {
    font-size: 62.5%;
}

body {
    display: flex;
    background-color: var(--color-bg);
    font-family: var(--type);
    font-size: var(--type-p-size);
    line-height: var(--type-p-line);
    color: var(--color-white);
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-line);
    font-weight: bold;
    color: var(--color-gray);
}

p + h1 {
    margin-top: calc(var(--grid-base) * 3);
}


h2 {
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-line);
    font-weight: bold;
}

h3 {
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-line);
    font-weight: normal;
    color: var(--color-gray);
}

h4 {
    font-size: var(--type-h4-size);
    line-height: var(--type-h4-line);
    font-weight: bold;
}

h5 {
    font-size: var(--type-h5-size);
    line-height: var(--type-h5-line);
    font-weight: bold;
}

h6 {
    font-size: var(--type-h6-size);
    line-height: var(--type-h6-line);
    font-weight: bold;
}

p + * {
    margin-top: var(--grid-base);
}

sub {
    vertical-align: bottom;
    position: relative;
    bottom: -0.5em;
    font-size: 0.8rem;
}

sup {
    vertical-align: top;
    position: relative;
    bottom: 0.5em;
    font-size: 0.8rem;
}

a {
    display: inline-block;
    color: var(--color-green);
    text-transform: uppercase;
    text-decoration: none;
}

a:before {
    content: '> '
}

a:hover {
    background: var(--color-green);
    color: var(--color-bg);
    cursor: pointer;
}

::-webkit-scrollbar,
::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 234, 142, 0.4);
    border-radius: 9999;
    border: 6px solid var(--color-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 234, 142, 1);
}

.gray {
    color: var(--color-gray)
}

.small {
    font-size: var(--type-p-small-size);
}

#about {
    flex: 0 1 30%;
    display: flex;
    flex-direction: column;
    max-width: 240px;
    padding: calc(var(--grid-base) * 2);
    border-left: solid 1px var(--color-sep);
}

#about a {
    display: block;
}

#about h2, #about h3 {
    margin-bottom: var(--grid-base);
}

#search {
    border-bottom: 1px solid var(--color-sep);
    margin: 0 calc(var(--grid-base) * -2);
    padding: calc(var(--grid-base) * 2);
    padding-top: 0;
}

#search-field {
    all: unset;
    width: 100%;
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-line);
    font-weight: normal;
    color: var(--color-white);
}

#search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    background:
        linear-gradient(45deg, transparent 0%,transparent 43%, var(--color-green) 45%,var(--color-green) 55%,transparent 57%,transparent 100%),
        linear-gradient(135deg, transparent 0%,transparent 43%,var(--color-green) 45%,var(--color-green) 55%,transparent 57%,transparent 100%);
}

#search-field::placeholder {
    color: var(--color-gray);
}

#sort {
    border-bottom: 1px solid var(--color-sep);
    margin: 0 calc(var(--grid-base) * -2);
    padding: calc(var(--grid-base) * 2);
}

.sort {
    display: flex;
}

.sort > .fakeRadio {
    flex: 1 1 auto;
}

.order {
    display: flex;
    gap: var(--grid-base);
}

.sort:not(.selected) .order {
    display: none;
}

.sort:not(.selected) > .fakeRadio,
.order .fakeRadio:not(.selected) {
    color: var(--color-white);
}
.sort:not(.selected) > .fakeRadio:before,
.order .fakeRadio:not(.selected):before {
    opacity: 0;
}

.order .fakeRadio:before {
    content: '';
}

.sort:not(.selected) > .fakeRadio:hover,
.order .fakeRadio:not(.selected):hover {
    color: var(--color-bg);
}


#more {
    padding: calc(var(--grid-base) * 2) 0;
    flex: 1 1 auto;
}

#madeby {
    border-top: 1px solid var(--color-sep);
    padding: calc(var(--grid-base) * 2) 0;
}

#logo {
    display: block;
    position: relative;
    border: 1px solid var(--color-green);
    border-radius: 6px;
    border-bottom-width: 3px;
    width: var(--grid-base) * 18;
    padding: calc(var(--grid-base) * 3.5) var(--grid-base) calc(var(--grid-base) * 0.5) var(--grid-base);
    margin-top: calc(var(--grid-base) * 2);
    border-radius: 6px;
    text-align: right;
    text-transform: uppercase;
    background-position: right bottom;
    background-origin: content-box;
    color: var(--color-green);
    cursor: pointer;
}

#logo:before {
    content: '←';
    position: absolute;
    left: var(--grid-base);
}

#logo:hover {
    background-color: rgba(0, 234, 142, 0.2);
    color: var(--color-green);
}

#madeby p + p {
    margin-top: 0;
}

#total {
    box-shadow: 0 -1px 0 var(--color-sep); /* "outline" to visually match up with other bar */
    margin: 0 calc(var(--grid-base) * -2);
    padding: calc(var(--grid-base) * 2);
    padding-top: var(--grid-base);
    padding-bottom: 0;
    height: calc(var(--grid-base) * 9);
}

#total h2 {
    margin-bottom: 0;
}

#total p {
    margin-top: 0;
}

#website-wrapper {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translate3d(0,0,0); /* Trigger GPU */
    content-visibility: auto; /* Improve performance */
    contain: layout;
    animation-fill-mode: forwards;
    opacity: 0;
    transition: opacity ease-out 1.5s;
}

#website-wrapper.intro {
    opacity: 1;
}

#websites {
    display: flex;
    width: 100%;
    height: 100%;
    padding-left: calc(var(--grid-base) * 2);
    padding-right: calc(var(--grid-base) * 2);
    overflow-x: overlay;
    overflow-y: hidden;
    contain: content;
    /*scrollbar-gutter: stable;*/
}

/* FIXME: not going to the right edge
#websites:after {
    content: '';
    position: absolute;
    bottom: calc(var(--grid-base) * 10);
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-sep);
}
*/

.website {
    display: flex;
    flex-direction: column;
    flex-basis: 25%;
    min-width: calc(var(--grid-base) * 33);
    height: 100%;
}

.website.hidden {
    visibility: hidden;
}

.website.none {
    display: none;
}

.website .website-viz {
    position: relative;
    flex: 1 1 auto;
    width: 25%;
    min-width: calc(var(--grid-base) * 33);
}

.website .website-viz:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--color-sep);
}


.website .website-viz-svg {
    position: absolute;
    width: 200%;
    height: 100%;
    left: -100%;
    margin-left: calc(var(--grid-base) * 4); /* hard-coded, check chimneyWidth in JS */
    transform: translate3d(0,0,0); /* Trigger GPU */
}

.website .website-caption {
    width: 25%;
    min-width: calc(var(--grid-base) * 33);
    height: calc(var(--grid-base) * 11);
    /*flex: 0 1 auto;*/
    padding: 0 calc(var(--grid-base) * 2);
    padding-top: var(--grid-base);
}

.website .website-caption p {
    margin-top: 0;
}

.website .liveEmissions {
    font-family: var(--type-mono);
}

#grid {
    position: absolute;
    width: 100%;
    height: 95%;
    top: 5%;
    display: flex;
    flex-direction: column;
    font-size: 1.1rem;
    padding-bottom: calc(var(--grid-base) * 10);
}

.grid-element {
    position: relative;
    flex: 1 1 auto;
    border-top: 1px solid var(--color-white);
    margin-top: -4px; /* Visually aligns it with SVG */
    opacity: 0.2;
}

.grid-element:last-child {
    border-bottom: 0;
}

.grid-element-text {
    position: absolute;
    right: calc(var(--grid-base)/2);
    top: calc(var(--grid-base)/2);
    z-index: 9999; /* FIXME: figure out how to position this above everything else */
}

.grid-element.average {
    opacity: 0.5;
    position: absolute;
    left: 0;
    right: 0;
    color: var(--color-green);
    border-top-color: var(--color-green);
    padding-bottom: calc(var(--grid-base) * 13);
}

.searching .separator {
    display: none;
}

.separator {
    position: relative;
}

.separator:before {
    position: absolute;
    content: '';
    width: 1px;
    top: calc(var(--grid-base) * 2);
    bottom: calc(var(--grid-base) * 1);
    background-color: var(--color-red);
}

.separator .website-caption {
    padding-left: var(--grid-base);
}

.separator h2 {
    color: var(--color-red);
}

.separator.Bad:before {
    background-color: #FF9D65;
}

.separator.Bad h2 {
    color: #FF9D65;
}

.separator.OK:before {
    background-color: #FFD265;
}

.separator.OK h2 {
    color: #FFD265;
}

.separator.Good:before {
    background-color: #9CEA00;
}

.separator.Good h2 {
    color: #9CEA00;
}

.separator.Amazing:before {
    background-color: var(--color-green);
}

.separator.Amazing h2 {
    color: var(--color-green);
}

#sources,
#stats,
#how,
#intro {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--color-bg);
}

#sources.hidden,
#stats.hidden,
#how.hidden,
#intro.hidden {
    display: none;
}

#sources-close,
#stats-close,
#how-close,
#intro-skip {
    position: absolute;
    bottom: calc(var(--grid-base) * 3);
    left: 50%;
    transform: translateX(-50%);
}

#intro-next {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
}

.intro-slide {
    position: absolute;
    background: var(--color-bg);
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--type-mono);
    font-size: 1.5rem;
    line-height: 2.4rem;
    transition: color 1s;
}

.intro-slide.visible {
    display: flex;
}

#intro .intro-slide > *,
#sources .intro-slide > *,
#stats .intro-slide > *,
#how .intro-slide > * {
    max-width: calc(var(--grid-base) * 120);
    padding: 0 calc(var(--grid-base) * 3);
    text-align: left;
}

.intro-slide p {
    width: 100%;
    opacity: 0;
    transition: opacity 1s;
}

.intro-slide p.visible {
    opacity: 1;
}

/*
  --grid-breakpoint-small: 512px;
  --grid-breakpoint-medium: 768px;
  --grid-breakpoint-large: 1024px;
  --grid-breakpoint-extra-large: 1280px;
  */

@media only screen and (max-width: 768px) {
    body {
        flex-direction: column;
    }

    .intro-slide {
        padding: 0 calc(var(--grid-base) * 3)
    }

    #about {
        flex: 0 1 auto;
        flex-direction: row;
        max-width: none;
        border-top: 1px solid var(--color-sep);
        border-left: 0;
        gap: calc(var(--grid-base) * 2);
    }

    #about > * + * {
        padding-left: calc(var(--grid-base) * 2);
    }

    #total,
    #search {
        display: none;
    }

    #sort,
    #more,
    #madeby {
        flex: 1 1 0;
        padding-top: 0;
        padding-bottom: 0;
        /*padding: 0 calc(var(--grid-base) * 2);*/
    }

    #sort {
        border-bottom: 0;
    }

    #more {
        border-top: 0;
        border-left: 1px solid var(--color-sep);
    }

    #madeby {
        border-top: 0;
        border-left: 1px solid var(--color-sep);
    }

}

@media only screen and (max-width: 512px) {
    #intro-next {
        top: 80%;
    }

    #more {
        display: none;
    }

    a#logo {
        display: none;
    }
}