:root {

     /* Existing colors */
     --bg-base: #0c322c;
     /* Original background */
     --primary-color: #30ba78;
     --text-main: #ffffff;
     --text-muted: #9ec3b9;
     --chart-color-2: #1e754b;
     --chart-color-3: #4ff7a3;
     --chart-color-4: #279963;
     /* New 3D background gradient colors */
     --bg-grad-1: #071f1b;
     --bg-grad-2: #014a40;
     --bg-grad-3: #05211b;
     --attn: var(--color-persimmon-5);


     --bg-2: #ffd3bd33;


     --color-white: rgb(255, 255, 255);
     --color-black: rgb(0, 0, 0);

     --color-pine: rgb(12, 50, 44);
     --color-jungle: rgb(48, 186, 120);
     --color-mint: rgb(144, 235, 205);
     --color-persimmon: rgb(254, 124, 63);
     --color-midnight: rgb(25, 32, 114);
     --color-waterhole: rgb(36, 83, 255);
     --color-fog: rgb(239, 239, 239);

     --color-jungle-1: var(--color-pine);
     --color-jungle-2: rgb(2, 89, 55);
     --color-jungle-3: rgb(0, 134, 87);
     --color-jungle-4: var(--color-jungle);
     --color-jungle-5: rgb(66, 210, 159);
     --color-jungle-6: rgb(131, 225, 190);
     --color-jungle-7: rgb(192, 239, 222);
     --color-jungle-8: rgb(234, 250, 244);

     --color-pine-1: var(--color-pine);
     --color-pine-2: rgb(1, 86, 74);
     --color-pine-3: rgb(0, 136, 120);
     --color-pine-4: rgb(0, 189, 167);
     --color-pine-5: rgb(56, 213, 180);
     --color-pine-6: var(--color-mint);
     --color-pine-7: rgb(191, 241, 234);
     --color-pine-8: rgb(234, 250, 248);

     --color-persimmon-1: rgb(71, 25, 13);
     --color-persimmon-2: rgb(142, 40, 16);
     --color-persimmon-3: rgb(189, 51, 20);
     --color-persimmon-4: rgb(255, 90, 43);
     --color-persimmon-5: rgb(254, 124, 63);
     --color-persimmon-6: rgb(255, 177, 132);
     --color-persimmon-7: rgb(255, 211, 189);
     --color-persimmon-8: rgb(255, 239, 233);

     --color-blue-1: rgb(10, 17, 43);
     --color-blue-2: rgb(25, 32, 114);
     --color-blue-3: rgb(11, 65, 183);
     --color-blue-4: rgb(36, 83, 255);
     --color-blue-5: rgb(60, 142, 239);
     --color-blue-6: rgb(129, 174, 252);
     --color-blue-7: rgb(200, 218, 252);
     --color-blue-8: rgb(230, 237, 254);

     --color-fog-1: rgb(29, 29, 29);
     --color-fog-2: rgb(62, 62, 62);
     --color-fog-3: rgb(82, 82, 82);
     --color-fog-4: rgb(111, 111, 111);
     --color-fog-5: rgb(153, 153, 153);
     --color-fog-6: rgb(186, 186, 186);
     --color-fog-7: rgb(220, 219, 220);
     --color-fog-8: rgb(239, 239, 239);

     --color-spectrum-1: rgb(0, 189, 167);
     --color-spectrum-2: rgb(161, 239, 139);
     --color-spectrum-3: rgb(125, 198, 226);
     --color-spectrum-4: rgb(232, 193, 247);
     --color-spectrum-5: rgb(93, 79, 153);
     --color-spectrum-6: rgb(249, 202, 191);
     --color-spectrum-7: rgb(252, 178, 68);
     --color-spectrum-8: rgb(189, 51, 20);

     /*helper variables*/
     --color-teal: var(--color-spectrum-1);
     --color-lime: var(--color-spectrum-2);
     --color-sky: var(--color-spectrum-3);
     --color-lilac: var(--color-spectrum-4);
     --color-amethyst: var(--color-spectrum-5);
     --color-peach: var(--color-spectrum-6);
     --color-marigold: var(--color-spectrum-7);
     --color-rust: var(--color-spectrum-8);
   }

   :root {
     background-color: rgb(12, 50, 44);
   }

   ::selection{
    background-color:var(--color-jungle-6); color:var(--bg-base);  text-shadow: 0 .15em .1rem rgba(0,0,0,0.2)
   }


   @font-face {
     font-family: 'SUSE';
     src: url('fonts/SUSE[wght].ttf') format('truetype');
     font-weight: 100 900;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: 'SUSE';
     src: url('fonts/SUSE-Italic[wght].ttf') format('truetype');
     font-weight: 100 900;
     font-style: italic;
     font-display: swap;
   }

   @font-face {
     font-family: 'SUSE Mono';
     src: url('fonts/SUSEMono[wght].ttf') format('truetype');
     font-weight: 100 800;
     font-style: normal;
     font-display: swap;
   }

   @font-face {
     font-family: 'SUSE Mono';
     src: url('fonts/SUSEMono-Italic[wght].ttf') format('truetype');
     font-weight: 100 800;
     font-style: italic;
     font-display: swap;
   }


   *,
   *:before,
   *:after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;

   }
.header.is-fixed{background-color: #0c322c99;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
   
}



/* OTT mobile vingette  */ 
@media (max-width:512px){
body:before{content:""; 
width: 100vw;height:100vh; position:fixed; top:0; bottom:0em; right:0; left:0; 
pointer-events:none;
transform:scale(1.1);
background: radial-gradient(transparent, #00110e00, #00110e77);
background-size: cover;
background-position: 50% 50%;
}

    .classification span{position:relative !important;top: auto; right: auto}
}


   body {
     background-color: #071f1b;
   }
html,
body {

  background-color: var(--bg-grad-1);
  font-family: "SUSE", sans-serif;
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-y: auto !important;
  display: block !important;

  /* Fallback and base gradient */
  background: linear-gradient(135deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 50%, var(--bg-grad-3) 100%);
  position: relative;
}


.header-description {
  padding: 2em 0;
  padding-top: 1em;
  font-weight: 200;
  color: var(--text-main);
  font-size: 1.3rem;
  border-top: .055em solid var(--color-jungle-3);
  margin-top: 1.5em !important;
}

/* Container for content that must stay on top of the background */
article {
  position: relative;
  z-index: 1;  /* Content above the background canvas */
  padding-top: 5em; /*clearing the SUSE nav*/
}

/* Canvas for Three.js background */

section a{color: var(--color-persimmon-6)}

#bg-canvas {
  position: fixed;
  top: 0vh;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: .5;
  pointer-events: none;
 }

