/***********************************************************************************************************
    General CSS file for overall website styling
************************************************************************************************************/


/* all */
:root {
    /* color palette generated using coolors.co */
    --pistachio: #8dc185ff;
    --british-racing-green: #003e1fff;  /* can use for text */
    --dartmouth-green: #006633ff;
    --jade: #5ba66fff;
    --sea-green: #388053ff;
    --ghost-white: #f8f4f9ff;
    --marian-blue: #364981ff;
    --air-force-blue: #5f88abff;

}

/* overall page layouts */

body {
    position: relative;
    min-height: 100vh;
}


#page-content {
    padding-top: 3rem;       /* nav bar height */
    padding-bottom: 4rem;    /* footer height */
    padding-left: 10px;
    padding-right: 10px;
}


footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4rem;            /* footer height */
    background-color: var(--air-force-blue);
}

#footer-content {
    padding: 8px 10px;
}


/* row */
.row {                          /* class="row" */
    display: flex;
    flex-wrap: wrap;
}


/* navigation bar */
/* I don't know where I got this from */
nav {
    display: flex;
    justify-content: space-around;  
    align-items: center;
    background-color: var(--dartmouth-green);
    /* padding: 0 10px;   */
    position: absolute;
    top: 0; 
    /* height: 3rem; */
    width: 100%; 
    z-index: 10; 
}


nav a {                         /* <a> in <nav> */
    color: #FFF;
    padding: 25px 18px;
    text-decoration: none;
    flex-grow: 1; 
    text-align: center; 
    transition: background-color 0.3s ease; 
}


nav a.current {                 /* <a> in <nav> with class="current" */
    background-color: var(--jade);
    color: #000;
}


nav a:hover {                   /* <a> in <nav> when a hover happens*/
    background-color: var(--sea-green);
    color: #FFF;
}


/* photo gallery */
/* adapted from www.w3schools.com/css/css_image_gallery.asp */

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
  }
  
  div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
  }