/****  COMMON CSS SETTINGS FOR ALL DEVICES ***/
*, *::before, *::after { box-sizing: border-box;}
/* * { outline: 0.1dvw solid green; } */
/* 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: 2cqh; --height-2: 4cqh; -height-3: 6cqh; --height-4: 8cqh;
    --margin-1: 2cqw; --margin-2: 4cqw; --margin-3: 6cqw; --margin-4: 8cqw;
    --padding-1: 2cqw; --padding-2: 4cqw; --padding-3: 6cqw; --padding-4: 8cqw;
    --width-1: 2cqw; --width-2: 4cqw; --width-3: 6cqw; --width-4: 8cqw;--width-5: 10cqw;--width-6: 12cqw;
    --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);
}
html{scroll-behavior: smooth;}
body{margin: 0; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; line-height: 1.3; -webkit-font-smoothing: antialiased;}

/* container general settings */
#container{position: relative; display: grid; grid-template-columns: repeat(4, 1fr);grid-auto-rows: minmax(3dvw, auto); width: 100%; height: auto; overflow: auto; font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); margin-inline: auto}
#container{background-image: var(--bg-color); background-size: 4dvw 4dvw;}

/* grid layout*/
#heading{grid-column:1/5; grid-row:1/2;}
#statement{grid-column: 1/5; grid-row: 2/3}
#types{grid-column: 1/5; grid-row: 3/4;}
#cities{grid-column: 1/5; grid-row: 4/5;}
#countries{grid-column:1/5; grid-row: 5/6;}
footer{grid-column:1/5; grid-row:6/7;}

/* HEADING FORMATTING */
#heading{max-width: 100%; display: grid; grid-row: 1 / 2; grid-template-rows: subgrid;  grid-column: 1 / 5; grid-template-columns: subgrid;}
#heading{display: grid; grid-template-columns: 15% 80%; height: auto; 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;}
header h1{position: relative; font-size: clamp(1rem, calc(var(--fs-4)*4), 6rem) ;margin-left: clamp(4rem, calc(var(--margin-4)*20), 28rem); width: 80%; height: clamp(1rem, calc(var(--height-4)*2), 15dvh); animation: infinite linear 30s styling; z-index: 99}
@keyframes styling{
    0%{ translate: 0dvw 0dvw  1dvw; color: red; }
    25%{ translate: 6dvw 3dvw 2dvw; color:white; }
    50%{ translate: 0dvw 0dvw 3dvw; color: black;}
    75%{ translate: -6dvw 3dvw 2dvw; color: white; }
    100%{ translate: 0dvw 0dvw 1dvw; color: red;}
}
h1 span{font-size: var(--fs-4); margin-block: clamp(5dvh, calc(var(--height-1)*1), 10dvh); margin-inline: var(--margin-1);}

/* Statement, types and info settings*/
#statement h2, #types h2, #cities h2{display: inline-block; margin-inline: 1rem; margin-block: 1rem; font-size: clamp(2rem, calc(var(--fs-2)*1), 6rem); color: blue; }
.stat, .def{margin-inline: 2rem; font-size: clamp(1rem, calc(var(--fs-1)*1.8), 3rem); font-optical-sizing: auto; width: 50dvw; margin-left: 5%;}
.category{display: flex; flex-flow: column nowrap;padding-left:14rem; line-height: 3; font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem); font-optical-sizing: auto;}
.art{display: block; position: relative; margin-block: 0.2rem; font-optical-sizing: auto;}
.info{display: flex; flex-flow: column wrap; color: red; margin-inline: 2rem; font-size: clamp(1rem, calc(var(--fs-1)*1.2), 3rem); font-optical-sizing: auto;}

/*formatting COUNTRIES section */
#countries{display: grid; grid-template-columns: repeat(auto-fill,  minmax(15dvw, 1fr)); gap: 1rem; position: relative; align-content: start;}
.art_box{width: 20dvw; height: auto; margin-inline: 2rem;}
.country{position: relative; display: flex; justify-content: center; align-items: center; width: 15dvw; height: auto; color: darkrey; font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem); background-color: lightgrey; margin-inline: 1rem; margin-top: 8dvh; border-radius: 2rem;}
.kleur{position: relative; display: block; text-transform: uppercase; color: darkblue; margin-inline-start: 3rem; margin-block: 1dvh;font-weight: 600; font-size: 110%;}
a img{object-fit: cover; object-position: top; cursor: pointer; width: 14dvw; height: auto; aspect-ratio: 16/9; border-radius:1rem; }
a img:hover {opacity: 0.8; scale:1.1; transition: 3s ease;}
.country{width: 15dvw; height: 15dvh; margin-inline: 1rem; }

