@font-face {
    /* This is the title font for the site, it is a 100% free to use font as long as money is not gained from the font*/
    font-family: 'VCRosdNEUE';
    src: url('VCRosdNEUE.ttf');
    font-weight: 500;
    font-style: normal;
}

.active-link {
    /* This makes it so the navigation category keeps a red background when a user clicks that link. For example, if a user clicked on reviews, they would be taken to the reviews page with the button staying red. This makes it so users never forget where they are on the site*/
    background-color: #ef4a38;
    color: white;
}

.non-active-link {
    /* This keeps all of the other buttons beige, except for the active link.*/
    background-color: #efeade;
    color: black;
}

.header-image {
    /*The header image takes an element from the landing pages design and increases the width. The text "3 Act Life" in the header image is apart of the image*/
    width: 775px;
    height: 80px;
    position: absolute;
    top: 0px;
    z-index: -1;
}

.header {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'VCRosdNEUE';
    z-index: 1;
}

.signature {
    /*The Signature is the box at the bottom of the site that says "created with passion by mitchell oneill. This does not link anywhere, it also does not have a hover state.*/
    font-family: 'VCRosdNEUE';
    background-color: black;
    font-size: 14px;
    color: #efeade;
    text-align: center;
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 170px;
    top: 670px;
}

.buy-me-a-coffee {
    /*This is a button on the bottom of the site, it links to a page where users can donate money to me if they like my content or the website*/
    font-family: 'VCRosdNEUE';
    background-color: #1f2b5b;
    font-size: 13px;
    color: #efeade;
    text-align: center;
    width: 225px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 660px;
    left: 445px;
}

.letterboxd {
    /*This is a button on the bottom of the site, it links to my Letterboxd profile. There users can connect with me and see all of the films I've ever watched and rated*/
    font-family: 'VCRosdNEUE';
    background-color: #efeade;
    border: 5px solid #1f2b5b;
    font-size: 12px;
    color: #1f2b5b;
    text-align: center;
    width: 95px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 660px;
    left: 690px;
}

body {
    margin: 0;
    background-color: #efeade;
    align-items: center;
    justify-content: center;
}

.container {
    margin-top: 15px;
    max-width: 960px;
    padding: 20px;
    position: relative;
}

nav {
    text-align: center;
    top: 100px;
    position: absolute;
    z-index: 2;
}

nav ul {
    list-style-type: none;
    padding: 0;
    position: relative;
}

nav ul li a {
    background-color: #efeade;
    text-decoration: none;
    font-family: 'VCRosdNEUE', sans-serif;
    color: #333;
    font-size: 18px;
    display: block;
    border: 5px solid #1f2b5b;
    padding: 10px;
    width: 200px;
    position: relative;
    margin-bottom: 20px;
    /* Space between navigational items */

}

nav ul li a:hover {
    background-color: #ef4a38;
    text-decoration: none;
    font-family: 'VCRosdNEUE', sans-serif;
    color: #FFFFFF;
    z-index: 1;
}

/*Every single vertical and horizontal line is a major pain, lining everything up for mobile and for web versions was an absolute nightmare.*/

