@font-face {
  font-family: "Futura";
  src: url("../../FuturaLT-Heavy.ttf") format("truetype");
}

@media (prefers-color-scheme: light) {
 .info-text {
  color: #060606;
 }
 
 .table-data {
  color: #060606;
}

 th {
  border-bottom: 1px solid #ffa7c7;
 }

 .name-and-coat {
  -webkit-text-stroke: 1px #ffa7c7;
 }

 body {
  background-color: #fff3f9;
 }

 .table-description {
  color: #ffa7c7;
 }

 .profiles{
  --img-shadow: drop-shadow(5px 5px 2px rgba(6 6 6 / 0.5));
 }
}


@media (prefers-color-scheme: dark) {
  .info-text {
    color: #00d791;
   }
   
 .table-data {
  color: #00d791;
}

   th {
    border-bottom: 1px solid #55052c;
   }

   .name-and-coat {
    -webkit-text-stroke: 1px #55052c;
   }

   body {
    background-color: #060606;
   }

   .table-description {
    color: #55052c;
   }

   .profiles{
    --img-shadow: drop-shadow(5px 5px 2px rgba(255 243 249 / 0.25));
   }
}

.flag {
  display: block;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 95%;
    width: 95%;
    object-fit: cover;
  }

  .name-and-coat {
    position: relative;
    text-align: center;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/da/Coat_of_arms_of_Germany.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    min-height: 66%;
  }


  .map {
    width: 25vw;
    height: auto;
    object-fit: contain;
    filter: brightness(0);
  }
  
  .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 2 / 1 / 3 / 2; }

    .profiles{
      --size: 200px;
      --img-clip: "M 0 -50 L 200 -50 L 200 150 C 100 150 0 250 0 150 Z"; /* unfortunatly it isn't possible (as far as I know) to use custom properties in clip paths */
      --bg-blur: 0;         /* background image default blur */
      --bg-blur-hover: 5px; /* background image blur on hover */
      font-family: 'Futura', sans-serif;
      display: flex;
      gap: 10vw;
      margin: 2vw auto;
      margin-bottom: 5vw;
      width: auto;
      align-content: center;
      justify-content: center;
    }
    @media (max-width: 1100px) { 
      .profiles {
          flex-direction: column; 
          align-items: center;
          margin-bottom: 20vw;
          gap: 20vw;
      }
  }
  
    .avatar{
      position: relative;
      width: var(--size);
      height: var(--size); /* for older browsers */
      aspect-ratio: 1;
    }
    .avatar-img {
      clip-path: path(var(--img-clip));
    }
    
    .avatar-img::before{
      content: '';
      position: absolute;
      display: blocl;
      inset: 50% 0 0 0;
      z-index: -1;
      border-radius: 20px;
      background-color: var(--bg-clr); /* fallback if image not defined as custom property */
      background-image: var(--bg-img);
      background-size: cover;
      background-position: center;
      filter: blur(var(--bg-blur));
      transition: filter 300ms ease-in-out;
    }
    .avatar-img > img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: scale 300ms, filter 300ms;
      transform-origin: bottom;
      scale: var(--img-scale, .9);
      filter: var(--img-shadow);  
    }
    
    .avatar > p{
      text-align: right;
      font-size: 1rem;
      color: #060606;
      bottom: .5rem;
      right: 0;
      translate: 0 var(--name-y,-50px);
      opacity: var(--name-opacity,0);
      z-index: -1;
      transition-name: translate, opacity;
      transition-delay: 150ms;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.47, 1.64, 0.41, 0.8), ease-in-out;
    }
    
    /* all hover effects as custom properties */
    .avatar:hover{
      --img-scale: 1.2;
      --img-shadow: drop-shadow(10px 15px 4px rgba(0 0 0 / 0.5));
      --name-y: 0;
      --name-opacity: 1;
      --bg-blur: var(--bg-blur-hover);
    }
    
    body {
      font-family: Futura;
      display: grid;
      grid-template-areas: 
        "name name name"
        "middle middle info"
        "heads heads info"
        "parliament parliament info"
    ;
      grid-template-rows: 22% 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 0px;
      height: 100vh;
      margin: 0px; 
      max-width: 100%; 
    }

    coat {
      grid-area: coat;
    }

    .name {
      width: 100%;
      position: relative;
      text-align: center;
      font-family: Futura;
      text-transform: uppercase;
      margin-top: auto;
      margin-bottom: auto;
      font-size: calc(2vw + 20px);
      background: url(https://upload.wikimedia.org/wikipedia/en/b/ba/Flag_of_Germany.svg);
      background-size: auto 100%;
      background-repeat: repeat;
      box-decoration-break: clone;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      min-height: 66%;
    }

    name {
      grid-area: name;
    }


    info {
      grid-area: info;
      align-items: center;
      margin: auto auto;
      margin-top: 1vw;
    }

    header {
      background: #707070;
      grid-area: header;
    }
    
    nav {
      background: #C9BFBF;
      grid-area: nav; 
    }
    
    middle {
      grid-area: middle;    
    }
    
    aside {
      background: #C9C9C9;
      grid-area: aside; 
    }
    
    heads {
      grid-area: heads;
    }
    
    parliament {
      grid-area: parliament;
    }

    header, nav, section, aside, footer {
      padding: 5px;
    }
    
footer {
  font-size: medium;
  font-weight: bold;
}


.table-data {
  font-size: 25px;
  font-family: Futura;
  text-decoration: none;
  width: auto;
}

.table-description {
  background-color: transparent;
  text-decoration: none;
  font-size: 15px;
  width: auto;
}

audio {
  width: 25vw;
}

.info-text {
  font-family: Futura;
  text-align: center;
  padding-left: 5%;
  padding-right: 5%;
  font-size: 20px;
}

parliament {
  align-items: center;
  justify-content: center;
  margin: auto;
  flex-wrap: wrap;
  text-align: center;
}

.parliament-seats {
  width: 50vw;
  height: 25vw;
  position: relative;
  color: #00d791;
  font-size: 4vw;
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.parliament-seats:before {
  content: '';
  width: 50vw;
  height: 25vw;
  border: 25vw solid rgba(0, 0, 0, 0);
  border-bottom: none;
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 0%;
  border-radius: 100vw 100vw 0 0;
  left: 0;
  top: 0;
}
.parliament-seats .graph {
  width: 50vw;
  height: 25vw;
  border: 12vw solid var(--fill);
  border-top: none;
  position: absolute;
  transform-origin: 50% 0% 0;
  border-radius: 0 0 100vw 100vw;
  left: 0;
  top: 100%;
  z-index: 5;
  animation: 1s fillGraphAnimation ease-in;
  transform: rotate(calc(1deg * ( var(--percentage) * 1.8 )));
  box-sizing: border-box;
  cursor: pointer;
}
.parliament-seats .graph:after {
  content: attr(data-name) ' ' counter(varible) '%';
  counter-reset: varible var(--percentage);
  background: var(--fill);
  box-sizing: border-box;
  border-radius: 2vw;
  color: #fff;
  font-weight: 200;
  font-size: 25vw;
  height: 20vw;
  padding: 3vw 5vw;
  top: 0vw;
  position: absolute;
  left: 0;
  transform: rotate(calc(-1deg * var(--percentage) * 1.8)) translate(-30vw 0vw);
  transition: 0.2s ease-in;
  transform-origin: 0 50% 0;
  opacity: 0;
}