/* changa-one-regular font (latin) - https://google-webfonts-helper.herokuapp.com/fonts/changa-one?subsets=latin */
@font-face {
  font-family: 'Changa One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/changa-one-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/changa-one-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/changa-one-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/changa-one-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/changa-one-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/changa-one-v13-latin-regular.svg#ChangaOne') format('svg'); /* Legacy iOS */
}

/* Adjust local fallback font (Arial) to reduce CLS (https://codepen.io/simonjhearne/pen/rNMGJyr) */
@font-face {
  font-family: 'Changa One Fallback';
  src: local("Arial");
  ascent-override: 91%;
  descent-override: 10%;
}

:root{
  --light-bg: #D3F3EE;
  --light-color: #000000;
  --dark-bg: #212121;
  --dark-color: #ffffff;
  --red-bg: #ff6961;
  --red-color: #ffffff;

  --bg: var(--light-bg);
  --color: var(--light-color);
}
@media(prefers-color-scheme: dark){
  :root{
    --bg: var(--dark-bg);
    --color: var(--dark-color);
  }
}
#theme-light:checked ~ .wrapper{
  --bg: var(--light-bg);
  --color: var(--light-color);
}
#theme-dark:checked ~ .wrapper{
  --bg: var(--dark-bg);
  --color: var(--dark-color);
}
#theme-red:checked ~ .wrapper{
  --bg: var(--red-bg);
  --color: var(--red-color);
}

.theme-switcher{
  appearance: none;
  border: 4px solid transparent;
  background: green;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  position: fixed;
  right: 10px;
  bottom: 0;
}
.theme-switcher:checked{
  border: 4px solid black;
}
#theme-light{
  bottom: 10px;
  background: var(--light-bg);
}
#theme-dark{
  bottom: 42px;
  background: var(--dark-bg);
}
#theme-red{
  bottom: 74px;
  background: var(--red-bg);
}


