/* 
CSS layout design elements for translate science
*/

body {
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
    font-size: 17px;  
 }

h1{
  font-size: 40px;  
}

h2 {
  font-size: 34px;  
}

 /* create the header grid which will contain link to various other services*/
.topnav {
    display: grid;
    grid-template-columns: 165px auto auto auto auto auto auto;
    grid-template-rows: 43px auto auto;
    margin-bottom: 1em;
}

/* the logo need to take up multiple rows so the links can populate the open grid containers correctly */
.logo {
    grid-row: 1 / 4;
    margin-top: 8px;
    margin-right: 16px;
    margin-left: 16px;
    margin-bottom: 8px;
}

/* Style the links inside the navigation bar */
.topnav a {
    grid-row: 2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold;
    font-size: 17px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon{
    display: none;
}
/* Hide the spacer that is required to the the topnav look right when expanded */
.topnav .spacer{
    display: none;
}

/* Responsive layout - when the screen is less than 950px wide (medium) change the margins, driven by the length of the top nav links */
@media screen and (max-width: 950px) {
    body {
        margin-left: 10%;
        margin-right: 10%;
    }
}

 /* When the screen is less than 720 pixels wide: */
@media screen and (max-width: 720px) {
/* change the margins for a small screen */
    body {
        margin-left: 5%;
        margin-right: 5%;
    }
/* change the grid layout for vertical display of top nav collapased (1 100x54px grid container)*/
    .topnav {
        grid-template-columns: 165px 100px 60px auto;
        grid-template-rows: 43px 54px auto;
    }
/* hide all links, except for the first one ("Home") */
    .topnav a:not(:first-of-type) {
        display: none;
        }
/* Show the link that contains should open and close the topnav (.icon) */
    .topnav a.icon {
        display: inline;
        grid-column:3;
    }
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav display the links vertically instead of horizontally) */
/* change the grid layout for vertical display of top nav expanded (4 100x54px grid containers)*/
    .topnav.responsive {
        grid-template-columns: 165px 100px 60px auto;
        grid-template-rows: 43px 54px 54px 54px 54px auto;
    }
/* Show the spacer that is required to the the topnav look right when expanded */
    .topnav .spacer{
        display: inline;
    }
    .topnav.responsive a {
        display: inline;
        grid-row: auto;
        grid-column: 2;
    }
    .topnav.responsive a.icon {
        grid-row: 2;
        grid-column:3;
    }
}