/*max-width: 107rem = 1,712px */
@media only screen and (96rem <= width <= 107rem){
    #heading header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 5rem)}
    #menu button{max-width: 12%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    #statement h2, #types h2, #cities h2{font-size: clamp(2rem, calc(var(--fs-1)*1), 2rem); }
    .stat, .def, .category{font-size: clamp(1rem, calc(var(--fs-1)*1.6), 3rem); width: 90%;}
    #countries{display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25dvw; max-width: 99%;}
    .country{width: 17dvw; height: 15dvh;}
    .country h2{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem);}
    .art_box{max-width: 15dvw; height: auto; margin-inline: 2rem;}
    a img{ width: 18dvw; height: auto; aspect-ratio: 16/9; }
    .kleur{ font-size: clamp(1rem, calc(var(--fs-1)*1.1), 3rem);}

}

/*max-width: 96rem = 1,528px */
@media only screen and (85rem <= width <= 96rem){
    #heading header{height: 18dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 4rem)}
    #menu button{max-width: 12%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    #statement h2, #types h2, #cities h2{font-size: clamp(2rem, calc(var(--fs-1)*0.8), 2rem); }
    .stat, .def, .category{font-size: clamp(1rem, calc(var(--fs-1)*1.3), 3rem); width: 90%;}
    .category{padding-left: 8rem; line-height: 2;}
    #countries{display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25dvw; max-width: 99%;}
    .country{width: 17dvw; height: 15dvh;}
    .country h2{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem);}
    .art_box{max-width: 15dvw; height: auto; margin-inline: 2rem;}
    a img{ width: 18dvw; height: auto; aspect-ratio: 16/9; }
    .kleur{ font-size: clamp(1rem, calc(var(--fs-1)*1.1), 3rem);}
}

/* max-width: 85rem = 1,360px */
@media screen and (75rem <= width <= 85rem) {
    #heading header{height: 12dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.6), 4rem); margin-left: 15dvw;}
    #menu button{max-width: 15%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);margin-block: 3dvh;}
    #statement h2, #types h2, #cities h2{font-size: clamp(2rem, calc(var(--fs-1)*0.8), 2rem); }
    .stat, .def, .category{font-size: clamp(1rem, calc(var(--fs-1)*1.3), 3rem); width: 90%;}
    .category{padding-left: 8rem; line-height: 2;}
    #countries{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25dvw; max-width: 99%;}
    .country{width: 17dvw; height: 15dvh; margin-block: 1dvh;}
    .country h2{font-size: clamp(0.5rem, calc(var(--fs-1)*1.4), 2rem); }
    .art_box{max-width: 15dvw; height: auto; margin-inline: 2rem;}
    a img{ width: 18dvw; height: auto; aspect-ratio: 16/9; }
    .kleur{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.9), 1rem);}
}

/* max-width: 75rem = 1,200px */
@media screen and (65rem <= width <= 75rem) {
   #heading header{height: 12dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.6), 4rem); margin-left: 15dvw;}
    #menu button{max-width: 15%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);margin-block: 3dvh;}
    #statement h2, #types h2, #cities h2{font-size: clamp(2rem, calc(var(--fs-1)*0.8), 2rem); }
    .stat, .def, .category{font-size: clamp(1rem, calc(var(--fs-1)*1.3), 3rem); width: 90%;}
    .category{padding-left: 8rem; line-height: 2;}
    #countries{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25dvw; max-width: 99%;}
    .country{width: 17dvw; height: 15dvh; margin-block: 1dvh;}
    .country h2{font-size: clamp(0.5rem, calc(var(--fs-1)*1.4), 2rem); }
    .art_box{max-width: 15dvw; height: auto; margin-inline: 2rem;}
    a img{ width: 18dvw; height: auto; aspect-ratio: 16/9; }
    .kleur{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.9), 1rem);}
}

/* max-width : 65rem  = 1,040px */
 @media screen and (55rem <= width <= 65rem) {
    #heading header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-1)*1.9), 3rem); margin-left: 15dvw;}
    #menu button{max-width: 15%; width: 100%; height: 8%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);margin-block: 2dvh;}
    #statement h2, #types h2, #cities h2{font-size: clamp(1rem, calc(var(--fs-1)*0.8), 2rem); }
    .stat, .def, .category, .info{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem); width: 90%;}
    .category{padding-left: 4rem;line-height: 2;}
    #countries{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25dvw; max-width: 99%;}
    .country{width: 17dvw; height: 15dvh; margin-block: 1dvh;}
    .country h2{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem); }
    .art_box{max-width: 15dvw; height: auto; margin-inline: 1rem;}
    a img{ width: 18dvw; height: auto; aspect-ratio: 16/9; }
    .kleur{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.7), 1rem);}
}

