@import url('https://fonts.googleapis.com/css?family=Patua+One|Ubuntu:400,400i,700');
/* General styles */
body {
  --main: #1d3dd0;
  --accent: #f13d25;
  --middle: #843d7d;
  --white: #fcfcfc;
  --black: #313131;
  --disable: #e5e5e5;
  --disableText: #3f3f3f;
  margin: 0;
  background-color: var(--middle);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5)),
    linear-gradient(120deg, var(--main) 10%, var(--accent) 90%);
  color: #1d1d1d;
  font-size: 22px;
  font-family: 'Ubuntu', sans-serif;
}
a {
  color: var(--main);
}
a:visited {
  color: var(--middle);
}
a:active, a:hover, a:focus {
  color: var(--accent);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Patua One', sans-serif, cursive;
  margin-top: 0;
}
nav {
  position: absolute;
  bottom: 1em;
  padding: 11px;
  border-radius: 11px;
  border: 2px solid var(--white);
  box-shadow: 2px 4px 5px 0 rgba(74,74,74,0.4);
}
nav a, nav a:visited {
  color: var(--white);
  text-decoration: none;
}

textarea, input {
  font-size: 1em;
  border: 3px solid var(--middle);
  padding: 5px;
  color: #1d1d1d;
}

button {
  font-size: 1em;
  border: 3px solid var(--middle);
  padding: 5px;
  background-color: var(--middle);
  color: var(--white);
  font-family: 'Ubuntu', sans-serif;
}

button:hover {
  cursor: pointer;
}

button:active, button:hover, button:focus {
  background-color: var(--main);
}

button:disabled {
  background-color: var(--disable);
  border-color: var(--disable);
  color: var(--disableText);
}

pre {
  color: var(--white);
  white-space: pre-wrap;
  background-color: var(--black);
  padding: 16px;
}

pre code {
  word-break: break-word;
  font-family: 'Courier New', Courier, monospace;
}
/* Reused components */
.container {
  display:flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.card {
  --margin-bottom: 90px;
  padding: 33px;
  margin: 11px 11px var(--margin-bottom);
  max-height: calc(100% - var(--margin-bottom) - 11px);
  box-sizing: border-box;
  overflow: auto;
  background-color: var(--white);
  border-radius: 11px;
  box-shadow: 3px 6px 5px 1px rgba(74,74,74,0.4);
}
.is-invisible {
  display: none;
}
/* Specific styles */
ol.magic-bullets {
  list-style: none;
  padding: 0;
}
ol.magic-bullets>li:before {
  content: "🐽"
}

.cache-strategy .image-wrapper {
  float: left;
  margin-left: 22px;
}

.cache-strategy .profile {
  width: 300px;
  height: 300px;
}

.cache-strategy .profile img {
  width: 200px;
  height: 200px;
}


.broken-images .image-wrapper {
  float: left;
}

.broken-images .image-wrapper p {
  text-align: center;
}

.broken-images img, .update-sw img {
  width: 30vh;
  height: 30vh;
  display: block;
  background-color: var(--middle);
}

.broken-images img + img, .update-sw img + img {
  margin-left: 22px;
}

.push-notifications > div {
  display: flex;
  flex-direction: column;
}
.push-notifications > div > * {
  margin-bottom: 11px;
}

.request-log > div {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.request-log > div + div {
  margin-top: 11px;
}

.cache-strategy iframe {
  height: 400px;
  width: 350px;
}

.update-sw__images-container {
  display: flex;
}
.update-sw__content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}