/* Typography (unchanged from original) */
h1 {
  font-size: 6em;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5em;
  color: var(--primary-color);
}

h3 {
  font-size: 2.5rem;

  margin-bottom: 1rem;
  line-height: 1.3em;

}

h4 {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--chart-color-3);
}

p {
  font-size: 1.5rem;
  font-weight: 350;
  margin-bottom: 2rem;
}

q {
  display: block;
  margin: 2rem 0;
  padding: 2rem;
  text-align: center;
  line-height: 1.3em;
  padding-top: 5rem;
  position: relative;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 300;
  border-radius: 1.75rem;
  background-color: var(--text-muted);
  color: #071f1b;
  quotes: none;
}

q>b:first-child {
  font-size: .8em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  display: inline-block;
  padding: 1em 2rem;
  padding-bottom: 1rem;
  font-style: normal;
  letter-spacing: .1em;
  font-weight: 600;
  color: #01564a
}

q small {
  color: var(--text-muted);
}

/* Layout (unchanged from original) */
.container {
  max-width: 1200px;
  margin: 1rem auto;
  padding: 3rem;
    padding-right:6rem;
position:relative;
}

section {
  font-size: 1.5rem;
 
  /*      min-height: 100vh;   */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
  position: relative;

}

.hero {
  animation: introduction 3s ease forwards;
  text-align: center;
  flex-direction: column;
  font-size: clamp(2rem, -1.5rem + 4vw, 2.5rem);
}

@keyframes introduction {
  0% {
    opacity: 0;
    transform: scale(1.1) translateY(10%)
  }

  100% {
    opacity: 1;
  }
}

@keyframes introduction-p {

  0%,
  50% {
    opacity: 0;
    transform: scale(1.1) translateY(10%)
  }

  100% {
    opacity: 1;
  }
}


.hero p {
  animation: introduction-p 3s ease forwards;

  margin: 0 auto;

  font-size: clamp(1rem, -1.5rem + 8vw, 1em);

}

.hero h1 {
  margin: 0;
  text-shadow:0 .7rem 1rem #0009, 0 .2rem .1rem #0005;
}
 



.three-facts-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  align-items: center;
  width: 100%;
  place-items: baseline;
  gap: 1em;

}
.three-facts-layout details[open] summary{padding-bottom:2em}

.country-count{padding: 2em}

.country-count >div{
display:grid; grid-template-columns: 5em 1fr 1fr;
  text-align:left; 
  padding-bottom:1em;
}

.big-num-label {
  font-size: 1.5em;
  display:block;
}


.spot-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  order: 1;
}

/* Chart Sections (unchanged from original, but adds slight transparency to containers) */

.demo-detail{max-width:100%; }

.demographics details{max-height:17em; transition: all .2s ease-in}

.demographics details[open]{background-color: #01564a77; border-radius: 1em;box-shadow: 0 .2em 1em var(--bg-base), inset 0 .1rem #fff2;
max-height: 69em; }

@media (min-width: 700px){.demographics details[open]{height:72em;}}
@media (max-width: 700px){.demographics details[open]{max:75em;}}


summary{cursor:pointer}

section.container {
  flex-direction: column;
  align-items: stretch;
      justify-content: start;
}


.grid-2-layout,
.chart-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  
      place-items: start;
}


.chart-layout.reverse {
  grid-template-columns: 1fr 1fr;
}

.chart-layout.reverse.left {
  grid-template-columns: 2fr 1fr;
}

.chart-layout.full-width {
  grid-template-columns: 1fr;
}

.chart-layout.reverse.right {
  grid-template-columns: 1fr 2fr;
}

.text-content {
  align-self: start
}

.chart-layout.reverse .text-content {
  order: 2;
}

.grid-2-layout.reverse :first-child{
  order: 2;
}


.chart-layout.reverse .chart-container {
  order: 1;
}

.chart-container {
  position: relative;
  width: 100%;
justify-content: stretch !important;

  display: grid;
  place-content: center;

}

.chart-container canvas {
  max-width: 100%;



  filter: drop-shadow(.0em .05em 1em #0c322c55) drop-shadow(0rem .25rem .12em #0c322caa);
}




.uno{order:1}
/*all copy fonts light*/
article p {
  font-weight: 400;
  line-height:1.5em;
  color:#fffc;
}

article i,
article strong,
article b{color:white; text-shadow: 0 .1rem .1rem #0005 }


article b, article strong{font-weight:500}
/* Responsive */

@media (min-width: 900px) {
  .hero {
    padding-top: 4em;
  }
}


@media (max-width: 900px) {

  
    .grid-2-layout,
  .grid-5-layout,
  .grid-3-layout,
  .grid-4-layout,
  .three-links h3,
  .three-links,
  .three-facts-layout,
  .chart-layout,
  .chart-layout.reverse {
    grid-template-columns: 1fr !important;
    grid-column: span 1 !important;
  }

  .grid-5-layout>div {
    display: grid;
    grid-template-columns: 1fr 10em 3fr;
    align-items: start;
  }

  .grid-5-layout>div>ul {
    grid-column: 1 / -1;
  }

  .grid-5-layout h4,
  .grid-5-layout .country-name {
    width: 100%
  }

  .grid-5-layout .flag {
    margin: 1em auto;
  }

  .chart-layout.reverse .text-content {
    order: 1;
  }

  .chart-layout.reverse .chart-container {
    order: 2;
  }

  footer {
    text-align: center
  }

  footer svg {
    margin: 0 auto;
  }

  h1 {
    font-size: 4em;
  }

  /*prominent headers on mobile*/
  article h2 {
    padding-top: 10rem !important;
    font-weight: 500 !important;
    ;
  }


  #key-findings{text-align:center}

.grid-3-layout.custom,
  .quote-layout{gap:0 ; margin:0}

.grid-3-layout .quote-layout{margin:0 !important; ;}

#key-findings a{position:relative !important;}

.quote-layout cite{text-align:center !important; opacity:.7;}

.classification{display: grid;
    grid-template-rows: 1fr ;}


    .reason-list ol {text-align: center;}
.reason-list ol li{float:none !important; clear:none;     margin: 0.25rem auto; }


#breachedConfidenceChart, #notBreachedConfidenceChart{max-height:15em;}


#cybersecurity .grid-3-layout{}


} /* end mobile */





article h3 {
  color: var(--color-jungle-6);
  font-weight: 600;
  font-size: 2rem;
  margin-top:2em;
}

article p {
  font-size: 1.75rem;
}

svg * {
  transform-box: fill-box;
}


.dangling-geeko .dg-branch {
  transform-origin: bottom right;
  animation: branch-sway 5s infinite
}


#gl-head {
  animation: sway 5s infinite;
  transform-origin: bottom left;
}

#gl-eyelids {
  animation: blink 3s infinite
}