/* max-width: 55rem =  880px */
 @media screen and (45rem <= width <= 55rem){
   #heading header{height: 18dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.2), 2rem); margin-left: 15dvw;}
    #menu button{max-width: 20%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*1), 2rem);margin-block: 3dvh;}
    #statement h2, #types h2, #cities h2{font-size: clamp(1rem, calc(var(--fs-1)*0.8), 1.5rem); }
    .stat, .def, .category, .info{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem); width: 90%;}
     .category{padding-left: 8rem;line-height: 2;}
    #countries{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.2dvw; max-width: 99%;}
    .country{width: 17dvw; height: 15dvh; margin-block: 1dvh;}
    .country h2{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem); }
    .art_box{max-width: 15dvw; height: auto; margin-inline: 1rem;}
    a img{ width: 18dvw; height: auto; aspect-ratio: 16/9; }
    .kleur{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1.5rem);}
}

/* max-width: 45rem =  720px */
 @media screen and (35rem <= width <= 45rem){
   #heading header{height: 12dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.6), 4rem); margin-left: 15dvw;}
    #menu button{max-width: 15%; width: 100%; height: 5%; font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);margin-block: 3dvh;}
    #statement h2, #types h2, #cities h2{font-size: clamp(2rem, calc(var(--fs-1)*0.8), 2rem); }
    .stat, .def, .category{font-size: clamp(1rem, calc(var(--fs-1)*1.3), 3rem); width: 90%;}
    .category{padding-left: 8rem; line-height: 2;}
    #countries{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25dvw; max-width: 99%;}
    .country{width: 17dvw; height: 15dvh; margin-block: 1dvh;}
    .country h2{font-size: clamp(0.5rem, calc(var(--fs-1)*1.4), 2rem); }
    .art_box{max-width: 15dvw; height: auto; margin-inline: 2rem;}
    a img{ width: 18dvw; height: auto; aspect-ratio: 16/9; }
    .kleur{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.9), 1.5rem);}

}

/* max-width: 35rem =  560px */
 @media screen and (25rem <= width <= 35rem){
    #heading header{height: 12dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1), 2rem); margin-left: 20dvw;}
    #menu button{max-width: 30%; width: 100%; height: 5%; font-size: clamp(0.5rem, calc(var(--fs-1)*0.7), 1rem);margin-block: 1dvh;}
    #statement h2, #types h2, #cities h2{font-size: clamp(1rem, calc(var(--fs-1)*0.8), 2rem); }
    .stat, .def, .category, .info{font-size: clamp(0.5rem, calc(var(--fs-1)*0.7), 1rem); width: 90%;}
    .category{padding-left: 4rem;line-height: 2;}
    #countries{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25dvw; max-width: 99%;}
    .country{width: 17dvw; height: 15dvh; margin-block: 1dvh;}
    .country h2{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem); }
    .art_box{max-width: 15dvw; height: auto; margin-inline: 2rem;}
    a img{ width: 18dvw; height: auto; aspect-ratio: 16/9; }
    .kleur{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.5), 1rem);}

 }

/* max-width: 25rem =  400px */
 @media screen and (20rem <= width <= 25rem){
    #heading header{height: 12dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1), 2rem); margin-left: 20dvw;}
    #menu button{max-width: 30%; width: 100%; height: 5%; font-size: clamp(0.5rem, calc(var(--fs-1)*0.7), 1rem);margin-block: 1dvh;}
    #statement h2, #types h2, #cities h2{font-size: clamp(1rem, calc(var(--fs-1)*0.8), 2rem); }
    .stat, .def, .category, .info{font-size: clamp(0.5rem, calc(var(--fs-1)*0.7), 1rem); width: 90%;}
    .category{padding-left: 4rem;line-height: 2;}
    #countries{display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25dvw; max-width: 99%;}
    .country{width: 17dvw; height: 15dvh; margin-block: 1dvh;}
    .country h2{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem); }
    .art_box{max-width: 15dvw; height: auto; margin-inline: 2rem;}
    a img{ width: 18dvw; height: auto; aspect-ratio: 16/9; }
    .kleur{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.5), 1rem);}

 }