:root {
  --main-bg-color: #0f3d54;
  --content-bg-color: #ffffff;
}

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}


@font-face {
  font-family: 'Comic Sans MS';
  src: 
    url('../assets/fonts/comic-webfont.woff2') format('woff2'),
    url('../assets/fonts/comic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Comic Sans MS';
  src: 
    url('../assets/fonts/comicbd-webfont.woff2') format('woff2'),
    url('../assets/fonts/comicbd-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Comic Sans MS';
  src: 
    url('../assets/fonts/comici-webfont.woff2') format('woff2'),
    url('../assets/fonts/comici-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Comic Sans MS';
  src: 
    url('../assets/fonts/comicz-webfont.woff2') format('woff2'),
    url('../assets/fonts/comicz-webfont.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Papyrus';
  src: 
    url('../assets/fonts/papyrus/papyrus-webfont.woff2') format('woff2'),
    url('../assets/fonts/papyrus/papyrus-webfont.woff') format('woff');
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  background-color: var(--main-bg-color);
}

.content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  background-color: var(--content-bg-color);
  margin: 2rem auto;
  padding: 2em;
  width: 40rem;
  border-radius: 20px;
}

@media screen and (max-width: 650px) {
  .content-wrapper {
    margin: 0 auto;
    border-radius: 0;
    padding: 1em;
  }
}

h1 {
  font-size: 3.5rem;
  font-weight: 600;
  text-align: center;
  text-wrap: pretty;
  margin-bottom: 0.5em;
}

@media screen and (max-width: 625px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 400px) {
  h1 {
    font-size: 2rem;
  }
}

strong {
  color: var(--main-bg-color);
}

h2 {
  font-size: 2rem;
  margin: 0.75em 0 0.25em 0;
}

p {
  margin: 0.5em 0;
}

ol, ul {
  margin: 0.5em 0;
}

li {
  margin: 1em 0;
}

li:first-child, 
li:last-child {
  margin: 0;
}

section,
footer {
  margin: 0.5em 0;
}

footer {
  margin-bottom: 0;
  font-size: 0.75rem;
  text-align: center;
  line-height: 2;
}


.schumer-hero {
  width: 75%;
  border-radius: 10px;
  border: 1px solid var(--main-bg-color);
}

.image-container {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}

.message-container {
  position: relative;
}

.message {
  position: absolute;
  top: 103%;
  left: -59px;
  content: 'Our Glorious Supreme Leader';
  width: 150px;
  font-weight: 700;
  /* transform: rotate(15deg); */
}

.message::before {
  position: absolute;
  font-weight: 700;
  content: '⟵';
  left: -27px;
  top: -10px;
  transform: rotate(35deg);
}

@media screen and (max-width: 525px) {
  .message {
    display: none;
  }
}

a, a:visited {
  color: black;
  text-decoration: none;
  padding-bottom: 0.05em;
  border-bottom: solid 2px black;
  font-weight: 700;
}

a:hover, a:visited:hover {
  color: #207de9;
  border-bottom-color: #207de9;
}

.top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.middle,
.bottom {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

particle {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

button {
  padding: 20px;
  margin: 24px 0;
  align-self: center;
  font-weight: 700;
  background-color: var(--main-bg-color);
  border: none;
  border-radius: 5px;
  text-align: center;
  color: /*rgb(206, 206, 206)*/ var(--content-bg-color);
  width: 200px;
}


button:focus,
button:hover {
  background-color: #15587a;
  cursor: pointer;
}

.preloader {
  position: absolute;
  background: url(https://i.ibb.co/XDMv6SL/chuck-schumer.png);
  border-radius: 10px;
}

.pray {
  font-weight: 700;

  button {
    margin-bottom: 0;
  }
}

.download-link {
  align-self: center;
  border-bottom: none;
}

.bottom h2 {
  margin-top: 0;
}

.comic-sans {
  font-family: 'Comic Sans MS';
}

.regular {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.papyrus {
  font-family: 'Papyrus';
}

.rainbow {
  animation: rainbow 7.5s linear;
  animation-iteration-count: infinite;
}

@keyframes rainbow {
	100%,0%{
		color: rgb(255,0,0);
	}
	8%{
		color: rgb(255,127,0);
	}
	16%{
		color: rgb(255,255,0);
	}
	25%{
		color: rgb(127,255,0);
	}
	33%{
		color: rgb(0,255,0);
	}
	41%{
		color: rgb(0,255,127);
	}
	50%{
		color: rgb(0,255,255);
	}
	58%{
		color: rgb(0,127,255);
	}
	66%{
		color: rgb(0,0,255);
	}
	75%{
		color: rgb(127,0,255);
	}
	83%{
		color: rgb(255,0,255);
	}
	91%{
		color: rgb(255,0,127);
	}
}