/****  COMMON CSS SETTINGS FOR ALL DEVICES ***/
*, *::before, *::after { box-sizing: border-box;}
/* * { outline: 0.1dvw solid red; } */
/* GLOBAL PAGE SETTINGS */
* {margin: 0; padding: 0; box-sizing: border-box;}
:root {
    --button-1: 10em; --button-2: 15em;--button-3: 20em;--button-4: 25em;
    --fs-1: 1rem; --fs-2: 2rem; --fs-3: 3rem; --fs-4: 4rem;
    --height-1: 2dvh; --height-2: 4dvh; -height-3: 6dvh; --height-4: 8dvh;
    --margin-1: 2dvw; --margin-2: 4dvw; --margin-3: 6dvw; --margin-4: 8dvw;
    --padding-1: 2dvw; --padding-2: 4dvw; --padding-3: 6dvw; --padding-4: 8dvw;
    --width-1: 2dvw; --width-2: 4dvw; --width-3: 6dvw; --width-4: 8dvw;--width-5: 10dvw;--width-6: 12dvw;
    --s: .5dvw; --c:darkgrey 70% 35%; --d: blue;
    --main-color: red; --secondary-color: lightgreen;  --txt-color: aliceblue;
    --img-bg-color: rgba(240, 240, 240, 0.9);
}
body {font-family: system-ui, -apple-system, sans-serif; color:#333 ;font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem);  border:0.2dvw solid #000; height: auto; width: 100%}

/*** GRID SETTINGS ***/
.container{display: grid; grid-template-columns: repeat(auto-fit, minmax(auto-fill,1fr)); grid-auto-flow: column; grid-auto-rows: minmax(1dvh, auto); gap: 1rem; width: 100%; height: auto; container-type: inline-size;}
.heading{grid-column:1/5; grid-row:1/2; }
main{grid-column: 1/5; grid-row: 2/3}

/* HEADING FORMATTING */
.heading{ max-width: 100%; width: 100%; display: grid; grid-row: 1 / 2; grid-template-rows: subgrid;  grid-column: 1 / 5; grid-template-columns: subgrid; margin-inline: auto;}
.heading{display: grid; grid-template-columns: 15% 80%; height: 15dvh; background-color: green;}
.heading{background-image:
    repeating-linear-gradient(25deg, transparent 1cqw 1.2cqw, red 1.2cqw 1.3cqw, transparent 1.3cqw 1.4cqw, aqua 1.4cqw 1.5cqw, transparent 1.5cqw 1.6cqw,  yellow 1.6cqw 1.7cqw),
    repeating-linear-gradient(-25deg, transparent 1cqw 1.2cqw, blue 1.2cqw 1.4cqw, transparent 1.4cqw 1.5cqw, skyblue 1.4cqw 1.5cqw, transparent 1.2cqw 1.4cqw, aliceblue 1.6cqw 1.7cqw),
    repeating-linear-gradient(65deg, transparent 1.1cqw 1.2cqw, green 1.3cqw 1.6cqw, transparent 1.3cqw 1.5cqw, lightgreen 1.6cqw 1.7cqw, transparent 1.2cqw 1.4cqw, seagreen 1.9cqw 1.11cqw),
     repeating-linear-gradient(-65deg, transparent 1cqw 1.2cqw, blue 1.2cqw 1.4cqw, transparent 1.4cqw 1.5cqw, skyblue 1.4cqw 1.5cqw, transparent 1.2cqw 1.4cqw, aliceblue 1.6cqw 1.7cqw)
    ;}

    /* navigation settings */
#menu button{position: fixed; max-width: 7%; width: 100%; height: 5%; margin-block: 5dvh; background:skyblue; opacity:1; color:white; box-shadow:inset 0 0 0 1px black; border:0.2dvw solid white; display: flex; justify-content: center; align-items: center; border-radius: 1dvw; z-index: 10;}
#menu button a{font-size: clamp(1rem, calc(var(--fs-1)*2), 2.3rem);}
#menu button:hover{background:grey; color:aliceblue; box-shadow:inset 0 0 0 1px white; border:0.2dvw solid black; cursor: pointer;}

/* header settings */
header{width: 60dvw; height: 15dvh;}
header h1{position: relative; font-size: clamp(2rem, calc(var(--fs-3)*1.5), 8rem) ;margin-left: 10dvw;  animation: infinite linear 30s styling; z-index: 99}
@keyframes styling{
    0%{ translate: 0dvw 0dvw  1dvw; color: black; }
    25%{ translate: 6dvw 3dvw 2dvw; color:blue; }
    50%{ translate: 0dvw 0dvw 3dvw; color: red;}
    75%{ translate: -6dvw 3dvw 2dvw; color: lightgreen; }
    100%{ translate: 0dvw 0dvw 1dvw; color: black;}
}
h1 span{font-size: var(--fs-2); margin-block: var(--height-1); margin-inline: var(--margin-1);}


/* MAIN SECTION settings */
.raster_AS {position: relative; display: grid; grid-template-columns: repeat( 5, 1fr);  overflow: hidden; font-family: sans-serif; width: 100%; height: auto; min-width: 0;}
.art_box_AS{display: flex; flex-flow: row wrap; position: relative; width: 12dvw; height: auto; transition: all 0.5s; min-width: 0;}
.art_box_AS img{box-shadow: 0.5dvw 0.5dvw burlywood; width: 17dvw; height: auto; aspect-ratio: 16/9; min-width: 0;}
.art_box_AS img::before, .img::after {position: absolute; content: ""; background: inherit;  height: 100%; width: 100%; border-radius: 0; transition: 0.5s; transform-origin: center; min-width: 0;}
.art_box_AS img:hover {border-radius: 15dvw; transition: 0.5s;}
.region_AS{position: relative; background: grey; color: skyblue; width: 100%; transition: .5s ease; opacity:1; color: white; font-size: clamp(1rem, calc(var(--fs-1)*1, 3rem));}
.entity_AS:hover{opacity: 1; color:red}

/** ANTWERP STREET ART ZONES ***/

/* formatting the lw-container main section */
.lw-container {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; height: auto; min-width: 0; margin-left: 1dvw;}
.zone{position: relative; display: flex; flex-flow: row wrap; width: 80%; height: auto; gap: 1dvw;}
.title{position: relative; color: navy; font-style: italic; font-size: clamp(1rem, calc(var(--fs-2)*1), 3rem); margin-top: 1dvw;}
.content{display:flex; flex-flow: column wrap;}
.item{font-size: clamp(1rem, calc(var(--fs-2)*0.7), 3rem);}
.click{position: relative; color: orangered; font-size: clamp(1rem, calc(var(--fs-2)*1), 3rem);}
img{position: relative; width: 100%; height: auto; }
.content{color: black;}

/***=== ADJUSTED CSS SETTINGS FOR DIFFERENT SIZES ===***/

/*max-width: 107rem = 1,712px */
@media only screen and (96rem <= width <= 107rem){
    .heading header{height: 13dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 4rem); margin-left: 30dvw;}
    #menu button{max-width: 12%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    .raster_AS{row-gap: 2dvh;}
    /* street art zones */
    .header{width: 80dvw; margin-left: 5dvw;}
    .header h1{ font-size: clamp(1rem, calc(var(--fs-1)*3), 3rem); margin-left: 20dvw;}
    .title{font-size: clamp(1rem, calc(var(--fs-2)*0.7), 3rem);}
    .item{font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem);}
    .click{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 3rem);}
}

