body {
    padding: 0;
    margin: 0;
    font-family: Arial;
}

#header {
    position: fixed;                                /*Makes sure header remains fixed at the top on the left side of the screen*/
    top: 0px;                                       
    left: 0px;
    z-index: 500;                                   /*header will always be at the top most part of the screen*/
    width: 100%;                                    /*Takes up full width of the screen*/
    height: 80px;                                   
    background-image: url('images/wood-bg.png');    /*Set's the wood image as the background of the header*/
    background-repeat: repeat-x;                    /*Repeats the image horizontally until the full width of the screen*/
}

/******************** IMAGE FOR THE HEADER (Logo for Zoo) *******************/

#header img {
    display: block;                                 /*Makes sure we are able to adjust height and width of the image*/
    margin: auto;                                   /*Centralize object on the header of the screen (horizontally centralized*/
    height: 70%;
    padding-top: 15px;                              /*Leaves some space from top of image*/
}

/**************************** TOP TAB **********************/

#top-tab {
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 500;
    width: 100%;
    height: 40px;
    background-color: darkgreen;
}

/*Hyperlinks for the top tabs*/
#top-tab a {
    float: left;
    display: block;
    width: 33%;                                     /*Width of the hypoerlinks for the top tabs, in orde to add other tabs at the top I will need to edit this width*/
    height: 35px;
    font-weight: 700;
    color: white;
    text-align: center;                             /*Center aligns the hyperlinks*/
    text-decoration: none;
    padding-top: 12px;
}

/***************************** MAIN HOME **********************/

#main-home {
    margin-top: 120px;                              /*Leaves space of 120px from top of screen till top of main home section. The 120px is derived from height of header(80px) + height of top tabs (40px) = 120px*/
    width: 100vw;                                   /*Sets the width of the main home section to 100% of the viewport width*/
    height: 100vh;                                  /*Sets the height of the main home section to 100% of the viewport height*/
    overflow: hidden;                              /*Ensures that any overflow content is hidden*/
}


#main-home img {
    width: 100%;                                   /*Sets the width of the image to 100% of the parent element*/
    height: 100%;                                  /*Sets the height of the image to 100% of the parent element*/
    object-fit: cover;                            /*Ensures that the image covers the entire area of the parent element without distorting its aspect ratio*/
}
/**************************** BOTTOM TABS **********************/

#bottom-tab {
    position: fixed;
    bottom: 0;                                      /*Makes sure tabs are forever at the bottom*/
    left: 0;
    z-index: 500;
    width: 100%;
    height: 40px;
    background-color: forestgreen;
}

#bottom-tab a {
    float: left;
    display: block;
    width: 50%;                                    /*Half of screen width*/
    height: 35px;
    font-weight: 700;
    color: white;
    text-align: center;
    text-decoration: none;
    padding-top: 12px;
}

/*Suggestions from Copilot to add hover effect on bottom tabs*/
#bottom-tab a:hover {
    background-color: darkgreen;                /*Changes background color of bottom tabs when hovered*/
}
#bottom-tab a:active {
    background-color: lightgreen;               /*Changes background color of bottom tabs when clicked*/
}
#bottom-tab a:first-child {
    float: left;                                  /*Aligns the first tab to the left*/
}
#bottom-tab a:last-child {
    float: right;                                 /*Aligns the last tab to the right*/
}
#bottom-tab a:nth-child(2) {
    margin: 0 auto;                               /*Centers the second tab in the middle of the bottom tabs*/
}
#bottom-tab a:nth-child(2):hover {
    background-color: darkolivegreen;           /*Changes background color of the second tab when hovered*/
}

/**************************** MAIN **********************/
#main {
    margin-top: 119px;                            /*Leaves space of 119px from top of screen till top of main section. The 119px is derived from height of header(80px) + height of top tabs (40px) - 1px border = 119px*/
    background: url('images/map-blur.png');       /*Sets the background image for the main section*/  
    background-repeat: repeat-y;                  /*Repeats the image vertically until the full height of the screen*/
}

#content {
    padding-top: 1px;                             /*Adds padding around the content*/
    padding-bottom: 50px;                         /*Ensures that padding is included in the total width and height calculations*/
}

/**************************** INFO BOX **********************/
a.info-box {
    text-decoration: none;                        /*Removes underline from hyperlinks*/
    background: rgba(255, 255, 255, .8);        /*Sets a semi-transparent white background for the info box*/
    width: 90%;                                   /*Sets the width of the info box to 90% of the parent element*/
    height: 90px;                                 /*Sets the height of the info box to 90px*/
    display: block;                               /*Makes the info box a block-level element*/
    margin: auto;                                 /*Centers the info box horizontally within its parent element*/
    margin-top: 12px;                             /*Adds a a gap of 12px between info boxs*/
    padding: 1px;                                 /*Adds padding of 1px around the content inside the info box*/   
}

.info-box img {
    float: left;                                  /*Floats the image to the left side of the info box*/
    height: 70px;                                 /*Sets the height of the image to 80px*/
    margin: 10px;                                 /*Adds a right margin of 10px to create space between the image and text*/
}

.info-box h3 {
    padding: 0;                                    
    margin-bottom: 0;                             /*Removes default margin from the heading*/
    width: 90%;
    color: #572800;                             /*Sets the text color of the heading to a dark brown color*/    
}

.info-box p {
    padding: 0;                                   
    margin: 0;                                
    width: 90%;
    color: #131313;                             /*Sets the text color of the paragraph to a dark gray color*/
}

.info-box img.right {
    float: right;                                 /*Floats the image to the right side of the info box*/
    margin-top: 25px;                            
    height: 40px;                                 /*Sets the height of the image to 40px*/
}

/**************************** INFO BOX FULL **********************/
#info-box-full {
    background: rgba(255, 255, 255, 0.8);       /*Sets a semi-transparent white background for the info box*/
    width: 90%;                                   /*Sets the width of the info box to 90% of the parent element*/
    height: 90px;                                 /*Sets the height of the info box to 90px*/
    display: block;                               /*Makes the info box a block-level element*/
    margin: auto;                                 /*Centers the info box horizontally within its parent element*/
    margin-top: 12px;                             /*Adds a gap of 12px between info boxes*/
    padding: 10px;                                /*Adds padding of 10px around the content inside the info box*/   
}

#info-box-full img {
    width: 100%;                                    /*Sets the width of the image to 100% of the parent element*/
}

#info-box-full h1 {
    text-align: center;
}