@keyframes branch-sway {

  0%,
  100% {
    transform: rotate(-1deg)
  }

  50% {
    transform: rotate(1deg)
  }
}


#gc-leaves-1 {
  transform-origin: top right;
}

#gc-leaves-2 {
  transform-origin: 50% 100%;
}

#gc-leaves-1,
#gc-leaves-2 {
  animation: sway 6s infinite;
}

@keyframes sway {
  50% {
    transform: rotate(10deg)
  }
}



.dg-frontleg {
  transform-origin: 10% 10%;
}

.dg-backleg {
  transform-origin: 20% 100%;
}

.dg-backleg,
.dg-backleg :last-child,
.dg-backleg :nth-child(2),
.dg-frontleg,
.dg-frontleg :last-child {
  animation: sway 6s infinite;
}

.dg-backleg {
  animation-delay: -6s
}

.dg-backleg :nth-child(2),
.dg-frontleg {
  animation-delay: -6s;
}

.dg-backleg {
  animation-delay: -3s
}

@keyframes sway {
  50% {
    transform: rotate(10deg)
  }
}

.dg-body {
  transform-origin: top right;
  animation: branch-sway 5s infinite
}


#gc-eyelids {
  animation: blink 2s infinite
}

@keyframes blink {

  0%,
  25% {
    stroke-width: 0
  }

  50% {
    stroke-width: 120
  }

  75%,
  100% {
    stroke-width: 0
  }
}


#gc-pupil {
  animation: look 4s infinite
}

@keyframes look {
  0% {
    transform: translate(-5%, -5%)
  }

  50% {
    transform: translate(10%, 85%)
  }

  100% {
    transform: translate(-5%, -5%)
  }
}



.curious-geeko {

  max-height: 30vh;
  min-height: 20rem;
  display: block;
  width: 100%;
  z-index: 1;
  position: relative;
  margin-top: -6rem;

}

.laying-geeko {
  display: block;
  max-height: 30vh;
  min-height: 20rem;
  display: block;
  width: 100%;
  max-width: 35em;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  margin-bottom: -2.5em;

}


.sitting-geeko {
  display: block;
  max-height: 30vh;
  min-height: 16rem;
  display: block;
  width: 100%;
  max-width: 27em;
  margin: 0;
  margin-left: -6em;


}

.dangling-geeko {
  display: block;

  width: 100%;
  z-index: 1;

  max-height: 35em;
  min-height: 40rem;

      margin: -5em 0;
}

.spot-illustration {
  pointer-events: none;
  display: block;
  position: relative;
  z-index: 3;

  filter: drop-shadow(.0em .05em 2em #0005) drop-shadow(0rem .25rem .12em var(--bg-grad-1));

  filter: drop-shadow(.0em .05em 1em #0c322c55) drop-shadow(0rem .25rem .12em #071f1bff);

}


#gp-tail {
  animation: sway 6s infinite;
}

#gp-pupil {
  animation: look 4s infinite
}

#gp-head {
  animation: sway 6s infinite;
  transform-origin: bottom left;
}

@keyframes sway {
  50% {
    transform: rotate(10deg)
  }
}

#gp-eyelids {
  animation: blink 2s infinite
}


#gl-pupil {
  animation: look 4s infinite
}

#gc-pupil {
  animation: look 4s infinite
}

.dg-pupil {
  animation: look 4s infinite;
  transform-origin: 50% 50%;
}

@media (min-width: 700px) {
  .curious-geeko {
    max-height: 60vw; 
  }
}

#countries h3 {
    display: block;
    line-height:1;
    font-size: clamp(5rem, -13rem + 20vw, 13rem);
    margin: 0;
    color: var(--bg-grad-2);
    font-weight: 900;
}

@media (max-width: 900px) {
  #countries h4, #countries .country-name { text-align: center; }

}

@media (min-width: 900px) {
  .curious-geeko {
    max-height: 20vw; 
  }
}

.quote-layout {
  display: grid;
  grid-template-columns: 1fr;
      margin: 4rem 0;
      /*background: var(--bg-grad-1); */
      border-radius: 1.8rem 1.8rem 1rem 1.8rem ;
      box-shadow:   inset 0 .1rem #a1ef8b22, 0 0 0 .1rem #0004, 0 .2em 2em #071f1baa;
      background-color: #071f1baa;
        position: relative;
        padding:.5em 0;
        
}

.quote-layout blockquote p {
  font-size: 1.5em;
  color: var(--text-muted);
  text-shadow:0 .1rem .1rem #000;
  line-height: 1.3em;
  font-weight: 300;
  font-style: italic;
  padding-right: .5em;
  position:relative; z-index:2;
}

.quote-layout blockquote {padding-left: 4em;margin:0;text-shadow: 0 0.1rem var(--bg-grad-1);}

.quote-layout blockquote >p:last-child{margin-bottom:0}
.quote-layout cite {
  font-style: normal !important;
  text-align: right; padding-right:2em;
  color: var(--text-muted);order:2;
  font-weight:200; font-style: italic;position:relative; z-index:2;margin-top: .275em;
}
.quote-layout blockquote b{color:white}
/*.quote-layout blockquote b:after{content:""; display:block}*/

.quote-layout cite:before {
  content: "— ";
  color: var(--color-jungle-3); 
}

