:root{
    --size: calc(var(--full-width) - var(--double-gap));
    --img-size: calc(var(--size) / 8);
    --shadow-color: 220deg 36% 48%;
}

body{
    text-align: center;
    background-color: var(--blue-bg);
    background-image: url("./gg.png"), url("./bg.png");
       background-size: 6vmax, auto;
       background-repeat: repeat;
}

header{
    margin: var(--gap) auto var(--half-gap) auto;
    width: 66ch;
    box-sizing: border-box;
    filter: var(--drop-shadow-low);

    img{
        width: 100%;
    }
}

main{
    width: var(--size);
    margin: auto;
}

.nobutton:is(:hover, :focus){
    transform: scale(1.11);
}

.nobutton, .nobutton:is(:hover, :focus){
    transition: transform 0.3s ease-in-out;
}

[popover]{
    height: fit-content;

    button{
        margin: 1em auto;
        display: block;
        font-family: var(--body-font);
        font-size: 0.8em;
        font-weight: bold;
        line-height: 2;
        text-shadow: var(--text-shadow-white);
        padding: 0 2em 0.5ch 2em;
        background: var(--blue-texture);
        border: var(--border-level-2);
            border-radius: var(--border-radius-level-2);
            border-style: outset;
            border-color: var(--blue);
    }

    button > *{
        filter: var(--drop-text-shadow);
    }

    button:is(:hover, :focus){
        background: var(--green-texture);
        border-color: var(--green);
    }
        
    button, button:is(:hover, :focus){
        transition: background .1s ease-in, border-color .1s ease-in;
    }

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

    a.yellow{
        color: var(--yellow-bg);
    }

    a.green{
        color: var(--green-bg);
    }

    a.red{
        color: var(--red-bg);
    }

    a:is(:hover, :focus){
        color: var(--blue)!important;
    }
}

footer{
    width: fit-content;
    margin: var(--gap) auto;
    backdrop-filter: blur(0.1rem);
    padding: 1ch;

    a{
        font-weight: bold;
        --hover-color: var(--white);
    }

    > *{
        filter: var(--drop-shadow-low);
    }
}

/*/*...........................................................

	fun boxes!!!!!!!! masonry! yayy!!!

..........................*/

a[data-fancybox] img, .fancybox a img{
    box-shadow: var(--box-shadow-low);
}

:is(a[data-fancybox] img, .fancybox a img):is(:hover, :focus){
    box-shadow: var(--box-shadow-medium);
}

/* ---- grid ---- */

.grid {
    text-align: center;
    margin: auto;
    * {box-sizing: border-box;}
  }
  
  /* clearfix */
  .grid:after {
    content: '';
    display: block;
    clear: both;
  }
  
  /* ---- grid-item ---- */
  
  .grid-sizer,
  .grid-item,
  .grid-item img{
    width: calc(var(--img-size) * 1.5);
    margin: var(--mini-gap);
    margin-bottom: calc(var(--mini-gap) * 4);
  }
  
  .grid-item {
    height: var(--img-size);
    float: left;
  }
  
  .grid-item img{
      border-radius: var(--border-radius-level-3);
      object-fit: cover;
  }

/*  widths  */

.grid-item--width2, .grid-item--width2 img {
    width: calc(var(--img-size) * 3 + var(--mini-gap) * 2);
    height: calc(var(--img-size) * 2);
    margin-bottom: calc(var(--mini-gap) * 1);
}
  
.grid-item--width3, .grid-item--width3 img {
    width: calc(var(--img-size) * 2.25);
    height: calc(var(--img-size) * 1.75);
}

/*  heights */
  
.grid-item--height2, .grid-item--height2 img {
    height: calc(var(--img-size) * 1.33);
    /* width: calc(var(--img-size) * 1.75); */
}

.grid-item--height3, .grid-item--height3 img {
    height: calc(var(--img-size) * 2);
    /* width: calc(var(--img-size) * 1.5); */
    margin-bottom: calc(var(--mini-gap) * 1);
}

.grid-item--height4, .grid-item--height4 img {
    height: calc(var(--img-size) * 2);
    /* width: calc(var(--img-size) * 1.66); */
    margin-bottom: calc(var(--mini-gap) * 1.5);
}