html {
    box-sizing: border-box;
    font-size: 16px;
    font-family: 'Times New Roman', 'Cambria', 'Calibri', sans-serif, 'Arial Black';
    text-align: center;
    justify-content: center;
    justify-self: center;
    margin:0;
    padding:0;
    /* height:100%; */
    width:100%;
    /* max-width:1240px; */
}

body {
    box-sizing: border-box;
    width:100vw;
    /* max-width:1240px; */
    margin:0;
    padding: 0;
    /* background-image: url(../images/green_gradient.png); */
    /* background-color: rgb(0, 165, 0); */
    background-image: linear-gradient(rgb(0, 165, 0), rgb(0, 190, 0));
}
header, .myHeader {
    background-image: linear-gradient(rgb(0, 78, 0), rgb(0, 128, 0));
    /* background-image: linear-gradient(#18370d, #2a5d16); */
    padding: 0 2.0rem;
    width:100vw;
    /* max-width:1240px; */
}

.header{
    height:100px;
    width:100%;
    /* max-width:1240px; */
    font-family: "Arial Black";
    font-weight: bolder;
    line-height:auto;
    padding: 0.5rem 1.0rem 0.5rem 6rem;
    /* margin:0; */
    /* background-image: url(../images/headerbkrd.png); */
}
.headContainer, .footContainer{
    padding:0;
    margin:0;
    width:100%;
    /* max-width:1240px; */
    max-height:180px;
/* I added the margin & max height sections of this to see if they would work */
}
.headContent{
    width:100%;
    margin: 1rem 0.5rem;
}
nav{
    border: 0.5rem white solid;
}

.splash-container, .movie-container, .people-container{
    padding: 1rem 4rem;
}

.splash {
    display: block;
    cursor: pointer;
}

.pop{
    margin: 1rem 0 2rem 0;
}

.cast{
    justify-content: space-evenly;
}

.rate{
    margin:0.75rem 0 0 0 ;
}

.info{
    margin-bottom: 10rem;
}

.dot{
    height:30px;
    width:30px;
    line-height:30px;
    background-color: darkgreen;
    border-radius: 50%;
    display: inline-block;
    margin:1rem 2.5rem -1rem -2.5rem;
    position: absolute;
    color:white;
    font-weight:bold;
}
.largeDot{
    height:40px;
    width:40px;
    line-height:40px;
    background-color: darkgreen;
    border-radius: 50%;
    display: inline-block;
    margin:-17rem -3.5rem 17rem 3.5rem;
    position: absolute;
    color:white;
    font-weight:bold;
    font-size: larger;
}
.cover{
    width:145px;
}

.movieDetail{
    display:flex;
    justify-content: space-evenly;
}
/* .movie-rate{
    margin:-1.5rem -1rem 1rem 0.5rem;
} */
/* .rated{
    margin:0.5rem 0rem 0rem 0rem;
} */
.megDetails{
    padding-top:1rem;
}
.video{
    margin: 0 -1.5rem 1rem 1.5rem; 
}
.character-name{
    margin:-2.0rem 0 1rem 0;
}
.peopleDetail{
    display:flex;
    justify-content: space-evenly;
    margin:0.5rem 0;
}
.peopleDetail > p{
    margin: 0 1rem;
}

.castBio{
    margin-bottom:2rem;
}

.slot{
    min-height: 8.0rem;
    margin: 1.0rem 0.75rem;
    justify-content: center;
}
.slot > img {
    width:100%;
    /* height:100%; */
}

.fixSize{
    width: 100px;
    height:170px;
}
.people-photo-slider > .slick-list > .slick-track > .slot > .fixSize{
    width: 180px;
    height:200px;
}

.largeFix{
    height:300px;
}

.fix{
    z-index:100;
}
.logoCon{
    padding-left:3rem;
}
.logoBox{
    width:65%;
    padding-top:0.5rem;
}
.search-picture{
    max-width:100px;
    width:100px;
    /* float:right; */
    margin-bottom:1rem;
}
.search-picture > img{
    max-width:100px;
    width:100px;
    /* float:right; */
}
.search-text{
    float:left;
    text-align:left;
    margin:-1rem auto 1rem auto;
}
#searchBox{
    margin-left:5rem;
    margin-right:-5rem;
}
input[type="text"] {
    width:260px;
    height:30px;
    /* text-decoration-color: white; */
    text-emphasis-color: black;
}
/* Don't know why but none of the below placeholder code are working */
.mySearch::placeholder {
    color:#008000;
    /* color:white; */
    opacity:1;
}
#search::placeholder {
    color:#008000;
    opacity:1;
}
input::placeholder {
    color:#008000;
    opacity:1;
}
#search{
    margin-top:0.25rem;
    margin-bottom:0rem;
    width:200px;
}
#searchList{
    width:300px;
}
.myTrivia{
    padding:0rem 0.5rem;
}
/* #trivia{
    column-count: 3;
    column-gap: 1rem;
    column-rule:3px black solid;
    column-span: all;
} */
.myCol{
    column-count:2;
    column-gap: 1rem;
    column-rule:3px black solid;
    column-span: all;
    /* justify-content: center; */
}
.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
.right{
    justify-self: right;
    right:0;
    align-self: right;
}
.left{
    justify-self: left;
    left:0;
}
.bottomSpace{
    margin-bottom:1.5rem;
}

