/* Add Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=BenchNine:wght@300&family=Jomhuria&family=Josefin+Sans:wght@300&family=Neucha&display=swap');
    header{
        background-color: #ffbb19;
        padding:20px;
        position:fixed;
        z-index:4;
        height:200px;
        display: flex;
        align-items: center;
    }
    #main-navigation{
        width:400px;
        height:500px;
        border: 4px solid #46bbec;
        border-radius:12px;
        background-color:#ffbb19;
        text-align:center;
        display:inline-block;
        margin-left:10%;
        margin-top:20px;
        position: fixed;
        z-index: 9999
     
    }
    #home-page{
        margin-top:200px;
    }
    .modal-top{
        height:100px;
        width:100%;
        padding-left:280px;
    }
    #modal-nav{
        list-style-type:none;
        color:#279ad6;
    }

    .nav-link{
        font-family: 'Amatic SC', cursive;
        font-size:2.4em;
        letter-spacing: .16em;
        list-style-type:none;
        cursor:pointer;
    }

    #reg-nav{
        list-style-type:none;
        width:100%;
        margin: 0;
        padding: 0;
        text-align:center;
        overflow: hidden;
    }
    .reg-nav-item{
        font-family: 'Amatic SC', cursive;
        color:#279ad6;
        font-size:1.8em;
        letter-spacing: .16em;
        list-style-type:none;
        float:left;
        margin-right:30px;
        
    }
    .reg-nav-link{
        text-align: center;
        display: block;
        text-decoration: none;
        color: inherit;
    }
    
    .reg-nav-link:hover{
        text-decoration: none;
    }
    #logo-image, #willpetersoncomics-image, #bars-image{
        width:100%;
    }
    #logo-image{
        max-width:120px;
    }
    #willpetersoncomics-image{
        max-width:800px;
    }
    button:focus{
        outline:none;
    }
    #times-image{
        height:85px;
    }

    .navbar-brand img{
        width:80%;
    }
    .full-page{
        scroll-margin-top:200px;
        margin-top:40px;
    }
    body{
        background:#18191a;
        text-align:center;
        margin: 0 auto;
    }
    #wrapper{
        background-color:#ffffff;
        max-width:1200px;
        text-align:center;
        display:inline-block;

    }
    .header-text{
        color:#279ad6;
        font-family: 'Jomhuria', cursive;
        text-align:center;
        letter-spacing: .1em;
    }
    .sub-header-text{
        color:#7DC2E6;
        font-family: 'Jomhuria', cursive;
        text-align:center;
        letter-spacing: .08em;
    }
    
    .copy-text{
        text-align:center;
        margin:0 auto;
        padding:10px;
        max-width:800px;
        font-family: 'Josefin Sans', sans-serif;
    }
    .copy-text p {
        text-align:left;
    }
    .feature-content{
        text-align:center;
    }
    .slide-text{
        width:85%;
        margin:auto;
        
    }
    /* Home Page Info*/
    .slide-wrap{
        max-width:1000px;
        margin: 0 auto;
        transition:300ms;
        text-align:center;
        display:inline-block;
        margin-top:20px;
    }
    .slide-wrap img{
        width:100%;
        position:relative;
        z-index: 0;
    }
    .feature-image{
        max-width:1000px;
        margin: 0 auto;
        transition:300ms;
        text-align:center;
        display:inline-block;
        margin-top:20px;
        margin-bottom:10px;
    }
    .feature-image img{
        width:100%;
        position:relative;
        z-index: 0;
    }
    .slideshow { 
        position: relative;
      }
.slide-nav { 
    display: flex;
    justify-content: space-between;
    align-items:center;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    list-style: none;
    padding: 0;
    z-index: 1;
  }
  .slide-nav li {
    cursor: pointer;
    color:#ccc;
    font-size:25px;
  }
    .next-slide{
        width:7%;
        margin-right:4%;
        opacity:60%;
    }
    .next-slide:hover{
        opacity:100%;
    }
    .prev-slide{
        width:7%;
        margin-left:4%;
        opacity:60%;
        visibility:hidden;
    }
    .prev-slide:hover{
        opacity:100%;
    }

    /* Tooltip container */
.feature-image {
    position: relative;
    display: inline-block;
    cursor:pointer;
  }

.comics-image{
    width:90%;
    display:inline-block;
    text-align:center;
    margin-bottom:20px;
}
.my-video{
    margin-bottom:40px;
}
.my-video iframe{
    width:90%;
    max-width:560px;
}
.self img{
    width:75%;
    max-width:500px;
}
footer{
    background-color: #ffbb19;
    z-index:4;
    height:200px;
    width:100%;
    text-align:center;
}
footer ul{
    list-style:none;
    display:inline;
    
}
footer ul li{
    display:inline;
    padding:20px;
    font-size:40pt;
    color:#68b9e7;
    border-radius:2px;
    text-shadow: 0  1px 1px #1c1d83;

}
.modal-dialog{
    pointer-events:all;
}
.show-button{
    background-color:#ffbb19;
    color:white;
    padding:10px;
    border-style:none;
    cursor:pointer;
    letter-spacing:3px;
    scroll-margin-top:220px;
}
.show-button:hover{
    background-color:#ff9000;
}
#comic-wrapper{
    display:none;
}
#looseleaf{
    display:none;
}
#extra-videos{
    display:none;
}
#fhb{
    width:90%;
    max-width:800px;
}