/* google FONTS */
/* 
font-family: 'Cinzel', serif;
font-family: 'Lato', sans-serif;
font-family: 'Roboto Slab', serif; 
*/

/* Collapse header nav when viewp width < 620px  */
/* Turn off header nav animation when viewp < 770 px */

body, html { margin: 0; padding: 0; width: 100%; height: 100%; scroll-behavior: smooth; }

form {margin-left: 5px; margin-right: 5px; margin-top: 20px;}

section div {margin-left: 5px; margin-right: 5px; margin-top: 5px;}

a { text-decoration: none;}

/* .gb_button { text-transform:uppercase; padding:10px 30px 10px 30px; display:inline-block; margin:10px 0 20px 50px;} */

.gb_button { text-transform:uppercase; padding:10px 30px 10px 30px; display:inline-block; }

#gb_meta_nav ul li a { color:rgb(0, 0, 0);}

footer {    
            /* height: 4rem; */
            width:100%; 
            /* height:100px;  */
            background-color: #fff; 
            text-align: center;
            /* margin-top: 40em; */
            /* margin: 0 auto; */
            position: relative;
            bottom: 0;
            /* overflow: scroll; */
        }

#gb_meta_nav {
    background-color: #fff;
    /* overflow: hidden; */
    /* position: relative; */
    bottom:5px;
    width: 100%;
  }

p, #startpage .gb_button, #sounds .gb_button, .info, #buddhism .gb_button
{ color: #fff; }

a, header nav ul li a, header nav ul li
{ color:#3b4b59; }

/* p 
{ color:#000; } */

header nav ul li a:hover, footer nav ul li a:hover
{ color:#111; }

div.mobile_nav { display: block; }

/* Hide the links inside the navigation menu */
div.mobile_nav #mobile_links { display: none; }

#mobile_links {
    position: relative;
    top: -5px;
    background-color: #cc6324;  
    overflow: scroll;  
    width: 100%
}

/* Style navigation menu links */
div #mobile_links a {
    color: #3b4b59;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    display: block;
  }

  /* Style the hamburger menu */
  header a.icon {
    text-align: center;
    display: block;
    position: absolute;
    right: 50%;
    top: 14px;
  }

  /* Add a grey background color on mouse-over */
  header a:hover {
    background-color: #d9d2c6;
    color: #3b4b59;
  }

  header a.icon {display: none;}
  header div.mobile_nav {display: none;}
/* When the screen is less than 630 pixels wide, hide all links */
@media screen and (max-width: 630px) {
    header nav {display: none;}
    header div.mobile_nav {display: block;}
    header a.icon {display: block;}
    
  }
  
h2.sec_h2
{ 
    text-align: left;
    color:#111;
    border-radius: 5px;
    background-color: #ffdc9b;
    padding: 8px 8px;
    margin-right: 5px;
    margin-left: 5px;
    width: 330px;
    position: relative;
    top: 40px;
    font-size: 2em;
    
}

h2.answer
{ 
    text-align: left;
    color:#111;
    border-radius: 5px;
    background-color: #9bcfff;
    padding: 8px 8px;
    margin-right: 5px;
    margin-left: 5px;
    width: 330px;
    position: relative;
    top: 50px;
    left: 20px;
    font-size: 2em;
}

header nav ul li, footer nav ul li, div #mobile_links a, .gb_button
{ 
    font-family: 'Lato', sans-serif;
    /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  */
}

p, h2, .info
{ 
    font-family: 'Roboto Slab', sans-serif;
    /* font-family: 'Lato', sans-serif; */
    /* font-family:Arial, Helvetica, sans-serif;  */
}

@media screen and (min-width: 770px) {
    header, header nav ul li a, header nav ul, #gb_logo, #gb_logo img
    {transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; -transition: all 30ms;}
}

.gb_page { width: 100%; height: 100%; overflow: scroll; float: left; position:relative;}

header {position: fixed; z-index:99; top:0; left:0; right:0; width:100%; height:40px; background: #fff6e8; }

header #gb_logo {float:left; width:80px; margin:9px 0 0 8px;}
header #gb_logo img {height:31px; }

header nav { float: right; height: 40px; margin:0; padding:0; }
header nav ul { margin:20px 8px 0 0; padding: 0;}
header nav ul li {margin:0 20px 0 0; padding: 0; list-style: none; float: left;}
header nav ul li a { text-transform: uppercase; font-size: 16px;}
/* header nav ul li a:hover {  background-color: rgb(162, 254, 119); } */

@media screen and (min-width: 770px) {
    header:hover {height: 70px;}
    header:hover > #gb_logo { width: 140px; }
    header:hover > #gb_logo img {height:61px; }
    header:hover > nav ul { margin:26px 20px 0 0; }
    header:hover > nav ul li a { font-size: 17px;}
}

footer nav ul li {list-style: none;}


#startpage {
    background-image: url("img/mountain.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size: 100%;
    background-size: cover;
}
#startpage .gb_button { 
    position: relative;
    top: 100px;
    left: 5px;
    border:2px solid #fff ; 
    border-radius: 5px;
    background-color: #cc6324;
}

#sounds {
    background-image: url("img/crystal.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size: 100%;
    background-size: cover;
}

#sounds .gb_button { 
    position: relative;
    top: 30px;
    border:2px solid #fff ; 
    border-radius: 5px;
    background-color: #cc6324;
    margin:5px;     
}

