/* -----------------------------global styling------------------------------ */

        /* this is for having the same font in all the html pages */

body{

    font-family: Georgia, 'Times New Roman', Times, serif;
    color: white;

}

.btn-section{
    float:right;
}

.switch-theme-dark{
    background-color: #555D50;
    color: white;
}

.switch-theme-light{
    background-color: #98AFC7;
    color: black;
}

.navbar{
    clear: both;
}


    /* this is for the top bar indicating the page is opened in desktop or mobile device */
    
.site-mode {
  text-align: center;
  position: sticky;
  background-color: black;
  z-index: 10;
  top: 0;
  font-size: 16px;
  color: grey;
}

#index-header,#project-header,#exp-header{
    text-align: center;
    border: 2px solid #646D7E;
    background-color: black;
    color: white;
}

/*-----------------------responsive design-----------------------*/




/* for mobile phones: */

@media(max-width:599px) {
    .desktop-only {
        display: none;
    }
    .screenshot{
        display:grid;
        grid-template-columns: repeat(1, 1fr);
    }


    
    .body-color{
        background-color: #0C090A;
        color:white
    }
    .body-white-theme{
        background-color:#14A3C7 ;
        color:black
    }
    
}



/* for tablets */

@media (min-width: 600px) {
    .mobile-only {
        display: none;

    }
    /* theme mode
     initialy the body color is designed in the dark mode so the .body-color is for dark */
    .body-color{
        background-color: #3A3B3C;
    }
    .body-white-theme{
        background-color:#659EC7 ;
        color:black
    }
}

/* this for the medium sized loptop */

@media (min-width: 1200px) and (max-width: 1799px) {

    .screenshot{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
    }
     /* theme mode
     initialy the body color is designed in the dark mode so the .body-color is for dark */
    .body-color{
        background-color: #3D3C3A;
    }
    .body-white-theme{
        background-color:#87AFC7 ;
        color:black
    }

}

/* for larger Screen */

@media (min-width:1800px){
    .screenshot{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
    }
     /* theme mode
     initialy the body color is designed in the dark mode so the .body-color is for dark */
    .body-color{
        background-color: #504A4B;
    }
    .body-white-theme{
        background-color:#95B9C7 ;
        color:black
    }
    
}



/*------------------------animation section-----------------------*/

@keyframes ProjectTeaserHover {
    from{opacity: 0; color: grey;}
    to{opacity: 1; color: #4863A0;background-color: white;}
}

@keyframes restaurantAnimation{
    from {opacity:0;background-color: #52595D;color:#BDEDFF;}
    to{opacity:1; background-color: #52595D;color:#99A3A3;}
}

/*hover animation to .hoveranimation class and the element inside that class*/
.hover-animation:hover,.hover-animation  :hover{
    animation: ProjectTeaserHover .25s ease-in forwards;
}

/* ---------------------------- styling for each page -----------*/



/* ---------------------------styling for the homepage(index.html)------------------------- */


  /* this is to keep the card in center */
.aboutme .container-fluid {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* full viewport height */
}

    /* the size of the image is big  */
.personal-card {
  width: 500px;
}


.sec-intro{
    margin: 20px;
    display: grid;
    grid-template-columns: repeat(3, 3fr);
    grid-gap: 20px;
}


 /* this is to make the text at the center */
.project-teaser h2{
    text-align: center;
    border: 2px solid grey ;
}

.pro-teaser-row{
    padding:20px;
    display: flex;
    gap: 20px;
}



/*-------------------styling for project page---------------------*/


/* this is for when the page is opened in desktop */

.project,.scr-heading{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    margin:10px;
    border: 2px solid grey;
    padding: 10px;
}

.screenshot{
    margin:10px;
    border: 2px solid grey;
    padding: 10px;
}

.project li{
    padding: 15px;
}

.img{
    width:300px;
    padding:10px 5px;
}

/*--------------styling for professional experience page-------------*/

/* this for the dark mode */
.exp-category{
    margin: 20px;
    padding: 15px;
    border: 2px solid grey;
    background-color: #736F6E;
}

/* this is for the light mode */

.exp-category-light{
    margin: 20px;
    padding: 15px;
    border: 2px solid grey;
    background-color: #BCC6CC;
}