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

.flag {
  display: block;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 0 0 50pt 0; /* Top-left corner rounded */
    height: 95%;
    width: 95%;
    object-fit: cover;
    border-right: 5px solid #000000;
    border-bottom: 5px solid #000000;
  }

  .coat {
    display: block;
    position: relative;
    margin: auto auto;
    overflow: hidden;
    height: auto;
    height: 100%;
    width: auto;
    object-fit: cover;
  }

  .map {
    width: 33.3%;
    height: auto;
    object-fit: cover;
    filter: brightness(0);
    margin-left: 33.3%;
    margin-right: 33.3%;
  }
  
  .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 */
      --img-shadow: drop-shadow(5px 5px 2px rgba(0 0 0 / 0.5));
      --name-txt-clr: #9c6868;
      --bg-blur: 0;         /* background image default blur */
      --bg-blur-hover: 5px; /* background image blur on hover */
      font-family: 'Ubuntu', sans-serif;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25%;
      margin: auto auto;
      width: auto;
    }
    @media (min-width: 500px){
      .profiles{
        --grid-cols: 3 ;
        margin: 23px 20%;
      }
    }

    .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: .9rem;
      color: var(--name-txt-clr);
      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 {
      display: grid;
      grid-template-areas: 
        "flag name coat"
        "middle middle right"
        "heads heads heads"
    ;
      grid-template-rows: 22% 1fr 50px;
      grid-template-columns: 15% 1fr 18%;
      grid-gap: 0px;
      height: 100vh;
      margin: 0px;  
    }
    
    right {
      background-color:#000000;
      margin: auto auto;
    }

    flag {
      grid-area: flag;
    }

    name {
      grid-area: name;
      text-align: center;
      font-family: Futura;
      margin-top: auto;
      margin-bottom: auto;
      font-size: 4vw;
    }

    coat {
      grid-area: coat;
      margin: 2.5%;
    }

    header {
      background: #707070;
      grid-area: header;
    }
    
    nav {
      background: #C9BFBF;
      grid-area: nav; 
    }
    
    middle {
      background: #ABABAB;
      grid-area: middle;    
    }
    
    aside {
      background: #C9C9C9;
      grid-area: aside; 
    }
    
    heads {
      grid-area: heads;
    }
    
    header, nav, section, aside, footer {
      padding: 5px;
    }