.quote-layout blockquote:before {
    content: "❝";
    color: var(--color-jungle-3);    font-size: 4em;  
    display: block;
    font-family: "SUSE", sans-serif;
    position: absolute;
    font-weight: 500;
    left: 0rem;
  text-shadow:none;
        top: 3.75rem;
    font-style: normal;
    line-height: 0rem;}

.quote-layout blockquote:after {
     content: "❞";  text-shadow:none;
    color: var(--color-jungle-3);
    font-size: 1.5em;
    display: block;
    font-family: "SUSE", sans-serif;
    position: absolute;
    font-weight: 400;
    left: 0rem;
    bottom: 1.2rem;
        z-index:0;
        right: .2rem;text-align:right;
    font-style: normal;
    line-height: 0rem;
}




footer {
  color: var(--text-muted);
  background-color: #071f1bcc;
  padding: 4em 0;
}

footer .container {
  margin-bottom: 0
}

footer h3 {
  margin: 2em 0
}



.count-up {
  user-select:none; pointer-events: none;
  font-size: 10em;
  text-align: center;
  position: relative;
  font-size: clamp(15rem, -2.5rem + 18vw, 20rem);
  font-weight: 900;
  line-height: .8em;
  color: var(--primary-color);
  text-shadow: .025em .081em .07em var(--bg-grad-3);

  text-shadow: .0em .05em .03em #0c322c55;
  background: -webkit-linear-gradient(-90deg, var(--chart-color-3), var(--chart-color-4), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: #4ff7a355;
      white-space: nowrap;

  margin: 0 auto;
}

.count-up:before {
  content: attr(data-count);
  position: absolute;
  z-index: -1;
}

.count-up.percent:after {
  content: "%";
  text-shadow: .025em .081em .1em var(--bg-base);
  font-size: .6em;
  font-weight: 500;
  color: #279963;
  -webkit-text-fill-color: #4ff7a355;
/*  text-shadow: .025em .081em .1em var(--bg-grad-3)*/
}



.count-up.large {
  font-size: clamp(20rem, -5rem + 35vw, 35rem);
}

.three-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  padding: 2em;
  gap: 1em;
  margin: 0 auto
}

.three-links a {
  text-decoration: none;
  color: white;
  background-color: var(--chart-color-2);
  padding: 1em 2em;
  border-radius: 3em
}


.three-links a:nth-child(2) {
  background-color: white;
  color: #0c322c
}

.three-links h3 {
  grid-column: span 3;
  color: white
}

.creative-commons {
  color: #9ec3b9;
}

.creative-commons:hover {
  color: white
}

.creative-commmons svg {
  display: block;
  margin-bottom: 3em
}

article hr {

  background-color: transparent;
  padding: 0;
  margin: 2em auto;
  appearance: none;
  height: 2em;
  border: 0;
  border-radius: 1em;
  box-shadow: 0 1em 1em -1em #0005 inset, 0 1px 0 #fff3;
  max-width: calc(100% - 4em);
}

article h2 {
  text-align: center;
  font-weight: 100;
  position: relative;
  font-size: clamp(4rem, -3rem + 10vw, 9rem);
  text-shadow: 0 0.1em .1em var(--bg-grad-3), 0 .2rem .1rem var(--bg-grad-3);
  padding-top: 20rem;
  margin-top: 0;

    padding-top: .3rem;
    margin-top: 2em;
}


article .subtitle {
  text-align: center;
      color: var(--color-jungle-7);
    text-shadow: 0 .15rem .2rem var(--color-pine-1);
    margin-bottom:6rem;
    font-weight:315;
    font-size: 1.5em;
 
    margin-left: 2em;
    margin-right: 2em;
}

article h2:before {
  content: "";
  display: block;
  height: 5em;
  margin: -2.5em 0 -1em;
  position: absolute;
  z-index: -1;
  top: 1em;
  width: 100%;
  opacity: .6;
  background-image: 
    conic-gradient(from 90deg at 10% 50%, var(--chart-color-2), var(--bg-grad-1)), conic-gradient(from 270deg at 90% 50%, var(--bg-grad-1), var(--chart-color-2));  -webkit-mask-image: radial-gradient(white 5%, transparent 70%);
  background-position: 1% 0%, 99% 0%;
  background-size: 50% 100%, 50% 100%;
  background-repeat: no-repeat;
  transform:scale(2);
}



article h2:after {
  content: "";
  display: block;
  height: .05rem;
  margin: 0 auto;
  position: absolute;
  z-index: -1;
  top: -1em;
  top: 1em;
  width: 50%;
  margin-left: -25%;
  left: 50%;
  opacity: .75;
  transform:scale(2);
  background-image: linear-gradient(90deg, transparent, var(--text-muted), transparent);

  background-size: contain;
  background-repeat: no-repeat;
}




.jump-to {
  z-index: 9;
  position: fixed;
  right: 0;
  top: 0;
  bottom:0;
  z-index: 999;
  background-color: transparent !important;
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
  border-radius: 1.5em 0 0 1.5rem ;
  transition: all .4s cubic-bezier(.7, .1, 0, 1);
  margin-top: 0;

}


.jump-to p {
  position: absolute;
  text-transform: uppercase;
  user-select: none;
  top: 1.5rem;
  right: 0;
  padding-left: 2.9rem;
  width: 100%;
  font-weight: 600;
  letter-spacing: .1rem;
  font-family: "SUSE Mono", SUSE
}

.jump-to:not(:hover) {
  transform: translatex(calc(100% - 3.5em));
  background-color:transparent;
}

.jump-to:hover {
  transform: translatex(0%));
}

.jump-to:hover p {
  color: var(--bg-grad-1)
}





.center-text {
  text-align: center;
}


.hide{display:none}
.detail-contain{position:relative; margin-bottom:4em}

details,
summary {
  padding: 0;
  margin: 0;
  display: block;
}

.survey-details {
  display: inline-block;
  margin: 1em;
  margin-left: 0;
  position: absolute;
  z-index: 4;
  min-height: 1.9em;
  padding-top: 1.5em;

}

.survey-details.base {
  top: 100%;
 
}

.base.right {
  right: 0;
}

.midd{place-self: anchor-center;}
.survey-details summary {
  user-select: none;
}