*{
  box-sizing: border-box;
  /* cursor: url('img/cursor.png'), auto; */
}
html, body{
  margin: 0;
  padding: 0;
}
body{
  background: #D3F3EE;
  background: var(--bg);
  font-size: 450%;
  position: relative;
}
.wrapper{
  background: #D3F3EE;
  background: var(--bg);
  color: #000000;
  color: var(--color);
  padding: 10px 0;
}
main{
  margin: 0 auto;
  width: 800px;
  max-width: 100%;
}
section{
  margin: 5px 0 55px 0;
}
h1, h2, h3, h4, h5, h6{
  margin: 10px 20px;
  color: white;
  font-family: 'Changa One', 'Changa One Fallback', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
  text-shadow: -8px 6px #111827;
}
h1{
  text-shadow: -2px  0px #111827,
                0px -2px #111827,
                2px  0px #111827,
                0px  2px #111827,
                2px  2px #111827,
               -2px -2px #111827,
               -2px  2px #111827,
                2px -2px #111827,
              -10px  6px #111827;
}
h2, h3{
  text-shadow: -2px  0px #111827,
                0px -2px #111827,
                2px  0px #111827,
                0px  2px #111827,
                2px  2px #111827,
               -2px -2px #111827,
               -2px  2px #111827,
                2px -2px #111827,
               -6px  5px #111827;
}
h2{
  font-size: smaller;
}
p{
  margin: 10px 0;
  font-size: 0.6em;
}
.box{
  width: calc(100% - 40px) !important;
  margin: 20px;
  padding: 20px;
  border-radius: 5px;
  background: white;
  color: #111827;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  box-shadow: -2px  0px #111827,
               0px -2px #111827,
               2px  0px #111827,
               0px  2px #111827,
               2px  2px #111827,
              -2px -2px #111827,
              -2px  2px #111827,
               2px -2px #111827,
              -8px  7px #111827;
}
.box.align-left{
  align-items: flex-start;
}
.box.link-box{
  flex-direction: row;
}
.box.with-heading{
  padding-top: 0px;
}
.box.article-box.with-image{
  padding-left: 0;
  padding-bottom: 0;
}
.box.article-box.with-image .thumbnail-container{
  position: relative;
}
.box.article-box.with-image .play-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
  width: 50px;
  height: 50px;
  max-width: 80%;
  opacity: 0.725;
}
.box.article-box.with-image:hover .play-btn{
  opacity: 1;
  width: 70px;
  height: 70px;
}
.box.article-box.with-image .play-btn path{
  fill: var(--bg);
}
.box.article-box.with-image .main-img{
  width: 100%;
  display: block;
  border-radius: 5px 0 0 5px;
}
.box.article-box p{
  font-size: 0.5em;
}
.box.article-box.with-image p{
  margin: 16px;
}
.box.article-box .heading{
  width: calc(100% + 40px);
  padding: 7px 12px 5px 12px;
  border-radius: 5px 5px 0 0;
  background: var(--red-bg);
  color: var(--red-color);
  text-shadow: 0 0 2px #cc0b00;
  margin-bottom: 10px;
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.box.article-box .heading .text{
  margin: 0;
  font-weight: bold;
  text-align: left;
  font-size: 0.3em;
  width: 100%;
  flex: 1;
}
.box.article-box.with-image .heading{
  width: calc(100% + 20px);
  border-radius: 0 5px 0 0;
}
.box.article-box .heading .date{
  margin: 0 0 0 auto;
  font-weight: normal;
  float: right;
  text-align: right;
  font-size: 0.25em;
}
.box.article-box{
  margin-bottom: 30px;
}
.box p .icon{
  vertical-align: -2px;
}
.text-center{
  text-align: center;
}
.box p{
  flex: 1;
}
.box p a{
  text-decoration: underline;
  text-decoration-style: dotted;
  color: #374151;
}
.box p a:hover{
  text-decoration-style: solid;
  color: #111827;
}
.box.text-smaller p{
  font-size: 0.52em;
}
.box.article-box.text-smaller p{
  font-size: 0.38em;
}
.box.article-box.with-image.text-smaller p{
  font-size: 0.35em;
}
.tags{
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  font-size: 0.18em !important;
}
.tag{
  border-radius: 10px;
  background: var(--bg);
  color: var(--color);
  padding: 3px 6px;
  display: inline-block;
}

.spin{
  animation: spin 5000ms linear infinite;
}
.bounce{
  animation: bounce 900ms linear infinite;
}
.saturate{
  animation: saturate 1500ms linear infinite;
}
.zoom{
  animation: zoom 1400ms ease-in-out infinite;
}
.box-link{
  text-decoration: none;
  color: inherit;
}
.box-icon{
  align-self: center;
  height: 0.8em;
  animation-play-state: paused;
}
.box-link:hover .box-icon,
.box-link:active .box-icon{
  animation-play-state: running;
}

.emoji{
  height: 1.1em;
  width: 1.1em;
  display: inline-block;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.21em;
}
.webpagelist-icon{
  border-radius: 12px;
  filter: drop-shadow(0px 0px 20px rgba(37,99,234,.35));
}

footer p{
  font-size: 20%;
  text-align: center;
}
footer a{
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}
@keyframes bounce{
  0%{
    transform: translateY(0px);
  }
  25%{
    transform: translateY(4px);
  }
  75%{
    transform: translateY(-4px);
  }
  100%{
    transform: translateY(0px);
  }
}
@keyframes saturate{
  0%{
    filter: saturate(1);
  }
  50%{
    filter: saturate(7);
  }
  80%{
    filter: saturate(0);
  }
  100%{
    filter: saturate(1);
  }
}
@keyframes zoom{
  0%, 100%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
}

@media (min-width: 30em){ /* DESKTOP */
  .row { width: 100%; display: table; table-layout: fixed; }
  .col { display: table-cell; vertical-align: top; }
}
@media (max-width: 30em){ /* MOBILE */
  p{
    margin: 10px 0;
    font-size: 0.45em;
  }
  .theme-switcher{
    position: absolute;
  }
  .box.with-image{
    padding-right: 0;
  }
  .box.article-box.with-image .main-img{
    border-radius: 5px 5px 0 0;
  }
  .box.article-box.with-image .heading{
    width: 100%;
    border-radius: 0;
  }
  .box.text-smaller p{
    font-size: 0.4em;
  }
  .box.article-box.text-smaller p{
    font-size: 0.35em;
  }
  footer{
    margin-top: 120px;
  }
  footer p{
    text-align: left;
    padding-left: 15px;
  }
  h1{
    font-size: 1.6em;
  }
  h2, h3{
    font-size: 0.7em;
  }
  h1, h2, h3, h4, h5, h6{
    font-weight: 200;
  }
  h3, h4, h5, h6{
    text-align: center;
  }
}