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

/* GLOBAL PAGE SETTINGS */
* {margin: 0; padding: 0; box-sizing: border-box;}
:root {
    --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*/
main{grid-column:1/5; grid-row: 1/2;}


/*---------------------------------------------------------------*/

/* HEADER SETTINGS */
see separate header.css file
/*--------------------------------------------------------------------------------*/

/*** MAIN SECTION  - i.e. video clips holder ***/

/* container general settings */
#container{grid-column:1 / -1; grid-row: 1/2;}
#container{position: absolute; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26.25rem), 1fr)); gap: 1.5rem; max-width: 200rem; width: 100%; margin-inline: auto ; padding: 1rem; border: 0.25rem solid skyblue; border-radius: 0.5rem;}
.my-video{display: inline; margin: 1rem; width: 30rem; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.5rem; background-color: #000; -webkit-position: fixed; position: fixed; }
.video-gallery{margin-inline-start: 35rem; display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.25rem), 1fr)); gap: 1rem; width: 100%;}
h3 span{font-size: clamp(0.5rem, 1rem, 1.5rem); margin-left: 1dvw; font-weight: normal;}
.item-list{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); width: 60dvw;}
.item-list a{display: inline-flex; gap: 0.5dvw; font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); padding: 0.15rem;}
.item-list a img{width: 1rem; height: 1rem; object-fit: cover; border-radius: 0.25rem; flex-shrink: 0; background-color: transparent;}


/*-------------------------------------------------------------------------------------------*/

/* 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){
   #container{grid-template-columns: 1fr;}

 }

 /* 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); } */
}