.survey-details>summary>b {
  opacity: 0;
  height: 1.5em;
  line-height: 1.5em;
  border-radius: 1.5em;
  position: absolute;
  top: 0.2em;
  text-shadow:none;
  font-family: "SUSE Mono", SUSE;
  left: 0.2em;
  padding: 0 1em 0 1em;
  text-transform: uppercase;
  font-weight: 700;
  background-color: var(--attn);
  color: var(--bg-grad-1);
}

.survey-details[open]>summary:after {
  content: "+";
  font-size: 1.5em;
  position: absolute;
  right: .1em;
  top: .1em;
  display: block;
  text-align: center;
  width: 1em;
  height: 1em;
  line-height: 1em;
  position: absolute;
  transform: rotate(45deg);
  font-weight: 300;
  ;
  display: block;
  color: var(--color-persimmon-6);
  background-color: #0004;
  border-radius: 50%;
  
}


.survey-details[open]>summary:hover:after {
  background-color: var(--color-persimmon-3);
  color: white;
}

.survey-details:not([open]) {
  width: 1.9em;
  height: 1.9em;
}

.survey-details[open]>summary>b {
  opacity: 1;
}

.survey-details[open] {
  padding: 3em 1em 1em 1em;
  animation: ta-dah .3s cubic-bezier(.5, .1, .1, 1.5) forwards;
  transform-origin: 0% 0%;
  width:100%;

}


@keyframes ta-dah {
  0% {
    transform: scale(.9);
    opacity: 0;
  }
}

.survey-details * {
  outline: none
}

/*forgive me a11y folks*/

.survey-details>summary:before {
  content: "?";
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  font-weight: 800;
  display: block;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5em;
  background-color: var(--attn);
  color: var(--bg-base);
}


.survey-details>summary:focus:before {
  background-color: white
}

.survey-details[open]>summary:before {

  width: 150%;
  height: 150%;
  background-color: var(-attn);
  border-radius: 1em;
  content: "";
  opacity: 0;
  left: -25%;
  top: -25%;
  bottom: -25%;
  right: -25%;
}



.survey-details summary {
  cursor: pointer;

  box-shadow: 0 0 0 0.1em var(--attn), 0 .5em 1em #071f1b55;
  border-radius: 1em;
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;

}

.survey-details[open]>summary {
  box-shadow: 0 0 0 0.1em var(--attn), 0 .5em 1em #071f1b55;
  background-color: #071f1bff;
  backdrop-filter: blur(3px);
}

.survey-details:not([open])>summary {
  box-shadow: 0 0 0 0.1em var(--attn)
}

.survey-details small {
  white-space: :nowrap;
  display: inline-block;
  padding: .1em 1em;
  border-radius: 1.5em;
  text-transform: uppercase;
  font-weight: 300;
  font-family: 'SUSE Mono';
  color: var(--color-persimmon-5);
  box-shadow: 0 0 0 .05rem;
  margin: .5em;
  font-size: 1rem;
}

/* for select all that apply */

.survey-details .sample-size {
  text-align: right;
  position: absolute;
  pointer-events: none;
  bottom: -2em;
  right: 0em;
  color: var(--attn);
  font-weight: 300;
}
/* legend colors from charts */
.legend{user-select: none;}
.legend p{margin:0; display:inline-block; font-size: .9em; color:var(--text-muted) }
.sw {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: var(--color-jungle);
  margin-right: .5rem; margin-left: 1em;
  border-radius: 50%;
}

.sw-1 {
  background-color: #a1ef8b
}

.sw-2 {
  background-color: var(--color-jungle-5)
}

.sw-3 {
  background-color: #6ea18b
}
.sw-4{background-color:#2b564b}

details>div {
  z-index: 9;
  position: relative;
  pointer-events: none;
}


.detail-contain details:not([open]) summary {
  animation: subtle-pulse 5s infinite
}

@keyframes subtle-pulse {

  0%,
  50% {
    box-shadow: 0 0 0 .1rem var(--attn), 0 0 0 1em transparent)
  }

  60%,
  100% {
    box-shadow: 0 0 0 1rem transparent, 0 0 0 0.1em var(--attn)
  }
}





.count-up.large {
  animation: font-swole 2s ease forwards
}

@keyframes font-swole {

  0% {
    font-size: clamp(20rem, -5rem + 35vw, 35rem)
  }

  50% {
    font-size: clamp(25rem, -5rem + 40vw, 40rem)
  }

  100% {
    font-size: clamp(20rem, -5rem + 35vw, 35rem)
  }
}


#key-findings .count-up{font-size:5em !important; text-align:center;}


.grid-5-layout {
  display: grid;
  gap: 2rem;
  align-content: start;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
}

.grid-5-layout p {
  font-size: 1.5rem;
  line-height: 1.3em
}




.grid-5-layout h4 {
  text-align: left;
  color: var(--text-main);
}

.country-name {
  display: block;
  font-size: 2rem;
  text-align: center;
  font-weight: 400;
  margin:0 auto;
  margin-bottom: 1rem;
  color: var(--text-main);
}

.countries-tabs-layout {
  margin: 0 -1.5rem;
  display: grid;
  gap: 0rem;


}

.country-card-list {
  width: 100%;

}