/*max-width: 96rem = 1,528px */
@media only screen and (85rem <= width <= 96rem){
    .heading header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 4rem); margin-left: 20dvw;}
    #menu button{max-width: 12%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    .raster_AS{grid-template-columns: repeat(4, 1fr);row-gap: 2dvh;}
    .art-box_AS{width: 25dvw; height: auto;}
    .raster_AS img{width: 22dvw; height: auto; aspect-ratio: 4/3;}
    /* street art zones */
    .header{width: 80dvw; margin-left: 10dvw;}
    .header h1{ font-size: clamp(1rem, calc(var(--fs-1)*2.5), 3rem);}
    .title{font-size: clamp(1rem, calc(var(--fs-2)*0.7), 3rem);}
    .item{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 3rem);}
    .click{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 3rem);}
}

/* max-width: 85rem = 1,360px */
@media screen and (75rem <= width <= 85rem) {

}

/* max-width: 75rem = 1,200px */
@media screen and (65rem <= width <= 75rem) {
    .heading header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 4rem); margin-left: 30dvw;}
    #menu button{max-width: 17%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    .raster_AS{grid-template-columns: repeat(3, 1fr);row-gap: 2dvh;}
    .art-box_AS{width: 25dvw; height: auto;}
    .raster_AS img{width: 22dvw; height: auto; aspect-ratio: 4/3;}
    .region_AS{font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem);}
    /* street art zones */
    .header{width: 80dvw; margin-left: 10dvw;}
    .header h1{ font-size: clamp(1rem, calc(var(--fs-2)*1.3), 3rem); margin-left: 15dvw;}
    .title{font-size: clamp(1rem, calc(var(--fs-2)*0.7), 3rem);}
    .item{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 3rem);}
    .click{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 3rem);}
}

