/****  COMMON CSS SETTINGS FOR ALL DEVICES ***/

/* 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: 1dvw; --margin-2: 2dvw; --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; margin: 0; padding: 0; box-sizing: border-box;}

/* layout of the grid*/
#heading{grid-column: 1/5; grid-row:1/2;}
main{grid-column:1/5; grid-row: 2/3;}
footer{grid-column:1/5;grid-row:3/4;}

/* container general settings */
#container{position: relative; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fill, minmax(auto-fill, 1fr)); grid-auto-rows: minmax(3dvh, auto); grid-auto-flow: column; max-width: 200rem; width: 100%; height: auto; margin-inline: auto ; overflow: auto; outline: 2dvw solid skyblue; }

/*** HEADING settings ***/
#heading{display: grid; grid-template-columns: 30dvw 60dvw; max-width: 200rem; width: 100%; height: 17dvh;}
#heading{--s: 1dvw; --c: lightgrey; --_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 66%,black 40% 70%, #0000 72%; background: radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s),  radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c); }

/* navigation section formatting*/
#menu button{position: fixed; max-width: 5dvw; width: 100%; height: auto; 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(2rem, calc(var(--fs-1)*2), 4rem);}
#menu button:hover{background:grey; color:aliceblue; box-shadow:inset 0 0 0 1px white; border:0.4dvw solid black; cursor: pointer;}

/* formatting header */
header{padding-left: 1dvw; max-width: 200rem;  width: 100%;}
header h1{position: absolute; display: flex; flex-flow: row nowrap; justify-items: center; align-items: center; margin-inline: 20%;  margin-block: 1%; color: blue; font-size: var(--fs-4); text-align: center;  animation: infinite linear 30s styling; z-index: 99}
@keyframes styling{
    0%{ translate: 0dvw 0dvw  1dvw; color: black; }
    25%{ translate: -.4dvw -1.5dvw 2dvw; color:blue; }
    50%{ translate: 0dvw 0dvw 2dvw; color: red;}
    75%{ translate: .4dvw 2dvw 1.5dvw; color: navy; }
    100%{ translate: 0dvw 0dvw 1dvw; color: black;}
}

/*formatting the main section - i.e. video clips holder*/
.grid{display: grid;grid-template-columns: 1fr 4fr; grid-auto-rows: minmax(2dvw, auto); max-width: 200rem; width: 100%; margin-top: -4dvh;}
.my-video{display: inline; margin: 1dvw; width: 30dvw; height: 20dvw; -webkit-position: fixed; position: fixed; }
figure{display: flex; flex-flow: row wrap; margin-left: 30dvw;height: auto; position: relative; }
.video-gallery{display: inline-flex;width: 30dvw; margin: 5dvw; flex-direction: column;}
h3 span{font-size: calc(var(--fs-1)*1.2); margin-left: 1dvw; font-weight: normal;}
.item-list{display: grid; grid-template-columns: repeat(4, 1fr); width: 60dvw;}
.item-list a{display: inline-flex; gap: 0.5dvw; font-size: calc(var(--fs-1)*1); }
.item-list a img{width: 5%; height: 40%;}

/* MEDIA QUERIES FOR SMALLER DEVICES*/

@media (max-width: 107rem ) {
   header h1{font-size: var(--fs-3); margin-top: 3%;}
   #language{max-width: 8%;}
   #menu button {max-width: 8%; width: 100%; font-size: var(--fs-1); }
   .my-video{width: 30dvw; height: 40dvh; }
   figure{ margin-left: 30dvw;height: auto;}
   .video-gallery{width: 65dvw; margin: 3dvw; flex-direction: column;}
   .item-list{display: grid; grid-template-columns: repeat(3, 1fr); width: 60dvw;}
   .item-list a{display: inline-flex; gap: 0.5dvw; font-size: calc(var(--fs-1)*0.8); }
   .item-list a img{width: 5%; height: 40%;}
}


@media (max-width: 96rem ) {
   header h1{font-size: var(--fs-3); margin-top: 3%;}
   #menu button {max-width: 15%; width: 100%; font-size: var(--fs-1); }
   .my-video{width: 30dvw; height: 40dvh; }
   figure{ margin-left: 30dvw;height: auto;}
   .video-gallery{width: 65dvw; margin: 3dvw; flex-direction: column;}
   .item-list{display: grid; grid-template-columns: repeat(3, 1fr); width: 60dvw;}
   .item-list a{display: inline-flex; gap: 0.5dvw; font-size: calc(var(--fs-1)*0.8); }
   .item-list a img{width: 5%; height: 40%;}
}