.country-card {
  outline:0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0rem;
  text-align: center;
  background:transparent;
  border: none;;
  border-radius: 2em 2em 0 0; 
  color: inherit;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.country-card:hover,
.country-card:focus-visible {
  transform: translateY(0);
 

}


.country-card.active {
  background: none;
    background: var(--bg-base);
    box-shadow: inset 0 .3rem 0  -.2rem  var(--color-jungle-3),   inset 0 .3rem .2rem -.2rem  var(--color-jungle-2), inset 0 2rem 3rem -3rem  var(--color-jungle-2),   0 -.3rem .2rem -.2rem var(--color-jungle-1);

}

.country-panel-container {
  width: 100%;
  position: relative;
  z-index: 1;
}

.country-panel {
  position:relative;
  display: none;
}

.country-panel.active {
  display: block;
}


.country-panel {
  background: var(--bg-base);
  border: none;
  border-radius: 0 0 1em 1em;
  padding: 2rem;
}

.country-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.country-header .flag {
  margin: 0;
}

.country-header h3 {
  margin: 0;
  font-size: 2.2rem;
}

.country-panel p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.country-panel ul {
  padding-left: 1.5rem;
  margin: 0;
  list-style: disc inside;
}

.country-panel li {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .countries-tabs-layout {
    grid-template-columns: 1fr;
  }

  .country-header {
    flex-direction: column;
  }
}



@media (max-width:900px) {
  .grid-5-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:600px) {
  .grid-5-layout {
    grid-template-columns: 1fr;
  }
}

.flag {
  position: relative;
  display: block;
  font-size: 1em;
  width: 2em;
  height: 1.5em;
 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: .0em .05em 1em #0c322c55, 0rem .25rem .12em #0c322caa, inset 0 1px #fff8, inset 0 -1px #0004;
  overflow: hidden;
  border-radius: .5em;
  


}


.grid-5-layout .flag{   border-radius: 1em;font-size: 2em;  font-size: clamp(1rem, 2vw, 2rem);width: 8em;
  height: 6em;margin: 1em auto;}

  
.grid-3-layout {
  display: grid;
  gap: .5rem;
  align-content: start;
  grid-template-columns: repeat(3, 1fr);

  line-height: 1.3em;
  font-weight: 400;
}

.grid-3-layout.custom{
    grid-template-columns: 1fr 1.5fr 1fr ;
    padding:0; margin: 2em 0;
    margin-top:0;
    gap:2em;
    padding-top: .5em;
    background: var(--bg-grad-2); 
    border-radius: 1.8rem 1.8rem 1rem 1.8rem;
    box-shadow: 0 .2em 3em #071f1baa;
   background-color: #071f1baa;
    position: relative;
  box-shadow: inset 0 .1rem #a1ef8b22, 0 0 0 .1rem #0004, 0 .2em 2em #071f1baa;
  }

 .grid-3-layout.custom .quote-layout{background-color:transparent}
.grid-3-layout.custom .quote-layout{box-shadow: none; margin:0;}

 .grid-3-layout.custom .quote-layout blockquote{padding-left:3em;}
 .grid-3-layout.custom .quote-layout blockquote:before{font-size:2em;left:1rem; top:.65em}

.grid-3-layout.custom .quote-layout blockquote:after{ content:""}
.grid-3-layout.custom .quote-layout blockquote:after{ content:""}


article blockquote b {

/*  box-shadow: inset 0 .15rem .5em var(--color-jungle-2);
  background-color: #1e754b55;
  text-shadow: 0 .1rem .2rem var(--bg-base)*/
}
.grid-3-layout h4 {
  color: var(--text-main);
  line-height: 1.3em;
}

.grid-4-layout {

  display: grid;
  gap: 5rem;
  align-content: start;
  grid-template-columns: repeat(4, 1fr);

  line-height: 1.3em;
  font-weight: 300;

}



.us .flag {
  background-image: url('img/us.svg');
}

.fr .flag {
  background-image: url('img/fr.svg');
}

.in .flag {
  background-image: url('img/in.svg');
}

.de .flag {
  background-image: url('img/de.svg');
}

.jp .flag {
  background-image: url('img/jp.svg');
}


.flag:before {
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(90deg, white, black, white);

  background-image: repeating-linear-gradient(0deg,
      white 0%,
      black 10%,
      white 20%,
      black 30%,
      white 40%,
      black 50%,
      white 60%,
      black 70%,
      white 80%,
      black 90%,
      white 100%,

    );
  background-size: 20rem 20rem;
  opacity: .25;
  background-position: top left;
  mix-blend-mode: luminosity;
  animation: shimmer 35s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 1800% 0%
  }

  100% {
    background-position: -1800% 0%
  }
}




.classification{
  color:var(--text-muted);
  }
.classification b, .classification strong{font-size: 2rem; color:var(--color-jungle);vertical-align: middle;}

.classification span{display:inline-block;  margin:1rem 0; background-color:var(--color-jungle-1); padding:.5rem 1rem;  color:var(--text-muted); 
box-shadow: 0 0 0 .1rem var(--color-jungle-1);
  border-radius: 1.75rem;
    color: var(--color-jungle-6);
    margin-left: -1rem;}



@media (max-width:600px) {

  .dangling-geeko {
    transform: translateX(-20vw)
  }

  .grid-5-layout h4,
  .grid-5-layout>div {
    grid-template-columns: 1fr;
    text-align: center;
  }


}
 


.jump-to h2{display:none;}

.jump-to a {
  padding: .5em 3rem;
  color: var(--text-muted);
  transition: all .2s ease;
}

.jump-to a:hover {
  background-color: #01564a55;
  color: white;
}
.contain{position:relative; margin-bottom:3em;}
.jump-to a.active {
  background-color: var(--color-jungle-7);
  color: var(--color-pine-1);
  font-weight: 600;
  margin-left:-2rem;

}

@media (max-height:600px) {
  .jump-to a {
    padding: .5rem 1em !important;
  }

  .jump-to {
    top: 2em;
  }

}

.jump-to,
.toc-container {
  background-color: transparent !important;
  box-shadow: none !important;
}

.jump-to ul {
  transition: background-color .5s ease;
  border-radius: 2em 0 0 2em;
}

.toc-container ul,
.toc-container li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jump-to a {
  display: block;
  vertical-align: middle;
  padding: 1em;
  color: var(--color-pine-6)
}

.jump-to a.active {
  margin: 0;
  display: block;
}

.toc-container a:before {
  content: "";
  box-shadow: inset 0 .1rem #a1ef8b22, 0 .2rem 1rem #071f1b99;
  display: inline-block;
  background-color: #6ea18b55;
  width: .6em;
  height: .6em;
  border-radius: 50%;
  margin: 0 1em;
  margin-right: 1em;
  transition: all .3s ease;
}




.jump-to a.active:hover,
.jump-to a.active {
  color: white;
  background-color: var(--bg-grad-2);
  box-shadow: inset 0 .1rem #a1ef8b22, 0 .2rem 1rem #071f1b99;
}

.jump-to a:hover {
  box-shadow: 0 .2rem 1rem #071f1b99;
}

.jump-to a:hover:before {
  background-color: #6ea18b;
}

.jump-to a.active:before {
  background-color: white;
  transform: scale(2)
}