/* .doBefore::before {

    font-size: 12px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    content: 'RAY WAS HERE';
    text-align: center;
    opacity: 1.0;
    color: black;
} */

/* Slick Mods */
.slick-dots {
    bottom:-5px;
}
.slick-dots li button::before {
    font-size: 12px;
    color:white;
    opacity:1.0;
}
.slick-prev::before, .slick-next::before {
    font-family: 'slick';
    font-size: 40px;
    line-height: 0;
    opacity: 1.0;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 10000;
}
.slick-prev {
    left: -35px;
    top: 170px;
}    
.slick-next {
    right: -15px;
    top: 170px;
}

/* .people-photo-slider > .slick-prev {
    left: -35px;
    top: 100px;
}    
.people-photo-slider > .slick-next {
    right: -15px;
    top: 100px;
} */

.myphotos > .slick-prev {
    left: -35px;
    top: 100px;
}    
.myphotos > .slick-next {
    right: -15px;
    top: 100px;
}

footer{
    height:100px;
    padding: 0rem;
    bottom:0;
    width:100vw;
    /* width: 100vw; */
    margin:0;
    /* position: fixed; */
}
.footBox{
    height:100px;
    width:100vw;
    margin:0;
    bottom:0;
    justify-content: center;
}
.footContainer, .footBox {
    /* width:100%; */
}
.footImage{
    height:80px;
    margin:0.5rem 0;
}
footer > .grid-x{
    margin-left:0rem;
    margin-right:0rem;
}

.credits{
    margin: 2rem 0;
    justify-self: left;
}
.none{
    margin:0;
}

@media print, screen and (max-width: 600px) {
    html, body{
        
    }
    .movie-container > article > .megDetails{
        margin: 0.5rem 0 0 0.5rem;
    }
    header{
        justify-content: center;
        justify-self: center;
    }
    .headContainer{
        justify-content: center;
        justify-self: center;
    }
    .myHeader{
        display:flex;
        justify-self: center;
        justify-content: center;
        padding:0.5rem;
        width:100vw;
    }
    .header{
        display:flex;
        justify-self: center;
        justify-content: center;
        padding:0;
        width:100vw;
        height:200px;
    }
    .logoCon{
        width:300px;
        margin: 0rem -2.5rem 0rem 2.5rem;
    }
    .logoBox{
        width:100%;
        padding-top:2rem;
        justify-content: center;
        justify-self: center;
    }
    #searchBox{
        margin:2rem 7rem -2rem -7rem;
    }

    .headContent{
        /* margin: 1rem -0.5rem -0.5rem 0.5rem; */
        justify-content: center;
        justify-self: center;
        padding-top:4.5rem;
    }

    input[type="text"] {
        width:300px;
    }
    .info{
        margin-bottom: 6rem;
    }
    .rate{
        margin:0rem 0 0.75rem 0 ;
    }

    .slot > p{
        font-size:10px;
    }

    .video{
        margin: 0.5rem auto; 
    }

    .fixSize{
        height:100%;
        margin:2rem 0;
    }

    footer{
        display:flex;
        justify-content: space-evenly;
        flex-direction: row;
        /* position: fixed; */
        /* width:100%; */
        bottom:0;
    }
    .footBox{
        justify-content: center;
        bottom:0;
    }
    footer > .grid-x{
        /* margin-left:2.5rem; */
        /* margin-right:-2.5rem; */
    }
    .foot{
        width:100px;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .credits{
        margin:1rem 0;
        padding:0.5rem 0;
    }
    .footImage{
        width:120px;
        float: left;
    }
    #social{
        width:120px;
    }
    .none{
        display:none;
    }
}

.pink {
    background-color: pink;
}

.white {
    background-color: white;
}
.whiteText{
    color:white;
}
.blackText{
    color:black;
}

.lightGreen{
    color: rgb(0, 255, 0);
}
.light-green{
    background-color: rgb(0, 255, 0);
}

.dark-green{
    background-color: rgb(0, 100, 0);
}

.Green {
    color: #008000;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}
.white {
    background-color: white;
}
.black {
    background-color: black;
}
.callout {
    border: none;
    z-index:1;
}

.out {
    border: none;
    padding:0.75rem;
    margin:1rem 0;
    width:110%;
}

.sub {
    /* width:100vw; */
    margin-bottom: -0.25rem;
}

.hideAll {
    display: none;
}

.space{
    margin-bottom: 6rem;
}

.smallSpace{
    margin-bottom: 2rem;
    justify-content: space-evenly;
}