html{
    scroll-behavior: smooth;
}

body{
    font-family: "Lato", sans-serif;
}

ul{
    list-style:none;
}
ol li{
    padding: 0.65%;
}

.navbar {
    font-family: "Roboto Slab", serif;
}


.jumbotron-orange{
    background-size: cover;
    color: rgba(255, 255, 255, .85);
    font-family: "Roboto Slab", serif;
    height: 45vh;
    margin-bottom: 2vh;
    padding: 2% 5%;
    display: flex;
    align-items: center;
}

#pottervalleyjumbotron{
    background-image: linear-gradient(to right bottom, rgba(161, 70, 25,0.8), rgba(161, 70, 25,0.8)), url("../img/new_potter_valley.jpg");
    margin-top:11vh;
    background-position: 0% 26%;
    margin-top: 10vh;
}

#sound-videos--jumbotron{
    background-image: linear-gradient(to right bottom, rgba(161, 70, 25,0.8), rgba(161, 70, 25,0.8)), url("../img/shoodaxay_coyote_valley.png");
    margin-top: 2vh;
    background-position: 0% 5%;
}

.jumbotron-orange p{
    color: rgba(255, 255, 255, .75);
    font-size: 1rem;
    padding: 0% 17%;
}

.jumbotron-orange h1{
    font-size: 4rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.jumbotron-orange a{
    color: currentColor;
}

/*.img-round{
    height: 15rem;
    width: 15rem;
    border-radius: 50%;
}*/

#sound-intro{
    color: #474747;
    padding: 2% 15%;
    font-size: 1.35rem;
    text-align: justify;
}

.sound-chart{
    font-family: "Roboto Slab", serif;
}

.sound-chart__table{
    font-size: 1.5rem;
    margin-top: 2rem;
}
.sound-chart__table td{
    padding: 1rem;
    margin: .05rem;
    transition: all 0.15s ease-in-out;
    height: 10vh;
    cursor: pointer;
}

.sound-chart__table td:hover{
    color: #fff;
    background-color: #ad5c33;
}

.table-striped tr:nth-child(even){
    background-color: #FFF5E6;
}

.table-striped tr:nth-child(odd){
    background-color: #FFF !important;
}

.text-burntorange:link, .text-burntorange:visited {
    color:#ad5c33;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.text-burntorange:hover {
    color:#cc5b22;
}

#sound-videos--content{
    text-align: center;
    font-family: "Roboto Slab", serif;
    padding-top: 2%;
    padding-bottom: 4%;
}

#sound-videos--content .btn{
    margin: 2%;
}

.modal video{
    min-width: 100%;
    max-width: 100%;
    max-height: 75vh;
}

.footer{
    background-color: #e0e0e0;
    padding-top: 3rem;
    padding-bottom: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-top: 1rem;
    font-family: "Roboto Slab", serif;
    font-size: 1.25rem;
}

/* styling the word example button inside of the table */
.btn-orange {
    background-color: #fde6c5 !important;
    margin-left: -0.5rem;
    transition: all 0.2s ease-in-out;
}

.btn-orange:hover {
    color: white !important;
    background-color: rgb(192, 97, 50) !important;
}

.btn-outline-secondary--specialCharacterButton{
    margin: .15rem;
    margin-top: .75rem;
    font-size: 1.5rem;
    width: 3rem;
}

.btn-outline-secondary:hover{
    color: #fff !important;
}

/*.btn{
    transition: all 0.2s ease-in-out;
}
.btn:hover{
    transform: translateY(-.25rem);
}

.btn:active{
    transform: translateY(-.25rem) scale(.85);
}*/

@media(max-width:1200px){
    .modal video{
        max-height: 45vh;
    }
}

@media(max-width:1000px){
    #sound-intro{
        padding: 2% 7%;    
    }
}

@media(max-width: 900px){
    .jumbotron-orange p{
        padding: 1rem;
    }

    .modal video{
        max-height: 25vh;
    } /* all of these media queries for the modal videos exist because some of the videos have different aspect ratios. Without these media queries, the
    t ejective video and the ch ejective video get some extra annoying white space above them, so that they are the same size as 
    the others. Ideally, Cathy should just redo them all so that they are consistent. I have checked the videos across a few devices,
    and I think I have handled the whitespace. Most of the videos have an aspect ratio of 1.6, but the ejective t and ch videos use 1.04. */
}

@media(max-width: 600px){
    .jumbotron-orange p{
        padding: 0;
    }

    .sound-chart{
        margin-top: 1vh;
    }

    .sound-chart__table{
        font-size: 1rem;
    }

    .sound-chart__table td{
        font-size: 1.2rem;
        padding: .5rem;
    }

    .jumbotron-orange h1{
        font-size: 2.5rem;
    }

    .col-xs-12{
        margin-top: 0rem;
    }
}

@media(min-width: 1800px){
    html{
        font-size: 150%;
    }

    #sound-intro{
        padding: 2% 0%;
    }
}