.jump-to:hover ul {
  background-color: #071f1bff;
  box-shadow: inset 0 .1rem #a1ef8b22, 0 .2rem 1rem #071f1b99;
}


.jump-to a {
  border-radius: 2em 0 0 2em
}

[name="demographic"] {
  opacity: 0;
  position: absolute;
  pointer-events: none
}

.spot-icon{height:6em;   filter: drop-shadow(.0em .05em 1em #0005) drop-shadow(0rem .25rem .12em #0004);}


.reason-list ol ,
.reason-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position:relative;
  counter-reset: ol;
}
.reason-list ul:after{content:""; display:block; width: 100%; clear:both;}

.reason-list li {
  margin: .333em 0;
  display: inline-block;
  background-color: var(--color-jungle-4);
  color: var(--bg-base);
  border-radius: 1em;
  padding: .3em 1.25em .3em .7em;
  font-weight: 500;

}.reason-list ul {
  text-align: center;
}

.reason-list li:before {
  content: '\2192';
  padding-right: .5em;
  color: var(--color-jungle-3);
  font-weight: 400
}

.reason-list ol li:before {
  counter-increment: ol;
  color: var(--bg-base);
  font-weight: 800;
  font-size: 2em;
  width: 1.5em;
  text-align: center;
  padding-right: .2em;
  content: counter(ol);
  display: inline-block;
  vertical-align: middle;
}

.reason-list ol li {
  padding: .6em 1.25em .6em .7em;
  background-color: var(--color-jungle-4);
  color: var(--bg-grad-1);
  float: left;
  clear: left;
  border-radius: 2em;
  padding: 0em 1.25em 0 .7em;
  box-shadow: inset 0 .1rem #fff5, 0 .1em .2em var(--bg-grad-1);
  text-shadow: 0 .1rem .1rem var(--color-jungle-5)
}


.reason-list.hot li {
    background-color: var(--color-persimmon-7);
    color: var(--color-persimmon-1);
    box-shadow: inset 0 .1rem 1rem var(--color-persimmon-8), 0 .1em .5em var(--color-persimmon-1), inset 0 -.1rem var(--color-persimmon-8);
    text-shadow: 0 .1rem .05rem #fff5;
    padding: .5em 1.25em .5em .7em;
    font-weight: 500;
    border-radius: 2em;clear: left;
    }
.reason-list.hot li:before{color:var(--color-persimmon-3)}

.reason-list.compact ol li {}

.role-count p {
  line-height: 1em;
}

.role-count b {
  display: block;
  margin-bottom: .5rem;
  font-size: 3rem;
}

.role-count {
  font-size: 1.5rem;
  text-align: left;
  padding-left: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top:1rem;
}

.role-count small {
  display: block;
}

.role-count small span {
  font-weight: 500;
  font-size: 1rem;
  background-color: var(--chart-color-3);
  color: black;
  display: inline-block;
  border-radius: 1em;
  padding: 0 .75em;
  line-height: 1.75em;
  margin-top: .5rem;
}

.role-count p:nth-child(1) small span {
  background-color: var(--primary-color)
}

.role-count p:nth-child(1) b {
  color: var(--primary-color)
}


.role-count p:nth-child(2) small span {
  background-color: #a1ef8b;
}

.role-count p:nth-child(2) b {
  color: #a1ef8b
}


.role-count p:nth-child(3) small span {
  background-color: #279963;
}

.role-count p:nth-child(3) b {
  color: #279963;
}

#cybersecurity h3,
#audience h3 {
  font-family: "SUSE Mono";
  font-weight: 400;
  background-color: var(--bg-base);
  margin: 2em;
  padding: .2em 1em;
  border-radius: 2em;
  font-size: 1.3rem;
  display: inline-block;
  margin-bottom: 1em;
}

#cybersecurity h3 {}

#audience {
  user-select: none;
}


#audience details summary:after {
  content: "? ";
  color: var(--bg-grad-1);
  font-weight: 500;
  text-shadow: 0 .1rem #fff2;
  background-color: var(--color-pine-2);
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border-radius: 50%;

}

#audience details[open] summary:after {
  content: "\2191";
  color: var(--color-pine-3);
  background-color: var(--color-pine-1)
}

#audience details {
  padding: 1em 0
}


#audience details:not([open]) summary:hover:after {
  background-color: var(--color-persimmon)
}



#key-findings .grid-4-layout b {
  color: white;
}



#key-findings a {
  color: var(--text-muted);
  font-weight: 400;
  background-color: var(--color-pine-1);
  font-size: .8em;
  
  padding: .2em 1em;
  border-radius: 1em;

}
#key-findings a ,
.classification span{    box-shadow: inset 0 .1rem var(--color-jungle-2), 0 .1rem 1rem var(--bg-grad-2);



}

#key-findings a:before{content:"\2193"; color: var(--color-persimmon-5); margin-right:.5em;}



#key-findings .text-content {
  position: relative;
}


#key-findings .text-content {
  min-height: 15em;
  color: var(--color-jungle-7);
}

#key-findings a {
  position: absolute;
  bottom: -1em;
}




#cybersecurityChart {
  height: 20em
}

#cybersecurity .grid-3-layout {
  text-align: center;
}

.five-up {
  gap: 3em;
  color: var(--text-muted);
}

article h2 {
  padding-bottom: 4rem;
}



#countries ul {
  font-size: 1rem;
  list-style: none;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding:0;

}

.country-panel > p, #countries ul{margin:2em 0}
.country-panel > p.classification{margin: .5em;}
#countries li {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  font-size: 1.25rem !important;
  line-height: 1.3em;
  position:relative;
  padding-left:2em;
}



#countries li .count-up {
  color: white;
  font-size:4em;
  display:block;
  text-align:left;
}

figure {
  margin-bottom: 2em;
}

figcaption {
  position: absolute;
  bottom: -4rem;
  width: 100%;
  text-align: center;
  font-size: .8rem;
  color: var(--text-muted);
  opacity:0;
}

.show-cap{bottom:-6rem;
opacity:1; font-size: 1.3rem;

}


