#GridLayout{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas: "z-Greetings   z-Greetings  z-Greetings z-Greetings"
                         "z-Greetings   z-Greetings  z-Greetings z-Greetings"
                         "z-Timetable   z-Timetable  z-Timetable z-Timetable"  
                         "z-Timetable   z-Timetable  z-Timetable z-Timetable"
                         "z-Questions   z-Questions  z-Questions z-Questions"
                         "z-Questions   z-Questions  z-Questions z-Questions"
                         "z-VirtaulTour   z-VirtaulTour  z-VirtaulTour z-VirtaulTour"
                         "z-VirtaulTour   z-VirtaulTour  z-VirtaulTour z-VirtaulTour"
                         ;  
                                    
    /* adauga o spatiere intre elementele grid-ului */
    gap: var(--spaceL);
}    

body{
    --color1: #fcbe4c;
    --color2: #edce94;
    --color3: #e8b374;
    --color5: #f88f0f;
    --color6: #ed660c;
    --color7: #d8572c;
    --color8: #f02811;
    --color9: #ce4636;
    --color10:#200101ec;
    --color11: rgba(223, 215, 205, 0.923);
    --color12:#9b2c2c;
    --mh:23px;
    --bw:160px;
    --spaceL: 55px;
    --spaceM: 35px;
    --spaceS: 13px;
    --spaceHeight: 50px;
    --buttonLength: 175px;

    font-size: 15px; 
    font-family: 'cursive'; /*https://developer.mozilla.org/en-US/docs/Web/CSS/font-family*/
    margin-left: var(--spaceL);
    margin-right: var(--spaceL);
    background-color: var(--color1);
}

   /*toate componentele din grid pagina au padding 10 px*/
#GridLayout > *{
    padding: 9px;
}
#Greetings{
    grid-area: z-Greetings;

}

#TimetableSection{
    grid-area: z-Timetable;
}

#VirtaulTour{
    grid-area: z-VirtaulTour;
}

.VirtaulTIfr{
    display: flex; /*imparte elementele din interior in coloane*/
    justify-content: center; /*echivalent text align center dar pentru elemente block nu text*/
}

.VirtaulTourIfr{
    width: max-content; 
}

.VirtaulTIfr a{
    padding: 8px;
    text-decoration: underline ;
    margin-left: 4px;
    margin-right: 4px;
    border: thick double;
    box-shadow: 1 1 3px 3px var(--color6);
    border-top-left-radius:6px;
    border-top-right-radius: 6px;
    color: #f02811;
    background-color: var(--color11) !important; /*suprascriere*/
    transition: background-color 4s linear;  
}

.VirtaulTIfr a:hover{
    background-color: var(--color5) !important;
    transform: scale(0.9);
    transition: transform 0.8s steps(4,start);
}

#Timetable{
    width: max-content;
    text-align: center;
    border-collapse: collapse;/*pentru a scapa de border dublu intre celulele tabelului */
}

#TimetableID td, #TimetableID th, #TimetableID caption{
    border: 3px solid ;
    padding: 6px;
    color :brown;
    font-weight: bold;
    border: thick double;
}

#TimetableID caption{
    caption-side: bottom;/*modifica pozitia captionului care e default in partea de sus  https://www.w3schools.com/cssref/tryit.php?filename=trycss_caption-side*/
    background-color: var(--color8);
    text-align: center;
}

#TimetableID th{
    background-color: var(--color8);
}

#TimetableID tr:nth-child(odd) td{
    background-color:var(--color5);
}

#TimetableID tr:nth-child(even) td{
    background-color:var(--color6);
}

#TimetableID tr td{
    transition: transform 0.8s steps(2,start);
   
}

/*cand merg cu mouse ul peste un rand se schimba culoare tuturor celulelor din randul respectiv*/
#TimetableID tr:hover td{
    background-color: var(--color11);
    transform: scale(1.01);
    transition: transform 0.8s steps(4,start);
    
}

/*scroll bar orizontal pentru micsorarea ecranului*/ 
#tab-container{
    overflow-x: auto;
    width: 40vw !important;
}

#ColorfullPoint{
    position:fixed;
    opacity:0.5;
    bottom: 0.5em;
    right:0.49em;
    width:4rem;
    height:4rem;
    line-height:3.9rem;
    text-align:center;
    color:rgb(5, 65, 5);
    text-decoration: none;
    /* inset - pentru ca box shadow sa apara in interiorul elementului */
    box-shadow: 1.2px 1.2px 6px 6px var(--color11) inset;
    border-top-left-radius: 49%;
    border-top-right-radius: 49%;
    border-bottom-left-radius: 49%;
    border-bottom-right-radius: 49%;
    background-color: var(--color11);
    transition: opacity 0.5s linear;
    margin: 20px 2px 20px 0;

}

#PointUP{
    margin: -1px 0px 0px 0px;
}

#ColorfullPoint i {
    font-size: 0.5rem; /* Adjust the font size to your preference */
  }


#ColorfullPoint:hover{
    opacity: 3;
}

#ColorfullPoint #PointUP{
    /* se mareste de la dimensiunea default a sagetii de 2x */
    transform: scale(6);
    transition: transform 0.6s steps(2,start);
    color: var(--color8);
}

#ColorfullPoint:hover #PointUP{
    transform: scale(5.3);
}

#dv-prezentare img{
    max-width: 39vw !important;
}

iframe{
    max-width: 40vw !important;
}

/* etapa 3 */
/* de verificat daca e ok pt simetrie */
header {
    background-color: #f02811;
    border-radius: 50px;
    box-shadow: -10px 10px 6px 0 #FF6600;
    padding: 5px;
    color: black;
    margin-bottom: 30px;
    margin-top: 80px;
}

footer {
    background-color: #f02811;
    border-radius: 50px;
    box-shadow: -10px 10px 6px 0 #FF6600;
    padding: 30px;
    color: black;
}

/* de verificat daca e ok pt footer */

footer a{
    color: black;
}

main{
    background-color:  #fcbe4c;;
    box-shadow: -10px 10px 6px 0  #fcbe4c;;
    padding: 30px;
    border-radius: 50px;
}

main{
    margin-bottom: 20px;
    color: black;
}

#dv-prezentare img, iframe{
    /* latimea maxima = jumatate din ecran Relative to 1% of the width of the viewport*/
    max-width: 35vw;
    min-width: 10vw;
}

ul{
    list-style-type: none;
}

img{
    /* border-radius: 50px; */
}

h1{
    margin-left: var(--spatiere-mare);
}


@media screen and (max-width:1400px) {
    #pic img{
        max-width: 70vw !important;
    }
}


@media screen and (max-width:700px) {
    #pic img{
        max-width: 50vw !important;
    }
}