@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@200;400;500;600;700;800&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,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,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

input {
	font-family: inherit;
	-webkit-appearance: none;
}

*,
*:after,
*:before {
	margin: 0;
	outline: none;
	padding: 0;
	text-rendering: optimizeLegibility;
	zoom: 1;
	box-sizing: border-box;
}

body {
  font-family: Helvetica;
  background-color: #E4E4E4;
  padding: 64px 24px 54px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: "Rubik", Helvetica, sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #E60013;
  margin: 2px 0 7px;
}
h1.minor {
  font-size: 2rem;
}

h2 {
  font-family: "Rubik", Helvetica, sans-serif;
  font-size: 1.5rem;
  line-height: 1.8rem;
  margin: 0 auto 41px;
  color: #141414;
}

h4 {
  font-family: "Rubik", Helvetica, sans-serif;
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin: 12px auto 22px;
  max-width: 400px;
  color: #141414;
  font-weight: 700;
}

#buttons {
  margin-top: 32px;
}

#buttons a, #subbuttons a {
  padding: 9px 16px 7px;
  border: 1px solid transparent;
  border-radius: 32px;
  color: #777777;
  text-decoration: none;
}
#buttons a:last-of-type, #subbuttons a:last-of-type {
  margin-right: 0;
}
#buttons a:hover, #subbuttons a:hover {
  color: #E60013;
}
#buttons a.download, #subbuttons a.download {
  background-color: #E60013;
  color: #FFF;
  font-weight: 600;
  font-size: 1.3em;
  padding: 10px 20px 8px;
  transition: 0.1s ease-out background-color;
}
#buttons a.download:hover, #subbuttons a.download:hover {
  text-decoration: none;
  background-color: #bb0211;
  
}

#subbuttons {
  margin: 45px 0 0;
}

#collage {
  height: 90%;
  max-height: 500px;
  margin: 54px 0 44px;
  word-spacing: 0px;
}

#collage img {
  height: 100%;
  margin: 0 5px;
}

#collage img.outer {
  height: 94%;
}

p {
  max-width: 500px;
  font-size: 17px;
  margin: 0 auto;
  font-weight: 200;
  line-height: 1.2em;
  /* padding: 0 24px; */
  color: #141414;
}
p.lead {
  font-size: 24px;
  line-height: 1.5em;
  max-width: 600px;
}
p.secondary-lead {
  font-size: 18px;
  line-height: 1.5em;
  max-width: 550px;
}
p.disclaimer {
  font-size: 14px;
  line-height: 1.2em;
  font-style: italic;
}

img.icon, picture.icon img {
  width: 50px;
  margin: 0 auto;
}

.downloadbadge img {
  margin-top: -8px;
  height: 63px;
}
.downloadbadge img.small {
  margin-top: 24px;
  height: 52px;
}

.infobox {
  background-color: rgba(0,0,0,0.05);
  max-width: 400px;
  padding: 24px 22px;
  border-radius: 14px;
  color: rgba(17, 17, 17, 0.6);
  margin: 54px auto 26px;
  text-align: center;
}
.infobox p {
  padding: 0px;
}
.infobox img.logo, svg {
  width: 40px;
  height: 40px;
  opacity: 0.7;
}
.infobox h3 {
  margin: 8px 0 24px;
  color: rgba(17, 17, 17, 0.6);
  font-weight: 600;
}
.infobox a {
  text-decoration: none;
}
.infobox a img {
  height: 52px;
}
.infobox p {
  line-height: 1.4;
}

@media only screen and (max-width: 824px) {
  body {
	padding: 34px 24px 52px;
  }

  img#logo {
	height: 63px;
  }

  #collage img.outer {
	display: none;
  }
}
@media (prefers-color-scheme: dark) {
  body {
	background-color: #141414;
	color: #FBFBFB;
  }

  p {
	color: #FBFBFB;
  }

  a, a:visited {
	color: #FBFBFB;
  }

  h2, h4 {
	color: #FBFBFB;
  }
  
  .infobox {
	background-color: #000;
  }
  .infobox img.logo, svg {
    filter: invert(100%) hue-rotate(180deg);
    opacity: 0.6;
  }
}