.vertical-line-2 {
    position: absolute;
    left: 60px;
    top: 80px;
    bottom: 0;
    width: 5px;
    height: 575px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.vertical-line-3 {
    position: absolute;
    left: 130px;
    top: 80px;
    bottom: 0;
    width: 5px;
    height: 575px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.vertical-line-4 {
    position: absolute;
    left: 190px;
    top: 80px;
    bottom: 0;
    width: 5px;
    height: 425px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.vertical-line-5 {
    position: absolute;
    left: 150px;
    top: 650px;
    bottom: 0;
    width: 5px;
    height: 40px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.vertical-line-6 {
    position: absolute;
    left: 761px;
    top: 650px;
    bottom: 0;
    width: 4.5px;
    height: 25px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.vertical-line-9 {
    position: absolute;
    left: 495px;
    top: 650px;
    bottom: 0;
    width: 5px;
    height: 20px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.vertical-line-10 {
    position: absolute;
    left: 615px;
    top: 650px;
    bottom: 0;
    width: 5px;
    height: 20px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.horizontal-line-1 {
    position: absolute;
    left: 60px;
    top: 650px;
    bottom: 0;
    width: 705px;
    height: 5px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.horizontal-line-2 {
    position: absolute;
    left: 155px;
    top: 685px;
    bottom: 0;
    width: 15px;
    height: 5px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.horizontal-line-4 {
    position: absolute;
    left: 665px;
    top: 675px;
    bottom: 0;
    width: 25px;
    height: 5px;
    background-color: #1f2b5b;
    z-index: 0;
    /* Adjusted lower z-index to place it behind the navigation */
}

.content-div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    left: 275px;
    top: 90px;
    width: 519px;
    height: 540px;
    overflow-y: scroll;
}

/*All of this webkit stuff is for a scrollbar that the category and blog-template pages use*/


.content-div::-webkit-scrollbar {
    width: 5px;
    /* Width of the scrollbar */
}

.content-div::-webkit-scrollbar-track {
    background-color: #f79186;
    /* Color of the scrollbar track */
}

.content-div::-webkit-scrollbar-thumb {
    background-color: #1f2b5b;
    /* Color of the scrollbar thumb */
}


.page-title {
    /*Here is the title for the review or film*/
    font-family: 'VCRosdNEUE';
    font-size: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 480px;
    height: 40px;
}

.page-description {
    /*Here is the description for the review or film*/
    font-size: 16px;
    margin-top: -5px;
    margin-bottom: -40px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 150px;

}

/*Asteroid City web version*/

.blog-card-asteroid-city {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-asteroid-city .blog-title-asteroid-city,
.blog-card-asteroid-city .blog-blurb-asteroid-city {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-asteroid-city:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-asteroid-city:hover .blog-title-asteroid-city,
.blog-card-asteroid-city:hover .blog-blurb-asteroid-city {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-asteroid-city {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-asteroid-city {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-asteroid-city {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-asteroid-city {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*Across the Spiderverse web version*/

.blog-card-across-the-spiderverse {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-across-the-spiderverse .blog-title-across-the-spiderverse,
.blog-card-across-the-spiderverse .blog-blurb-across-the-spiderverse {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-across-the-spiderverse:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-across-the-spiderverse:hover .blog-title-across-the-spiderverse,
.blog-card-across-the-spiderverse:hover .blog-blurb-across-the-spiderverse {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-across-the-spiderverse {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-across-the-spiderverse {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-across-the-spiderverse {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-across-the-spiderverse {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*START OF REVIEWS PAGE*/

/*Barbie web version*/

.blog-card-barbie {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-barbie .blog-title-barbie,
.blog-card-barbie .blog-blurb-barbie {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-barbie:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-barbie:hover .blog-title-barbie,
.blog-card-barbie:hover .blog-blurb-barbie {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-barbie {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-barbie {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-barbie {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-barbie {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}


/*oppenheimer web version*/

.blog-card-oppenheimer {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-oppenheimer .blog-title-oppenheimer,
.blog-card-oppenheimer .blog-blurb-oppenheimer {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-oppenheimer:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-oppenheimer:hover .blog-title-oppenheimer,
.blog-card-oppenheimer:hover .blog-blurb-oppenheimer {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-oppenheimer {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-oppenheimer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-oppenheimer {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-oppenheimer {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*talk to me web version*/

.blog-card-talk-to-me {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-talk-to-me .blog-title-talk-to-me,
.blog-card-talk-to-me .blog-blurb-talk-to-me {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-talk-to-me:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-talk-to-me:hover .blog-title-talk-to-me,
.blog-card-talk-to-me:hover .blog-blurb-talk-to-me {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-talk-to-me {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-talk-to-me {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-talk-to-me {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-talk-to-me {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*past lives web version*/

.blog-card-past-lives {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-past-lives .blog-title-past-lives,
.blog-card-past-lives .blog-blurb-past-lives {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-past-lives:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-past-lives:hover .blog-title-past-lives,
.blog-card-past-lives:hover .blog-blurb-past-lives {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-past-lives {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-past-lives {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-past-lives {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-past-lives {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*bottoms web version*/

.blog-card-bottoms {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-bottoms .blog-title-bottoms,
.blog-card-bottoms .blog-blurb-bottoms {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-bottoms:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-bottoms:hover .blog-title-bottoms,
.blog-card-bottoms:hover .blog-blurb-bottoms {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-bottoms {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-bottoms {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-bottoms {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-bottoms {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*poor things web version*/

.blog-card-poor-things {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-poor-things .blog-title-poor-things,
.blog-card-poor-things .blog-blurb-poor-things {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-poor-things:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-poor-things:hover .blog-title-poor-things,
.blog-card-poor-things:hover .blog-blurb-poor-things {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-poor-things {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-poor-things {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-poor-things {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-poor-things {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*thanksgiving web version*/

.blog-card-thanksgiving {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-thanksgiving .blog-title-thanksgiving,
.blog-card-thanksgiving .blog-blurb-thanksgiving {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-thanksgiving:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-thanksgiving:hover .blog-title-thanksgiving,
.blog-card-thanksgiving:hover .blog-blurb-thanksgiving {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-thanksgiving {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-thanksgiving {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-thanksgiving {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-thanksgiving {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*theater camp web version*/

.blog-card-theater-camp {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-theater-camp .blog-title-theater-camp,
.blog-card-theater-camp .blog-blurb-theater-camp {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-theater-camp:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-theater-camp:hover .blog-title-theater-camp,
.blog-card-theater-camp:hover .blog-blurb-theater-camp {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-theater-camp {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-theater-camp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-theater-camp {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-theater-camp {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*START OF VOICES UNVEILED PAGE*/

/*girlhood web version*/

.blog-card-girlhood {
    margin-top: -20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-girlhood .blog-title-girlhood,
.blog-card-girlhood .blog-blurb-girlhood {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-girlhood:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-girlhood:hover .blog-title-girlhood,
.blog-card-girlhood:hover .blog-blurb-girlhood {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-girlhood {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-girlhood {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-girlhood {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-girlhood {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*el topo web version*/

.blog-card-el-topo {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-el-topo .blog-title-el-topo,
.blog-card-el-topo .blog-blurb-el-topo {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-el-topo:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-el-topo:hover .blog-title-el-topo,
.blog-card-el-topo:hover .blog-blurb-el-topo {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-el-topo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-el-topo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-el-topo {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-el-topo {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*the flavor of green tea over rice web version*/

.blog-card-the-flavor-of-green-tea-over-rice {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-the-flavor-of-green-tea-over-rice .blog-title-the-flavor-of-green-tea-over-rice,
.blog-card-the-flavor-of-green-tea-over-rice .blog-blurb-the-flavor-of-green-tea-over-rice {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-the-flavor-of-green-tea-over-rice:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-the-flavor-of-green-tea-over-rice:hover .blog-title-the-flavor-of-green-tea-over-rice,
.blog-card-the-flavor-of-green-tea-over-rice:hover .blog-blurb-the-flavor-of-green-tea-over-rice {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-the-flavor-of-green-tea-over-rice {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-the-flavor-of-green-tea-over-rice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-the-flavor-of-green-tea-over-rice {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-the-flavor-of-green-tea-over-rice {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*START OF QUICK FLICKS PAGE*/

/*rehearsals for retirement web version*/


.blog-card-rehearsals-for-retirement {
    margin-top: -20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-rehearsals-for-retirement .blog-title-rehearsals-for-retirement,
.blog-card-rehearsals-for-retirement .blog-blurb-rehearsals-for-retirement {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-rehearsals-for-retirement:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-rehearsals-for-retirement:hover .blog-title-rehearsals-for-retirement,
.blog-card-rehearsals-for-retirement:hover .blog-blurb-rehearsals-for-retirement {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-rehearsals-for-retirement {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-rehearsals-for-retirement {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-rehearsals-for-retirement {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-rehearsals-for-retirement {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*puparia web version*/

.blog-card-puparia {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-puparia .blog-title-puparia,
.blog-card-puparia .blog-blurb-puparia {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-puparia:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-puparia:hover .blog-title-puparia,
.blog-card-puparia:hover .blog-blurb-puparia {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-puparia {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-puparia {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-puparia {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-puparia {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*START OF THE SONIC VOYAGE*/

/*_____ web version*/

.blog-card-the-boogeyman {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 480px;
    height: 110px;
    border: 5px solid #1f2b5b;
    text-decoration: none;
    /* Remove default link underline */
}

.blog-card-the-boogeyman .blog-title-the-boogeyman,
.blog-card-the-boogeyman .blog-blurb-the-boogeyman {
    color: #000000;
    /* Change this to the desired text color for the title and blurb */
}

.blog-card-the-boogeyman:hover {
    background-color: #ef4a38;
    /* Change this to the desired hover background color */
}

.blog-card-the-boogeyman:hover .blog-title-the-boogeyman,
.blog-card-the-boogeyman:hover .blog-blurb-the-boogeyman {
    color: #ffffff;
    /* Change the text color to white on hover */
}

.blog-image-the-boogeyman {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 110px;
    height: 110px;
}

.blog-card-more-the-boogeyman {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 110px;
}

.blog-title-the-boogeyman {
    font-family: 'VCRosdNEUE';
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 370px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

.blog-blurb-the-boogeyman {
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 360px;
    height: 30px;
    margin-left: 15px;
    background color: #000f;
}

/*START OF THE CAVE PAGE*/

/*_____ web version*/


/* Mobile */

/* Making this site look good on mobile was a horrible experience. The hardest part was adjusting the vertical lines and the horizontal lines to look okay on a phone. For mobile, the width of vertical lines are now 4px instead of 5px, and the height of horizontal lines is now 4px instead of 5px. It looks a lot better now, but I think I have to make some more changes*/

@media (min-width: 329px) and (max-width: 600px) {
    body {
        background-color: #efeade;

    }

    .container {
        margin-top: 30px;
        width: 100%;
        padding: 10px;
        position: relative;
    }

    .header-image {
        /*The header image takes an element from the landing pages design and increases the width. The text "3 Act Life" in the header image is apart of the image*/
        width: 620px;
        height: 64px;
        position: absolute;
        top: 10px;
        z-index: -1;
    }

    .signature {
        /*The Signature is the box at the bottom of the site that says "created with passion by mitchell oneill. This does not link anywhere, it also does not have a hover state.*/
        font-family: 'VCRosdNEUE';
        background-color: black;
        font-size: 12px;
        color: #efeade;
        text-align: center;
        width: 130px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 75px;
        top: 820px;
    }

    .buy-me-a-coffee {
        /*This is a button on the bottom of the site, it links to a page where users can donate money to me if they like my content or the website*/
        font-family: 'VCRosdNEUE';
        background-color: #1f2b5b;
        font-size: 12px;
        color: #efeade;
        text-align: center;
        width: 190px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 810px;
        left: 225px;
    }

    .letterboxd {
        /*This is a button on the bottom of the site, it links to my Letterboxd profile. There users can connect with me and see all of the films I've ever watched and rated*/
        font-family: 'VCRosdNEUE';
        background-color: #efeade;
        border: 4px solid #1f2b5b;
        font-size: 8px;
        color: #1f2b5b;
        text-align: center;
        width: 63px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 815px;
        left: 425px;
    }

    nav {
        text-align: center;
        top: 100px;
        position: absolute;
        z-index: 2;
    }

    nav ul {
        list-style-type: none;
        padding: 0;
        position: relative;
    }

    nav ul li a {
        background-color: #efeade;
        text-decoration: none;
        font-family: 'VCRosdNEUE', sans-serif;
        color: #333;
        font-size: 16px;
        display: block;
        border: 4px solid #1f2b5b;
        padding: 10px;
        width: 150px;
        position: relative;
        margin-bottom: 20px;
        /* Space between navigational items */

    }

    nav ul li a:hover {
        background-color: #ef4a38;
        text-decoration: none;
        font-family: 'VCRosdNEUE', sans-serif;
        color: #FFFFFF;
        z-index: 1;
    }

    /*Every single vertical and horizontal line is a major pain, lining everything up for mobile and for web versions was an absolute nightmare.*/


    .vertical-line-2 {
        position: absolute;
        left: 60px;
        top: 73px;
        bottom: 0;
        width: 4px;
        height: 731px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .vertical-line-3 {
        position: absolute;
        left: 130px;
        top: 73px;
        bottom: 0;
        width: 4px;
        height: 731px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .vertical-line-4 {
        position: absolute;
        left: 150px;
        top: 73px;
        bottom: 0;
        width: 4px;
        height: 415px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .vertical-line-5 {
        position: absolute;
        left: 65px;
        top: 800px;
        bottom: 0;
        width: 4px;
        height: 35px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .vertical-line-6 {
        position: absolute;
        left: 470px;
        top: 800px;
        bottom: 0;
        width: 4px;
        height: 20px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .vertical-line-9 {
        position: absolute;
        left: 250px;
        top: 802px;
        bottom: 0;
        width: 4px;
        height: 14px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .vertical-line-10 {
        position: absolute;
        left: 370px;
        top: 802px;
        bottom: 0;
        width: 4px;
        height: 14px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .horizontal-line-1 {
        position: absolute;
        left: 60px;
        top: 800px;
        bottom: 0;
        width: 411px;
        height: 4px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .horizontal-line-2 {
        position: absolute;
        left: 66px;
        top: 831px;
        bottom: 0;
        width: 15px;
        height: 4px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .horizontal-line-4 {
        position: absolute;
        left: 410px;
        top: 830px;
        bottom: 0;
        width: 15px;
        height: 4px;
        background-color: #1f2b5b;
        z-index: 0;
        /* Adjusted lower z-index to place it behind the navigation */
    }

    .content-div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: absolute;
        left: 210px;
        top: 90px;
        /* this width also effects the scrollbar*/
        width: 425px;
        height: 700px;
    }

    .content-div::-webkit-scrollbar {
        width: 4px;
        /* Width of the scrollbar */
    }

    .content-div::-webkit-scrollbar-track {
        background-color: #f79186;
        /* Color of the scrollbar track */
    }

    .content-div::-webkit-scrollbar-thumb {
        background-color: #1f2b5b;
        /* Color of the scrollbar thumb */
    }

    .page-title {
        /*Here is the title for the review or film*/
        font-family: 'VCRosdNEUE';
        font-size: 22px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;
        width: 420px;
        height: 40px;
    }

    .page-description {
        /*Here is the description for the review or film*/
        font-size: 14px;
        margin-top: -5px;
        margin-bottom: -40px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 420px;
        height: 150px;

    }

    /*START OF REVIEWS - MOBILE */

    /*Barbie mobile version*/


    .blog-card-barbie {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 5px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-barbie .blog-title-barbie,
    .blog-card-barbie .blog-blurb-barbie {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-barbie:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-barbie:hover .blog-title-barbie,
    .blog-card-barbie:hover .blog-blurb-barbie {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-barbie {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-barbie {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-barbie {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-barbie {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*oppenheimer mobile version*/

    .blog-card-oppenheimer {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 5px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-oppenheimer .blog-title-oppenheimer,
    .blog-card-oppenheimer .blog-blurb-oppenheimer {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-oppenheimer:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-oppenheimer:hover .blog-title-oppenheimer,
    .blog-card-oppenheimer:hover .blog-blurb-oppenheimer {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-oppenheimer {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-oppenheimer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-oppenheimer {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-oppenheimer {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*talk to me mobile version*/

    .blog-card-talk-to-me {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 5px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-talk-to-me .blog-title-talk-to-me,
    .blog-card-talk-to-me .blog-blurb-talk-to-me {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-talk-to-me:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-talk-to-me:hover .blog-title-talk-to-me,
    .blog-card-talk-to-me:hover .blog-blurb-talk-to-me {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-talk-to-me {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-talk-to-me {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-talk-to-me {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-talk-to-me {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*past lives mobile version*/

    .blog-card-past-lives {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 5px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-past-lives .blog-title-past-lives,
    .blog-card-past-lives .blog-blurb-past-lives {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-past-lives:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-past-lives:hover .blog-title-past-lives,
    .blog-card-past-lives:hover .blog-blurb-past-lives {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-past-lives {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-past-lives {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-past-lives {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-past-lives {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*bottoms mobile version*/

    .blog-card-bottoms {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-bottoms .blog-title-bottoms,
    .blog-card-bottoms .blog-blurb-bottoms {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-bottoms:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-bottoms:hover .blog-title-bottoms,
    .blog-card-bottoms:hover .blog-blurb-bottoms {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-bottoms {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-bottoms {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-bottoms {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-bottoms {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*poor things mobile version*/

    .blog-card-poor-things {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-poor-things .blog-title-poor-things,
    .blog-card-poor-things .blog-blurb-poor-things {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-poor-things:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-poor-things:hover .blog-title-poor-things,
    .blog-card-poor-things:hover .blog-blurb-poor-things {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-poor-things {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-poor-things {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-poor-things {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-poor-things {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }


    /*thanksgiving mobile version*/

    .blog-card-thanksgiving {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-thanksgiving .blog-title-thanksgiving,
    .blog-card-thanksgiving .blog-blurb-thanksgiving {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-thanksgiving:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-thanksgiving:hover .blog-title-thanksgiving,
    .blog-card-thanksgiving:hover .blog-blurb-thanksgiving {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-thanksgiving {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-thanksgiving {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-thanksgiving {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-thanksgiving {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*theater camp mobile version*/

    .blog-card-theater-camp {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-theater-camp .blog-title-theater-camp,
    .blog-card-theater-camp .blog-blurb-theater-camp {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-theater-camp:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-theater-camp:hover .blog-title-theater-camp,
    .blog-card-theater-camp:hover .blog-blurb-theater-camp {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-theater-camp {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-theater-camp {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-theater-camp {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-theater-camp {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }



    /*START OF VOICES UNVEILED MOBILE PAGE*/

    /*girlhood mobile version*/

    .blog-card-girlhood {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-girlhood .blog-title-girlhood,
    .blog-card-girlhood .blog-blurb-girlhood {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-girlhood:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-girlhood:hover .blog-title-girlhood,
    .blog-card-girlhood:hover .blog-blurb-girlhood {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-girlhood {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-girlhood {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-girlhood {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-girlhood {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*el topo mobile version*/

    .blog-card-el-topo {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-el-topo .blog-title-el-topo,
    .blog-card-el-topo .blog-blurb-el-topo {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-el-topo:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-el-topo:hover .blog-title-el-topo,
    .blog-card-el-topo:hover .blog-blurb-el-topo {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-el-topo {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-el-topo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-el-topo {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-el-topo {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 14px;
        background color: #000f;
    }

    /*Across the Spiderverse mobile version*/

    .blog-card-across-the-spiderverse {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-across-the-spiderverse .blog-title-across-the-spiderverse,
    .blog-card-across-the-spiderverse .blog-blurb-across-the-spiderverse {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-across-the-spiderverse:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-across-the-spiderverse:hover .blog-title-across-the-spiderverse,
    .blog-card-across-the-spiderverse:hover .blog-blurb-across-the-spiderverse {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-across-the-spiderverse {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-across-the-spiderverse {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-across-the-spiderverse {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-across-the-spiderverse {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }



    /*the flavor of green tea over rice moble version*/

    .blog-card-the-flavor-of-green-tea-over-rice {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-the-flavor-of-green-tea-over-rice .blog-title-the-flavor-of-green-tea-over-rice,
    .blog-card-the-flavor-of-green-tea-over-rice .blog-blurb-the-flavor-of-green-tea-over-rice {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-the-flavor-of-green-tea-over-rice:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-the-flavor-of-green-tea-over-rice:hover .blog-title-the-flavor-of-green-tea-over-rice,
    .blog-card-the-flavor-of-green-tea-over-rice:hover .blog-blurb-the-flavor-of-green-tea-over-rice {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-the-flavor-of-green-tea-over-rice {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-the-flavor-of-green-tea-over-rice {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-the-flavor-of-green-tea-over-rice {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-the-flavor-of-green-tea-over-rice {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*START OF QUICK FLICKS PAGE*/

    /*rehearsals for retirement mobile version*/

    .blog-card-rehearsals-for-retirement {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-rehearsals-for-retirement .blog-title-rehearsals-for-retirement,
    .blog-card-rehearsals-for-retirement .blog-blurb-rehearsals-for-retirement {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-rehearsals-for-retirement:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-rehearsals-for-retirement:hover .blog-title-rehearsals-for-retirement,
    .blog-card-rehearsals-for-retirement:hover .blog-blurb-rehearsals-for-retirement {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-rehearsals-for-retirement {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-rehearsals-for-retirement {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-rehearsals-for-retirement {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-rehearsals-for-retirement {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*puparia mobile version*/


    .blog-card-puparia {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-puparia .blog-title-puparia,
    .blog-card-puparia .blog-blurb-puparia {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-puparia:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-puparia:hover .blog-title-puparia,
    .blog-card-puparia:hover .blog-blurb-puparia {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-puparia {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-puparia {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-puparia {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-puparia {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*START OF THE SONIC VOYAGE MOBLE*/

    /*_____ mobile version*/

    /*Asteroid City web version*/

    .blog-card-asteroid-city {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-asteroid-city .blog-title-asteroid-city,
    .blog-card-asteroid-city .blog-blurb-asteroid-city {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-asteroid-city:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-asteroid-city:hover .blog-title-asteroid-city,
    .blog-card-asteroid-city:hover .blog-blurb-asteroid-city {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-asteroid-city {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-asteroid-city {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-asteroid-city {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-asteroid-city {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }



    .blog-card-the-boogeyman {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 403px;
        height: 84px;
        border: 4px solid #1f2b5b;
        text-decoration: none;
        /* Remove default link underline */
    }

    .blog-card-the-boogeyman .blog-title-the-boogeyman,
    .blog-card-the-boogeyman .blog-blurb-the-boogeyman {
        color: #000000;
        /* Change this to the desired text color for the title and blurb */
    }

    .blog-card-the-boogeyman:hover {
        background-color: #ef4a38;
        /* Change this to the desired hover background color */
    }

    .blog-card-the-boogeyman:hover .blog-title-the-boogeyman,
    .blog-card-the-boogeyman:hover .blog-blurb-the-boogeyman {
        color: #ffffff;
        /* Change the text color to white on hover */
    }

    .blog-image-the-boogeyman {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 84px;
        height: 84px;
    }

    .blog-card-more-the-boogeyman {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 370px;
        height: 110px;
    }

    .blog-title-the-boogeyman {
        font-family: 'VCRosdNEUE';
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 313px;
        height: 18px;
        margin-left: 15px;
        background color: #000f;
    }

    .blog-blurb-the-boogeyman {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 315px;
        height: 30px;
        margin-left: 15px;
        background color: #000f;
    }

    /*START OF THE CAVE PAGE*/

    /*_____ mobile version*/

}

/* Nothing needs to change for tablet devices yet, but down the line if I add more content on the right side I may need to create a tablet version.  */
@media (min-width: 600px) and (max-width: 1024px) {
    body {
        background-color: #efeade;
    }
}
}