#sounds .info {
    background-color: #3b4b59;
    margin: 5px;
    padding: 5px;
    /* border: 1px solid #fff; */
    list-style: none;
    border-radius: 5px;
    position: relative;
    top: 30px;
}

#buddhism {
    background-image: url("img/bodhi.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size: 100%;
    background-size: cover;
}

#buddhism .gb_button { 
    position: relative;
    top: 30px;
    border:2px solid #3b4b59 ; 
    border-radius: 5px;
    background-color: #cc6324;
    margin:5px;     
}

#buddhism .info {
    background-color: #3b4b59;
    margin: 5px;
    padding: 5px;
    /* border: 1px solid #fff; */
    border-radius: 5px;
    position: relative;
    top: 30px;
}

#buddhism a { color:white;}

#code {
    background-image: url("img/fields.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size: 100%;
    background-size: cover;
}
#code .gb_button { 
    position: relative;
    top: 30px;
    border:2px solid #3b4b59 ; 
    border-radius: 5px;
    background-color: #cc6324;
    margin:5px;     
}

#code .info {
    background-color: #3b4b59;
    margin: 5px;
    padding: 5px;
    /* border: 1px solid #fff; */
    border-radius: 5px;
    position: relative;
    top: 30px;
}

#code a { color:white;}

#music {
    background-image: url("img/leaf2.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size: 100%;
    background-size: cover;
}
#music .gb_button { 
    position: relative;
    top: 30px;
    border:2px solid #3b4b59 ; 
    border-radius: 5px;
    background-color: #cc6324;
    margin:5px;     
}

#music .info {
    background-color: #3b4b59;
    margin: 5px;
    padding: 5px;
    /* border: 1px solid #fff; */
    border-radius: 5px;
    position: relative;
    top: 30px;
}

#music a { color:white;}


#about {
    background-image: url("img/canyon.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size: 100%;
    background-size: cover;
    padding-bottom: 100px;
    position: relative;
    overflow: scroll;
    display: block;
    min-height: 100vh;
}

#about .gb_button { 
    position: relative;
    top: 30px;
    border:2px solid #3b4b59 ; 
    border-radius: 5px;
    background-color: #cc6324;
    margin:5px;     
}

#about .info {
    background-color: #3b4b59;
    margin: 5px;
    padding: 5px;
    /* border: 1px solid #fff; */
    border-radius: 5px;
    position: relative;
    top: 0px;
    overflow: scroll;
}

#about a { color:white;}

#about h2.sec_h2
{ 
    text-align: left;
    color:#111;
    border-radius: 5px;
    background-color: #ffdc9b;
    padding: 8px 8px;
    margin-right: 5px;
    margin-left: 5px;
    width: 330px;
    position: relative;
    top: 10px;
    font-size: 1.5em;
    
}

section div {
    /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
    /* font-family: 'Lato', sans-serif; */
    font-family: 'Roboto Slab', sans-serif;
    font-size: 1.4em;
    border-radius: 5px;
    background-color: #ffdc9b;
    padding: 8px 8px;
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
    margin-left: 5px;
    position: relative;
    top: 300px;
}

@media screen and (max-width: 600px) {
    section div {
        /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
        /* font-family: 'Lato', sans-serif; */
        font-family: 'Roboto Slab', sans-serif;
        font-size: 0.9em;
        border-radius: 5px;
        background-color:#ffdc9b;
        padding: 2px;
        word-wrap: break-word;
        white-space: pre-wrap;
        word-break: break-word;
        /* position: relative; */
    }
}