body {
  background-color: #fcfcfc;
}

fieldset {
  border: 1px solid lightgrey;
  padding: 2em;
  background-color: #fefefe;
}

.link-back {
  margin: 2em 0;
}
.link-back a {
  text-decoration: none;
  font-weight: bold;
}
.link-back a::before {
  content: '←';
  margin-right: 0.2em;
}

.container {
  max-width: 40em;
}

.linktitle {
    margin-top: 2em;
    font-size: 1.5em;
    font-weight: bold;
}

h1, h2, h3, h4 {
  margin-top: 1em;
}

.info-box {
  margin: .5em 1em;
  padding: .5em 1em;
  background-color: #f4f4f4;
}

/* Social media buttons from noyb.eu main page */
.social-buttons {
  display: inline;
  margin: 0;
  padding-left: 0;
}
.social-buttons ul,.social-buttons li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-buttons li {
  display: inline-block;
  margin-right: 6.25px;
}
.social-buttons li:last-of-type {
  margin-right: 0;
}
.social-buttons span {
  position: absolute !important;
  left: 0;
  top: 0;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px,1px,1px,1px);
  overflow: hidden;
  height: 1px;
}
.social-buttons a {
  background-color: #9c0a7d;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
}
.social-buttons a[href*="facebook"] {
  background-size: 10px;
}
.social-buttons a[href*="facebook"] {
  background-image: url(/images/services/icon-facebook.svg);
  background-color: #306199;
}
.social-buttons a[href*="facebook"]:hover {
  background-color: #2a5586;
}
.social-buttons a[href*="twitter"] {
  background-image: url(/images/services/icon-twitter.svg);
  background-color: #26c4f1;
}
.social-buttons a[href*="twitter"]:hover {
  background-color: #0fbdee;
}
.social-buttons a[href*="youtube"] {
  background-image: url(/images/services/icon-youtube.svg);
  background-color: #df1c31;
}
.social-buttons a[href*="youtube"]:hover {
  background-color: #c8192c;
}
.social-buttons a[href*="linkedin"] {
  background-image: url(/images/services/icon-linkedin.svg);
  background-color: #007bb6;
}
.social-buttons a[href*="linkedin"]:hover {
  background-color: #006a9d;
}
.social-buttons a[href*="newsletter"] {
  background-image: url(/images/services/icon-mail.svg);
  background-color: #9c0a7d;
}
.social-buttons a[href*="newsletter"]:hover {
  background-color: #84086a;
}
.social-buttons a[href*="mastodon"] {
  background-image: url(/images/services/mastodon_white.png);
  background-color: #9c0a7d;
}
.social-buttons a[href*="mastodon"]:hover {
  background-color: #84086a;
}
.social-buttons a[href*="rss"] {
  background-image: url(/images/services/icon-rss.svg);
  background-color: #9c0a7d;
}
.social-buttons a[href*="rss"]:hover {
  background-color: #84086a;
}

/* Just the icons we need, from bootstrap’s icons: <https://icons.getbootstrap.com/> */
.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1em 1em;
  width: 1em;
  height: 1em;
}

.bi-arrow-repeat::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20fill=%22currentColor%22%20class=%22bi%20bi-arrow-repeat%22%20viewBox=%220%200%2016%2016%22%3E%20%3Cpath%20d=%22M11.534%207h3.932a.25.25%200%200%201%20.192.41l-1.966%202.36a.25.25%200%200%201-.384%200l-1.966-2.36a.25.25%200%200%201%20.192-.41zm-11%202h3.932a.25.25%200%200%200%20.192-.41L2.692%206.23a.25.25%200%200%200-.384%200L.342%208.59A.25.25%200%200%200%20.534%209z%22/%3E%20%3Cpath%20fill-rule=%22evenodd%22%20d=%22M8%203c-1.552%200-2.94.707-3.857%201.818a.5.5%200%201%201-.771-.636A6.002%206.002%200%200%201%2013.917%207H12.9A5.002%205.002%200%200%200%208%203zM3.1%209a5.002%205.002%200%200%200%208.757%202.182.5.5%200%201%201%20.771.636A6.002%206.002%200%200%201%202.083%209H3.1z%22/%3E%20%3C/svg%3E');
}

.bi-check2-circle::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20fill=%22currentColor%22%20class=%22bi%20bi-check2-circle%22%20viewBox=%220%200%2016%2016%22%3E%20%3Cpath%20d=%22M2.5%208a5.5%205.5%200%200%201%208.25-4.764.5.5%200%200%200%20.5-.866A6.5%206.5%200%201%200%2014.5%208a.5.5%200%200%200-1%200%205.5%205.5%200%201%201-11%200z%22/%3E%20%3Cpath%20d=%22M15.354%203.354a.5.5%200%200%200-.708-.708L8%209.293%205.354%206.646a.5.5%200%201%200-.708.708l3%203a.5.5%200%200%200%20.708%200l7-7z%22/%3E%20%3C/svg%3E');
}