#audience h2 {
  margin: 0;
  padding: 0;
  background-image: none;
  margin-top: 1em !important;

  font-size: 2rem;
  color: var(--color-jungle-3);
  font-weight: 400;


  line-height: 1em;

  margin-bottom: 1em;
  font-family: 'SUSE Mono';
  border-radius: 2em;
  text-shadow: none;
  display: inline-block;
  padding: .5em 1em;

  width: auto;
  margin: 1em auto;
}

#audience h2:before,
#audience h2:after {
  display: none
}


#key-findings h3 .count-up.percent:after,
#key-findings h3 .count-up.percent {
  color: white;
  -webkit-text-fill-color: #a1ef8bcc;
      -webkit-text-stroke: .1rem #a1ef8b;
}



@media (max-width:500px){
  .demographics details[open] {
    max-height:none !important
  }
  .role-count{grid-template-columns:1fr !important; text-align:center;}
}




.inside-open{width:100%; position: absolute; top:11em; text-align:right;}

.inside-open .count-up{line-height:.5em; !important}
@media (max-width: 900px){.inside-open{    position: relative;
    top: 0;
    text-align: center;}}


.combined-stat{background-color: var(--color-jungle-4); margin-top:0em;
              font-size: .9em;
              display:inline-block; padding: .2em 1em; border-radius:1em; color:var(--bg-base)
              }

.combined-stat b{color:var(--bg-base); text-shadow:none}
#summary .spot-icon{height:5em; margin-bottom:1em; 


}

#summary h4{}


#summary .quote-layout,
#summary .five-up{margin:3em 0;}





#countries .classification i,
#countries ul{ }


.show-cap.warn{
      background-color: var(--color-persimmon-2);
    border-radius: .3em .3em 1em 1em;
    color: white;
    padding: .5em 1em;
    position:relative;
    box-shadow: inset 0 .1rem 0  #fff3, 0 .2rem .3rem var(--bg-grad-3);
     color:var(--color-persimmon-8);
    margin-top: -4em;
    margin-bottom: 4em;
}
.show-cap.warn b{color:white}


.show-cap.warn:before{ display:block; content:"\2191"; position:absolute; left:1em; color:var(--color-persimmon-6); font-size: 2em;
}


 


footer a{font-weight:400; color:var(--color-jungle-5)}
@media (max-width: 900px) {
  footer p{text-align:left}

.country-name{height:1.5em;}
#countries .flag{width: calc(1.4rem * 4) ;
    height: calc(1.4rem * 3);}
button{outline:none;}

.country-name,
    
   #countries .country-card-list{grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important; gap:0}
}

@media (max-width: 500px) {  .country-card-list{grid-template-columns:none !important;}

#countries ul {grid-template-columns: 1fr;}
 .country-card-list li{display:inline-block;}
}
@media (max-width: 900px) {
#countries ul {grid-template-columns: 1fr; padding-right:0;}
#countries li{display:grid; grid-template-columns: 8em 1fr; padding-right:0;        padding: 2em 1em 0 2em;}
}

.country-card-list button{position:relative; line-height:1.2em}

#countries .countries-tabs-layout.expanded .active .country-name + span, 
#countries button span:last-child {
  
    margin: 0 auto;
  margin-bottom:1em;
    height: 3em;
    width: 3em;
    font-weight: 600;
    line-height: 3em;
    color: var(--color-persimmon-1);
    border-radius: 50%;
    text-align: center;
    background-color: var(--color-persimmon-5);
    box-shadow: 0 .1rem .5rem rgba(0, 0, 0, 0.5);
}



.countries-tabs-layout.expanded .country-name{color: var(--text-muted)}

.countries-tabs-layout.expanded .flag{transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.775); opacity:.5; filter: grayscale(1); transform:scale(.9)}

.countries-tabs-layout.expanded .active .flag{opacity:1; filter: none; transform:scale(1.15)}

.countries-tabs-layout.expanded .active .country-name{color: var(--text-main)}

#countries .countries-tabs-layout.expanded  .country-name + span{color:var(--text-muted); background-color:rgba(0, 0, 0, 0.15); box-shadow:none}

.country-panel{border-radius: 1em; margin-top:-.6em}
#country-panel-fr{border-radius: 1em 0 1em 1em}

#country-panel-de{border-radius: 0 1em 1em 1em}

.country-panel.active h3 + i,
.country-panel.active h3{animation: slide-in .5s ease forwards; }

@keyframes slide-in{
  0%{transform:translatey(-2rem); opacity:0;}

} 

@keyframes slide-in-2{
  0%,50%{transform:translatey(-2rem); opacity:0;}

} 
.country-panel.active li{animation: slide-in-2 1s ease forwards; }
 
.country-panel.active li:nth-child(1n){animation-delay: -.6s}
.country-panel.active li:nth-child(2n){animation-delay: -.4s;}
.country-panel.active li:nth-child(3n){animation-delay: -.2s;}
.country-panel.active li:nth-child(4n){animation-delay: -0s;}


.country-panel.active  .classification span{animation: slide-in 1s ease forwards;}

    #countries .classification i{display:block;}


    .classification span{box-shadow: inset 0 .1rem var(--color-jungle-5), 0 .1rem 1rem var(--bg-grad-2);
    background-color: var(--color-jungle-3);
    color: var(--color-jungle-7);
    text-shadow: 0 .1rem .1rem var(--color-jungle-2);
  
  position: absolute;
    top: 3rem;
    right: 1rem;
  
  }

      .classification strong{color:white; font-weight:800;}

.country-panel h3 + i {
    color: var(--text-muted);
    background-color: var(--bg-grad-2);
    padding: 1em 2em;
    border-radius: 2em;
    margin-top: 1rem;
    font-size: 1.3rem;
    display: inline-block;
    font-style: normal;
    font-family: SUSE Mono, suse;
}
       .country-panel h3{display:none;} 


       .country-card:hover .flag,
.country-card:focus-visible .flag{filter:none; opacity:1;}

.country-card:focus-visible,
.country-card:hover .country-name{ color:white

  
}
.country-panel > p{text-align:center;margin: 4em 0}
 

.country-card.active span:last-child{
  box-shadow: inset 0 .1rem var(--color-jungle-5), 0 .1rem 1rem var(--bg-grad-2) !important;
    background-color: var(--color-jungle-3) !important;
    color: var(--color-jungle-7) !important;
    text-shadow: 0 .1rem .1rem var(--color-jungle-2);
}