*{padding; 0; margin: 0; box-sizing: border-box;}
:root {
    --primary: oklch(0.1433 0.0993 264.05);
    --light: oklch(0.1833 0.0993 264.05);
    --xlight: oklch(0.333 0.0933 264.05);
    --oaccent: oklch(0.5912 0.2069 35.09);
    --yaccent: oklch(0.9501 0.2053 110.04);
}
body{
    background-color: var(--primary);
    font-family: 'Saira', Tahoma, sans-serif;
    color: white;
}
.wrapper{
    width: 100vw;
    height: 100vh;

    overflow: clip;
    display: grid;
    grid-template-columns: 330px auto;
    grid-template-rows: auto 50px;
}
header{
    /* border: 1px solid var(--accent); */
    grid-area: 1 / 1 / 3 / 2;
    height: 100%;
    
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100px 50px 25vh auto 25vh;

    padding: 1rem;

}
a{
    color: white;
}
a:hover {
    color: var(--yaccent);
}
/* button {
    background-color: transparent;
    border: 0;
    padding: 0;
} */

.copy-btn {
    background-color: transparent;
    padding: 0;
    border-radius: 0; 
    border: 0;
}

button:hover {
    background-color: var(--yaccent);
}
.logo{
    display: flex;
    justify-content: center;
}
.logo img{
    width: 90%;
    max-width: 250px;
    height: auto;
    filter: grayscale(100%) brightness(100%) invert(100%);
}
.logo img.full {
    display: block;
}
.logo img.icon {
    display: none;
}
.details {
    justify-self: center;
    align-self: start;
}
.detail-block{
    display: flex;
    margin: 1.5rem 0;
}
.detail-icon{
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
}
.details-btn{
        display: none;
    }
nav{
    justify-self: center;
    grid-area: 5 / 1 / 6 / 2;
}
.nav-btn{
        display: none;
    }
.menu-block{
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.overlay{
    display: none;
}

section{
    /* border: 1px solid var(--accent); */
    padding: 1rem;
    grid-area: 1 / 2 / 2 / 3;
    overflow-y: auto;
    scrollbar-color: var(--xlight) var(--primary);
    scrollbar-gutter: stable both-sides;
}
section p{ padding: 1rem 0;}

footer{
    /* border: 1px solid var(--accent); */
    padding: 0 2rem;
    grid-area: 2 / 2 / 3 / 3;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
}
/*  */
.flx-ctr {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 1100px){
    .wrapper{
        grid-template-columns: 100vw;
        grid-template-rows: 100px auto 50px;
   }
    header {
        display: grid;
        grid-template-columns: 100px auto 25% 25%;
        grid-template-rows: 2rem auto;

        grid-area: 1 / 1 / 2 / 2;

        padding: 5px;
        z-index: 99;

    }
    .logo {
        grid-area: 1 / 1 / 3 / 2;
        justify-content: start;
    }
    .logo img {
        max-height: 80px;
    }
    .logo img.full {
       display: none!important;
    }
    .logo img.icon{
        display: block;
    }
    .name {
        justify-self: center;
        grid-area: 1 / 3 / 2 / 5;
    }

    button {
        border: 0;
        border-radius: 10px 0 10px 0;
        padding: 5px 10px;
        color: var(--primary);
        background-color: white;
    }

    .detail-block {
        display: none;
    }
    .menu-block {
        display: none;
    }
    .details-btn {
        display: block;
        justify-self: center;
        grid-area: 2 / 3 / 3 / 4;
    }
    .nav-btn {
        display: block;
        justify-self: center;
        grid-area: 2 / 4 / 3 / 5;
    }

[popover] {
  transition: opacity 0.5s, transform 0.5s, display 0.5s allow-discrete;

  /* opacity: 0;
  transform: translateY(3rem); */

  &:popover-open {
    /* opacity: 1; */
      background-color: var(--xlight);
      color: white;
      border: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100vh - 150px);
      width: 100%;
      top: 100px;
    transform: none;

    @starting-style {
      & {
        /* opacity: 0; */
        transform: translateX(100%);
      }
    }
  }
}

    .close{
        position: absolute;
        top: 10px;
        right: 10px;
        border: 1px solid var(--xlight);
    }

    .overlay{
        pointer-events: all;
    }
    .overlay:target{
        pointer-events: none;
    }

    .slide-in{
        right: 0%;
        transition: right 0.3s ease-in;
    }
    .slide-out{
        right: -100%;
        transition: right 0.3s ease-in;
    }
    
    section {
        grid-area: 2 / 1 / 3 / 2;
    }

    
    footer {
        grid-area: 3 / 1 / 4 / 2;
    }
}