/* max-width: 85.375rem = 1,366px  - landscape*/
@media screen and (max-width: 85.375rem) and (orientation: landscape){
   #heading{height: 11dvh; max-height: 100%;}
   header{margin-left: 10dvw;}
   header h1{font-size: var(--fs-3); margin-top: 1%; max-height: 10dvh; height: 100%;}
   #language{max-width: 10%;}
   #menu button {max-width: 10%; width: 100%; font-size: var(--fs-1); height: 4dvh; }
   .grid{ margin-top: 0dvh;}
   .my-video{width: 30dvw; height: 20dvh; }
   .item-list{display: grid; grid-template-columns: repeat(3, 1fr); width: 60dvw;}
}

/* max-width: 75rem = 1,200px - portrait*/
 @media screen and (max-width: 75rem) and (orientation: portrait){

 }

/* max-width: 75rem = 1,200px - landscape*/
 @media screen and (max-width: 75rem) and (orientation: landscape){
   #heading{height: 15dvh; max-height: 100%;}
   header{margin-left: 10dvw;}
   header h1{font-size: var(--fs-3); margin-top: 1%; max-height: 10dvh; height: 100%;}
   #language{max-width: 10%;}
   #menu button {max-width: 10%; width: 100%; font-size: var(--fs-1); height: 4dvh; }
   .grid{ margin-top: 0dvh;}
   .my-video{width: 30dvw; height: 20dvh; }
   .item-list{display: grid; grid-template-columns: repeat(3, 1fr); width: 60dvw;}
 }



/* max-width : 65rem  = 1,040px - portrait*/
 @media screen and (max-width: 65rem) and (orientation: portrait) {
   #heading{height: 11dvh; max-height: 100%;}
   header{margin-left: 10dvw;}
   header h1{font-size: var(--fs-3); margin-top: 1%; max-height: 10dvh; height: 100%;}
   #language{max-width: 10%;}
   #menu button {max-width: 10%; width: 100%; font-size: var(--fs-1); height: 4dvh; }
   .grid{ margin-top: 0dvh;}
   .my-video{width: 30dvw; height: 20dvh; }
   .item-list{display: grid; grid-template-columns: repeat(3, 1fr); width: 60dvw;}

 }

 /* max-width : 65rem  = 1,040px - landscape*/
 @media screen and (max-width: 65rem) and (orientation: landscape) {

 }


/* max-width: 55rem =  880px - landscape*/
 @media screen and (max-width: 55rem) and (orientation: landscape){
      #heading{height: 20dvh; max-height: 100%;}
      header{margin-left: 10dvw;}
      header h1{font-size: var(--fs-2); margin-top: 1%; max-height: 10dvh; height: 100%;}
      #language{max-width: 10%;}
      #language input{font-size: calc(var(--fs-1)*0.8);}
      #menu button {max-width: 10%; width: 100%; font-size: var(--fs-1); height: 6dvh; }
      .grid{ margin-top: 0dvh;}
      .my-video{width: 30dvw; height: 30dvh; }
    /* .item-list{display: grid; grid-template-columns: repeat(2, 1fr); } */

}

/* max-width: 55rem =  880px - portrait*/
@media screen and (max-width: 55rem) and (orientation: portrait){


 }


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

 }

 /* max-width: 35rem =  560px - portrait*/
 @media screen and (max-width: 35rem) and (orientation: portrait){
    #heading{height: 12dvh; max-height: 100%;}
    header{margin-left: 10dvw;}
    header h1{font-size: var(--fs-2); margin-top: 1%; max-height: 10dvh; height: 100%;}
    #language{max-width: 20%;}
    #language input{font-size: calc(var(--fs-1)*0.8);}
    #menu button {max-width: 20%; width: 100%; font-size: var(--fs-1); height: 3dvh; }
    .grid{ margin-top: 0dvh;}
    .my-video{width: 30dvw; height: 20dvh; }
    .item-list{display: grid; grid-template-columns: repeat(2, 1fr); }

 }


 /* max-width: 26.5rem =  420px  - portrait*/
 @media screen and (max-width: 26.5rem) and (orientation: portrait){
   #heading{height: 12dvh; max-height: 100%;}
   header{margin-left: 10dvw;}
   header h1{font-size: var(--fs-2); margin-top: 1%; max-height: 10dvh; height: 100%;}
   #language{max-width: 20%;}
   #language input{font-size: calc(var(--fs-1)*0.8);}
   #menu button {max-width: 20%; width: 100%; font-size: var(--fs-1); height: 3dvh; }
   .grid{ margin-top: 0dvh;}
   .my-video{width: 30dvw; height: 20dvh; }
   .item-list{display: grid; grid-template-columns: repeat(2, 1fr); }
}