/* Title */

@font-face {
  font-family: myfont;
  src:url(https://file.garden/ZzAFOQ4MgBkQ6IrR/fonts/Montserrat-VariableFont_wght.ttf);
}
@font-face { font-family: p ;
  src: url('https://file.garden/ZzAFOQ4MgBkQ6IrR/fonts/FragmentMono-Regular.ttf'); }

h1 {font-size:50px;
font-family: "myfont";
   font-weight: 500;
  font-style: ;
  line-height:40px;
  font-stretch:ultra-expanded;
}
  
#banner {
padding:10px;
text-align:center;
border:1px green;
width:100%;
margin:auto;
background-color:rgba(255, 255, 255, 0.8);}

/* Art containers */

:root {
  --z:12;
  --a:calc(85vw / 240px);
  --y:calc(var(--z) * var(--b));
  --b:calc(240px * var(--n));
  --n:calc(0.5 * var(--a));
  --p:calc(z * (240px * (0.5 * (85vw / 240px))));
}

.rows {
  align-items:flex-start;
    align-content:center;
  max-width:85%;
  height:1200px;
  display: flex;
 /* height: calc(var(--z) * (240px * (var(--z) / (85vw/240px)))); */
  flex-direction:column;
  flex-wrap:wrap;
  column-gap:10px;
  row-gap:10px;
}

/* separate by tags: clothes, furniture...*/

.picframe_l {
padding:0px;
text-align:center;
height:fit-content;
width:240px;
border:green 1px solid;
}

.picframe_l:hover {
  border: 2px dotted teal;
}
.pic_l {
  height:fit-content;
  width:240px;
background-color:white;
 overflow:hidden;
}

img {
  max-width:240px;
  max-height:800px;
  margin-bottom:-6px;
}

/*linear-gradient( to bottom, rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.4))*/

.caption {
  z-index:2;
 background-color:rgba(98, 98, 98, 0.52);
  height:40px;
}

/* General settings */

::selection {
  color: black;
  background: #ffff99;
}

body {
  z-index:-3;
  background-size:250px;
  background-repeat:repeat;
  background-image:url("https://file.garden/ZzAFOQ4MgBkQ6IrR/backgrounds/pattern%20243.gif");
  border:0px;
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
  font-family: "p", serif;
  font-weight: 400;
  font-style: normal;;
  font-size:13px;
  line-height: 18px;
}

p {
  text-align:center;
}


@media (max-width: calc(1200px + 15vw)) {
  
  .rows {
    height:calc(400px * (var(--z) / 4));
  }
}

@media (max-width: calc(960px + 15vw)) {
  
  .rows {
    height:calc(400px * (var(--z) / 3));
  }
}

@media (max-width: calc(720px + 15vw)) {

  .rows {
    height:calc(400px * (var(--z) / 2));
  }
}

@media (max-width: calc(480px + 15vw)) {
  
  .rows {
    height:calc(400px * var(--z));
  }
}