@font-face {
    font-family: 'ambleregular';
    src: url('../fonts/Amble-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ambleregularbold';
    src: url('../fonts/Amble-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
  --container-spacing: 30px;

  --color-ok: #77cc77;
  --color-warn: #ebda44;
  --color-error: #cf6060;

  --color-cyan: #63d5bc;
  --color-blue-l: #4c93d1;
  --color-blue-d: #3e8ae2;
  --color-white: #fff;
  --color-gray-l: #eee;
  --color-gray-d: #333;

  --font-size-m: 18px;
  --font-size-l: 20px;
  --font-size-xl: 25px;
  --font-size-xxl: 32px;

  @media (max-width: 480px) {
	  --container-spacing: 15px;
  }
}

h1,
h2,
h3,
h4,
h5,
input {
  font-weight: normal;
}

h1,
h2,
h3,
h4,
input,
select,
button {
  font-size: var(--font-size-l);
}

h5 {
  font-size: var(--font-size-m);
  text-decoration: underline;
}

body {
  background: var(--color-gray-l);
  color: var(--color-gray-d);
  font-family: 'ambleregular', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: var(--font-size-m);
  word-wrap: anywhere;
  margin: 0;
}

strong, b {
  font-family: 'ambleregularbold', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: normal;
}

.m-0 {
  margin: 0;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.pt-30 {
  padding-top: 30px;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.gap-15 {
  gap: 15px;
}

.gap-30 {
  gap: 30px;
}

.align-items-end {
  align-items: end;
}

.text-white {
  color: var(--color-white);
}

.brand-name {
  font-size: var(--font-size-xl);
}

.--blink-me {
  animation: blinker 1s linear infinite;
  color: var(--color-white);
}

.--no-dots {
  list-style-type: none;
  padding-left: 0;
}

@keyframes blinker {
  50% {
    color: var(--color-blue-l);
  }
}

.check-form {
  display: grid;
  grid-template-areas: "title title title" "protocol url button";
  grid-template-columns: 1fr 7fr 2fr;

  gap: 5px;
  background: var(--color-gray-l);
  padding: 15px;
  border-radius: 5px;
  border: 2px solid var(--color-blue-l);

  @media (max-width: 660px) {
    grid-template-columns: 2fr 5fr;
    grid-template-areas: 
    "title title"
    "protocol url"
    "button button";
    gap: 5;
    padding: 10px;
  }
}

#seo-check-form-title {
  width: 100%;
  grid-area: title;
}


.check-form select {
  grid-area: protocol;
  min-width: 110px;
  cursor: pointer;
  
  @media (max-width: 660px) {
    min-width: 95px;
  }
}

.check-form input {
  grid-area: url;
}

.check-form button {
  grid-area: button;
}

.check-form button,
.check-form input,
.check-form select {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  width: 100%;

  @media (max-width: 660px) {
    padding: 10px 5px;
  }
}

.check-form select,
.check-form input {
  background: var(--color-white);
  border: 1px solid #ccc;
}

.check-form button {
  color: var(--color-white);
  background: var(--color-blue-l);
  cursor: pointer;
  font-family: 'ambleregularbold', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: normal;
  border: none;
  white-space: nowrap;
}

.check-form button:hover {
  background: var(--color-blue-d);
}

p {
  margin: 15px 0;
}

h1,
h2,
h3 {
  margin: 0 0 15px 0;
}

h1
h2,
h4,
h5 {
  margin: 15px 0;
}

h1 {
  font-size: var(--font-size-xxl);
}

h2 {
  font-size: var(--font-size-xl);
}

.--hl-bg {
  padding: 5px 15px;
  background: var(--color-gray-l);
  border-radius: 5px;
  box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
}

.category {
  background: var(--color-blue-l);
  border-radius: 5px;
  padding: 5px 15px;
  color: var(--color-white);
  margin-top: 30px;
}

.container {
  max-width: 1200px;
  padding: var(--container-spacing);
  margin: 0 auto;
}

header,
footer {
  background: linear-gradient(305deg,rgb(37, 205, 171) 0%, rgba(11, 51, 84, 1) 41%)
}

footer,
footer a {
  color: var(--color-white);
}

footer a {
  margin: 0 5px;
}

header h1 {
  color: var(--color-cyan);
  line-height: 1em;
  padding-bottom: 10px;
}

@media (max-width: 480px) {
  header h1 {
    font-size: var(--font-size-xl);
  }

  header .flex {
    gap: 15px;

    img {
      width: 100px;
      height: 100px;
    }
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  header .flex {
    gap: 15px;
  }
}

main > .container {
  min-height: 110vh;
  background: var(--color-white);
  padding-bottom: 100px;
}

.panel {
  background: var(--color-white);
  border: 2px solid var(--color-gray-l);
  border-left: none;
  margin-bottom: 15px;
  display: flex;
}

.status {
  font-family: 'ambleregularbold', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: normal;
  font-size: 130%;
  width: 30px;
  min-width: 30px;
  text-align: center;
}

.status {
  overflow: hidden;
  padding: 5px;
}

.status span {
  color: var(--color-white);
  mix-blend-mode: multiply;
}

.content {
  padding: 15px;
  width: 100%;
}

a {
  color: var(--color-blue-l);
}

.status-ok,
.status-warn,
.status-error {
  padding: 0 8px;
  border-radius: 5px;
  display: inline-block;
}

.status-ok {
  background-color: var(--color-ok);
}

.status-warn {
  background-color: var(--color-warn);
}

.status-error {
  background-color: var(--color-error);
  color: var(--color-white);
}

.panel.--ok {
  border-color: var(--color-ok);
}

.panel.--ok .status {
  background: var(--color-ok);
}

.panel.--warn {
  border-color: var(--color-warn);
}

.panel.--warn .status {
  background: var(--color-warn);
}

.panel.--error {
  border-color: var(--color-error);
}

.panel.--error .status {
  background: var(--color-error);
}

.content > ul {
  max-height: 500px;
  overflow-y: auto;
  margin: 5px 0 !important;
}

.content ul {
  padding-left: 0;
  list-style-position: inside;
  margin: 0;
  list-style-type: none;
}

.content ul ul {
  padding-left: 15px;
}

.loading-wrapper {
  margin: 60px auto;
}

.loader {
  width: 48px;
  height: 48px;
  display: flex;
  transform-origin: 50% 125%;
  animation: mov-y 1s infinite linear;
  margin: 0 auto;
}

.loader:before,
.loader:after {
  content:"";
  flex:1;
  background: var(--color-cyan);
  transform-origin: 0% 100%;
  animation: rtr-x 1s infinite linear;
}

.loader:before {
  transform-origin: 100% 100%;
  animation-name: rtr-rx;
}

.results {
  display: flex;
  flex-direction: column-reverse;
  gap: 30px;
}

.results .url {
  white-space: nowrap;
  padding: 5px 10px;
  background: var(--color-gray-l);
  overflow-x: auto;
  border-radius: 5px;
  font-size: var(--font-size-l);
}

@keyframes mov-y {
  0%,25%   {transform:translateY(0)     scaleY(1)}
  49%   {transform:translateY(-75%)  scaleY(1)}
  50%      {transform:translateY(-75%)  scaleY(-1)}
  75%,100% {transform:translateY(-150%) scaleY(-1)}
}
@keyframes rtr-x {
  25%,75% {transform: rotate(0deg)}
  50%     {transform: rotate(90deg)}
}
@keyframes rtr-rx {
  25%,75% {transform: rotate(0deg)}
  50%     {transform: rotate(-90deg)}
}


@keyframes progress {
  0% { --percentage: 0; }
  100% { --percentage: var(--value); }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="progressbar"] {
  --percentage: var(--value);
  --primary: var(--color-gray-l);
  --secondary: var(--color-gray-l);
  --size: 200px;
  animation: progress 2s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="progressbar"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 55%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="progressbar"]::after {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-size: calc(var(--size) / 5);
  color: var(--primary);
}

.ul-status {
  padding-left: 3px;
  list-style-type: none;
}

.--hide {
  display: none !important;
}

.inline {
  display: inline !important;
}

.badge-summary {
  display: flex;
  
  @media (max-width: 480px) {
    flex-direction: column;
  }

  gap: 30px;
  align-items: center;
}

.summary span {
  font-family: 'ambleregularbold', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: normal;
}

.summary-neutral,
.summary .summary-ok,
.summary .summary-warn,
.summary .summary-error {
  white-space: nowrap;
  padding: 3px 20px;
  min-width: 100px;
  border-radius: 5px;
  margin-top: 5px;
}

.summary .summary-neutral {
  background: var(--color-gray-l);
}

.summary .summary-ok {
  background: var(--color-ok);
}

.summary .summary-warn {
  background: var(--color-warn);
}
.summary .summary-error {
  background: var(--color-error);
}

#top-btn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 100px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--color-blue-l); /* Set a background color */
  color: var(--color-white); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 5px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#top-btn:hover {
  background: var(--color-blue-d);/* Add a dark-grey background on hover */
}

.cookie-m {
  background-color: var(--color-white);
  line-height: 1em;
  text-align: left;
  padding: 15px;
  max-width: 300px;
  border-radius: 5px;
  position: fixed;
  left: 10px;
  bottom: 10px;
  border: 2px solid var(--color-blue-d);
  z-index: 1000;
  display: none;
}

.cookie-m ul {
  margin: 0;
  padding: 0 0 0 18px;
}

.cookie-m .button {
  background: var(--color-blue-l);
  color: var(--color-white);
  display: block;
  width: auto;
  cursor: pointer;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
  margin: 5px auto;
  border: none;
  cursor: pointer;
  width: 100%;
}

.cookie-m .button:hover {
  background: var(--color-blue-d);
}

.cookie-m span {
  text-align: center;
  display: block;
}

@media (max-width: 660px) {
  .cookie-m {
    max-width: none;
    left: auto;
    margin: 0 10px;
  }
}