/* max-width : 65rem  = 1,040px */
 @media screen and (55rem <= width <= 65rem) {
    .heading header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1), 3rem); margin-left: 30dvw;}
    #menu button{max-width: 17%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    .raster_AS{grid-template-columns: repeat(3, 1fr);row-gap: 2dvh;}
    .art-box_AS{width: 25dvw; height: auto;}
    .raster_AS img{width: 22dvw; height: auto; aspect-ratio: 4/3;}
    .region_AS{font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem);}
    /* street art zones */
    .header{width: 80dvw; height: 15dvh; margin-left: -10dvw;}
    .header h1{ font-size: clamp(1rem, calc(var(--fs-2)*1.5), 5rem);}
    .title{font-size: clamp(1rem, calc(var(--fs-1)*0.7), 2rem);}
    .item{font-size: clamp(1rem, calc(var(--fs-1)*0.3), 2rem);}
    .click{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 2rem);}
}

/* max-width: 55rem =  880px */
 @media screen and (45rem <= width <= 55rem){
    .heading header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1), 3rem); margin-left: 30dvw;}
    #menu button{max-width: 20%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    .raster_AS{grid-template-columns: repeat(3, 1fr);row-gap: 2dvh;}
    .art-box_AS{width: 25dvw; height: auto;}
    .raster_AS img{width: 22dvw; height: auto; aspect-ratio: 4/3;}
    .region_AS{font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem);}
    /* street art zones */
    .lw-container{grid-template-columns: 1fr 1fr;}
    .header h1{ font-size: clamp(1rem, calc(var(--fs-1)*1.7), 2rem); margin-left: 10dvw;}
    .title{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    .item{font-size: clamp(1rem, calc(var(--fs-1)*0.7), 2rem);}
    .click{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
}

/* max-width: 45rem =  720px */
 @media screen and (35rem <= width <= 45rem){


}

/* max-width: 35rem =  560px */
 @media screen and (25rem <= width <= 35rem){
    .heading header{height: 10dvh;}
    header h1{font-size: clamp(0.5rem, calc(var(--fs-1)*1.5), 2rem); margin-left: 25dvw;}
    #menu button{max-width: 25%; width: 100%; height: 5%; font-size: clamp(0.5rem, calc(var(--fs-1)*1.2), 1.5rem); margin-top: 1dvh;}
    .raster_AS{grid-template-columns: repeat(2, 1fr);row-gap: 2dvh;}
    .art-box_AS{width: 50dvw; height: auto;}
    .raster_AS img{width: 45dvw; height: auto; aspect-ratio: 4/3;}
    .region_AS{font-size: clamp(1rem, calc(var(--fs-1)*0.9), 3rem);}
    /* street art zones */
    .lw-container{grid-template-columns: 1fr;}
    .header{width: 100dvw; margin-left: -5dvw; margin-top: 2dvh;}
    .header h1{ font-size: clamp(0.5rem, calc(var(--fs-1)*1.2), 2rem); animation: 0s;}
    .title{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    .item{font-size: clamp(1rem, calc(var(--fs-1)*0.7), 2rem);}
    .click{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 3rem);}
 }

/* max-width: 25rem =  400px */
 @media screen and (20rem <= width <= 25rem){
    .heading header{height: 10dvh;}
    header h1{font-size: clamp(0.5rem, calc(var(--fs-1)*1.5), 2rem); margin-left: 25dvw;}
    #menu button{max-width: 25%; width: 100%; height: 5%; font-size: clamp(0.5rem, calc(var(--fs-1)*1.2), 1.5rem); margin-top: 1dvh;}
    .raster_AS{grid-template-columns: repeat(2, 1fr);row-gap: 2dvh;}
    .art-box_AS{width: 50dvw; height: auto;}
    .raster_AS img{width: 45dvw; height: auto; aspect-ratio: 4/3;}
    .region_AS{font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem);}
    /* street art zones */
    .lw-container{grid-template-columns: 1fr;}
    .header{width: 100dvw; margin-left: -5dvw; margin-top: 2dvh;}
    .header h1{ font-size: clamp(0.5rem, calc(var(--fs-1)*1.2), 2rem); animation:  0s ;}
    .title{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    .item{font-size: clamp(1rem, calc(var(--fs-1)*0.7), 2rem);}
    .click{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
 }