/* GLOBAL PAGE SETTINGS */
html{scroll-behavior: smooth;}
:root {
--button-1: 10rem; --button-2: 15rem;--button-3: 20rem;--button-4: 25rem;
--fs-1: 1dvw; --fs-2: 2dvw; --fs-3: 3dvw; --fs-4: 4dvw;
--height-1: 1dvh; --height-2: 2dvh; -height-3: 4vh; --height-4: 6dvh;
--margin-1: 1dvw; --margin-2: 2dvw; --margin-3: 4dvw; --margin-4: 6dvw;
--padding-1: 1dvw; --padding-2: 2dvw; --padding-3: 4dvw; --padding-4: 6dvw;
--width-1: 1dvw; --width-2: 2dvw; --width-3: 4dvw; --width-4: 6dvw;--width-5: 8dvw;--width-6: 10dvw;
--s: .5dvw; --c:darkgrey 70% 35%; --d: blue;
--main-color: red; --secondary-color: lightgreen; --txt-color: aliceblue;
--bg-color: repeating-linear-gradient(45deg, rgba(231, 222, 222, 0.52) 5%, rgba(17, 238, 146, 0.048) 10%), repeating-linear-gradient(-45deg, rgba(104, 112, 117, 0.753) 5%, rgba(221, 199, 215, 0.068) 10%);
}
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 settings **/
#container{max-width: 200rem; width: 100%; background-color: lightgrey; outline: 2dvw solid lightgreen; margin-inline: auto;display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25dvw;}
#container{container-type: inline-size; container-name: parent;}
#menu{grid-column: 1/5; grid-row: 1/2;}
header{grid-column: 1/5; grid-row: 2/3; }
#evolution{grid-column: 1/5; grid-row: 3/4;}
main{grid-column: 1/5; grid-row: 4/5;}
footer{grid-column: 1/5; grid-row:5/6;}
/** HEADER settings **/
/* navigation section formatting*/
#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{ width: 80dvw; max-width: 70%; text-align: center; font-size: calc(var(--fs-2)*0.8); color: indigo; margin-inline: 10dvw; }
header h1{display: flex; justify-content: space-around; align-content: space-around; }
/** HISTORY settings **/
.headtitle{position: relative; display: flex; justify-content: flex-start; align-content: flex-start; max-width:100dvw; width: 100%; font-size: clamp(1rem, calc(var(--fs-2)*1.5), 4rem);; color: saddlebrown; border: 0.1dvw dotted aqua; font-style: italic; height: auto; background-color: rgb(205, 206, 204) }
#periods{position: relative; display: grid; grid-template-rows: repeat(7, 1fr); max-width: 80dvw; width: 100%; margin: auto;}
[id^="content"] {display: inline-block; background-color: transparent; max-width: 80dvw; width: 100%; color:black; }
[id^="content"] h3{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem);}
[id^="content"] .comment{font-size: clamp(1rem, calc(var(--fs-1)*2), 2.3rem);}
/** PHOTO ALBUMS settings **/
/* headtitle - see above : History settings*/
.headtitle span{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2.3rem); margin-block: 1dvh; margin-inline: 5dvw; color: black;}
.banner{position: relative; display: flex; flex-flow: column wrap; justify-content: flex-start; align-content: flex-start;max-width: 30dvw; width: 100%; font-size: clamp(1rem, calc(var(--fs-1)*2), 2.3rem); }
#albums{display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 90dvw; width: 100%; margin: 2dvh auto; }
/* countries - food & dishes - plants*/
.gallery {--g: 0.10dvw; /* the gap */ --s: 11dvw; /* the size */ display: grid; border-radius: 50%;}
.gallery > a { grid-area: 1/1; width: 9dvw; aspect-ratio: 1; object-fit: cover; border-radius: 50%; transform: translate(var(--_x,0),var(--_y,0)); cursor: pointer; z-index: 0; transition: .3s, z-index 0s .3s;}
.gallery > a:hover { --_i: 1; z-index: 1; transition: transform .2s, clip-path .3s .2s, z-index 0s;}
.gallery:hover a { transform: translate(0,0);}
.gallery > a:nth-child(1) { width: 20dvw; height: 30dvh; clip-path: polygon(50% 50%,calc(50%*var(--_i,0)) calc(100%*var(--_i,0)),0 calc(100%*var(--_i,0)),0 0,100% 0,100% calc(100%*var(--_i,0)),calc(100% - 50%*var(--_i,0)) calc(100%*var(--_i,0))); --_y: calc(-1*var(--g))}
.gallery > a:nth-child(2) { width: 20dvw; height: 30dvh; clip-path: polygon(50% 50%,calc(100% - 120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100% - 100%*var(--_i,0)) 0,100% 0,100% 100%,calc(100% - 100%*var(--_i,0)) 100%,calc(100% - 120%*var(--_i,0)) calc(100% - 50%*var(--_i,0))); --_x: var(--g)}
.gallery > a:nth-child(3) {width: 20dvw; height: 30dvh; clip-path: polygon(50% 50%,calc(100% - 50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)),100% calc(100% - 120%*var(--_i,0)),100% 100%,0 100%,0 calc(100% - 100%*var(--_i,0)),calc(50%*var(--_i,0)) calc(100% - 120%*var(--_i,0))); --_y: var(--g)}
.gallery > a:nth-child(4) { width: 20dvw; height: 30dvh;clip-path: polygon(50% 50%,calc(100%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100%*var(--_i,0)) 0,0 0,0 100%,calc(100%*var(--_i,0)) 100%,calc(100%*var(--_i,0)) calc(100% - 50%*var(--_i,0))); --_x: calc(-1*var(--g))}
/** VIDEO CLIPS SETTINGS **/
#video{display: grid; grid-template-columns: 60dvw 40dvw;}
#video p{font-size: calc(var(--fs-1)*1.2); margin-left: 5dvw;}
#video_temporary{font-size: var(--fs-1); color: red; display: block; margin-inline: 15dvw;}
/** PROGRAMMING settings**/
#programming{display: grid; grid-template-columns: 2fr 1fr; max-width: 100dvw; width: 100%;}
/* WEB DEVELOPMENT settings */
#webdev{display: grid; grid-template-columns: 2fr 1fr; max-width:60dvw; width: 100%;}
#webdev a img{position: relative; display: block; width: 30dvw; height: 40dvh;}
/** DIGITAL ARTS setting **/
#digArt{display: grid; grid-template-columns: 20dvw 20dvw; max-width: 50dvw;}
#digArt p{font-size: calc(var(--fs-1)*1.2); }
#temporary{font-size: var(--fs-1); color: red; display: block; margin-inline: 15dvw;}
#digArt a img{max-width: 20dvw; width: 100%; max-height: 20dvh; height: 100%;}
/** SETTINGS FOR OTHER DEVICES AND OTHER SIZES**/
/*max-width: 107rem = 1,712px */
@media only screen and (96rem <= width <= 107rem){
#menu button{max-width: 12%; height: auto;}
.headtitle{font-size: clamp(1rem, calc(var(--fs-2)*2), 2.3rem);}
[id^="content"] h3{font-size: clamp(1rem, calc(var(--fs-2)*1.3), 2rem); margin-top: 1dvh;}
[id^="content"] .comment{font-size: clamp(1rem, calc(var(--fs-2)*1), 1.5rem); }
.banner{font-size: clamp(0.5rem, calc(var(--fs-1)*1.5), 3rem);}
.banner p span{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem);}
}
/*max-width: 96rem = 1,528px */
@media only screen and (85rem <= width <= 96rem){
#menu button{width: 15%; max-width: 100%;}
.headtitle{font-size: clamp(1rem, calc(var(--fs-1)*2), 2rem);}
#periods{margin-inline: 5dvw; }
[id^="content"] h3{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); }
[id^="content"] .comment{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 90dvw; }
.banner p{font-size: clamp(1rem, calc(var(--fs-1)*2), 1.5rem)}
.banner p span{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 2.3rem);}
}
/* max-width: 75rem = 1,200px */
@media only screen and (65rem <= width <= 75rem) {
#menu button{width: 15%; max-width: 100%;}
.headtitle{font-size: clamp(1rem, calc(var(--fs-1)*2), 2rem);}
#evolution{width: 90dvw; max-width: 100%; margin-inline: 1dvw;}
#periods{margin-inline: 5dvw; }
[id^="content"] h3{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); }
[id^="content"] .comment{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 90dvw; }
.banner p{font-size: clamp(1rem, calc(var(--fs-1)*2), 1.5rem)}
.banner p span{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 2.3rem);}
}
/* max-width : 65rem = 1,040px */
@media only screen and (55rem <= width <= 65rem) {
#menu button{width: 15%; max-width: 100%;}
.headtitle{font-size: clamp(1rem, calc(var(--fs-1)*2), 2rem);}
.headtitle span{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 2rem);}
#evolution{width: 90dvw; max-width: 100%; margin-inline: 1dvw;}
#periods{margin-inline: 5dvw; }
[id^="content"] h3{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); }
[id^="content"] .comment{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 90dvw; }
.banner p{font-size: clamp(1rem, calc(var(--fs-1)*2), 1.5rem)}
}
/* max-width: 55rem = 880px */
@media only screen and (45rem <= width <= 55rem){
#menu button{width: 10%; max-width: 100%; height: auto; margin-top: 1dvh;}
h1{font-size: clamp(1rem, calc(var(--fs-1)*2), 4rem); margin-left: 0dvh;}
.headtitle{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem);}
.headtitle span{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.3rem);}
#periods{margin-inline: 1dvw; }
[id^="content"] h3{font-size: clamp(1rem, calc(var(--fs-1)*1.25), 1.5rem); }
[id^="content"] .comment{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); width: 90dvw; }
.banner p{font-size: clamp(1rem, calc(var(--fs-1)*1), 1rem)}
}
/* max-width: 45rem = 720px */
@media screen and (35rem <= width <= 45rem){
#menu button{width: 15%; max-width: 100%;}
.headtitle{font-size: clamp(1rem, calc(var(--fs-1)*2), 2rem);}
#periods{margin-inline: 5dvw; }
[id^="content"] h3{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); }
[id^="content"] .comment{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 90dvw; }
.banner p{font-size: clamp(1rem, calc(var(--fs-1)*2), 1.5rem)}
div span{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 2.3rem);}
}
/* max-width: 35rem = 560px */
@media only screen and (25rem <= width <= 35rem) {
#menu{width: 100%; height: 100%; margin-top: -5dvh; position:fixed;z-index: 10;}
#menu button{width: 10%; max-width: 100%; height: 2%;font-size: clamp(0.3rem, calc(var(--fs-1)*0.4), 1rem);}
h1{font-size: clamp(1rem, calc(var(--fs-1)*2), 4rem); margin-left: 5dvh;}
.headtitle{font-size: clamp(1rem, calc(var(--fs-1)*2), 2rem);}
.headtitle span{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.2rem);}
#periods{margin-inline: 5dvw; }
[id^="content"] h3{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); }
[id^="content"] .comment{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 90dvw; }
.banner p{font-size: clamp(1rem, calc(var(--fs-1)*2), 1.5rem)}
}
/* max-width: 25rem = 400px */
@media only screen and (20rem <= width <= 25rem) {
#menu button{width: 10%; max-width: 100%; height: auto; margin-top: 2dvh;}
h1{font-size: clamp(1rem, calc(var(--fs-1)*2), 4rem); margin-left: 7dvh;}
.headtitle{font-size: clamp(1rem, calc(var(--fs-1)*2), 2rem);}
.headtitle span{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.2rem);}
#periods{margin-inline: 5dvw; }
[id^="content"] h3{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); }
[id^="content"] .comment{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 90dvw; }
.banner p{font-size: clamp(1rem, calc(var(--fs-1)*2), 1.5rem)}
}