html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    margin-bottom: 60px;
    /*background-color: #86938d;*/
}

.website-logo {
    padding: 20px;
    width: 100%;
}

.headers-header {
    background-color: #baccb0;
    border-bottom: 6px solid #9D9D9D;
    width: 100%; /* This makes the header span the entire width */
    padding-bottom: 20px;
    margin-bottom: 20px;
    color: white;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('../fonts/Averia_Serif_Libre/AveriaSerifLibre-Regular.ttf') format('truetype');
}

.nav-link {
    text-decoration: none; /* Remove underline */
    color: #A3A6D9;
    font-size: 2em;
    font-family: 'Averia Serif Libre', serif;
    padding: 0px;
}

/* Media query for smaller screen sizes */
@media only screen and (max-width: 1000px) {
    .nav-link, .site-subtitle {
        font-size: 1.5em !important; /* Adjust font size for smaller screens */
    }
}

/* Media query for smaller screen sizes */
@media only screen and (max-width: 600px) {
    .nav-link, .site-subtitle {
        font-size: 1em !important; /* Adjust font size for smaller screens */
    }
}

.text-center, .text-center h1 {
    margin: 0px;
}

.text-center {
    text-align: center; /* Center all content horizontally */
}

#search-form .row {
    margin-bottom: 12px;
}

.icon-and-text {
    display: flex; /* Use flexbox layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
}

.site-subtitle {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: cornsilk;
    font-size: 2em;
}

.filter-options {
    padding-top: 20px;
}

#suggestions {
    text-align: left;
}

.original-title {
    font-style: italic;
    color: black;
}

.movie-content {
    display: flex;
    align-items: center;
}

#searchButton {
    margin-left: 6px;
}

.imdb-icon {
    width: 60px;
}

.country-flag {
    border: 1px solid black;
    width: 26px;
}

.clickable-movie {
    margin: 6px;
    border: 1px solid black;
    border-radius: 12px;
    padding: 8px;
    transition: background-color 0.3s ease;
    display: block; /* Ensure the anchor tag takes up the entire width */
    text-decoration: none; /* Remove underline */
}

    .clickable-movie:hover {
        background-color: #89f0b5; /* Adjust the opacity as needed */
    }

    .clickable-movie a {
        padding-left: 12px;
    }

.movie-poster-small {
    width: 60px;
    margin-left: 8px;
    margin-right: 16px;
}

.streaming-info {
    margin: 30px 0;
}

.streaming-service-logo {
    width: 20px;
}

#main-div > div {
    padding-top: 30px;
}

.movie-container {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-top: 80px;
}

.movie-info {
    margin-left: 20px;
}

    .movie-info h2 {
        margin-top: 0;
    }

.movie-poster-big {
    width: 200px;
}

.streaming-service-list {
    column-gap: 20px; /* Adjust the gap between columns as needed */
    list-style-type: none; /* Remove bullet points */
}

    .streaming-service-list li {
        margin-bottom: 10px; /* Adjust the spacing between list items as needed */
    }

.country-streaming-services {
    border-radius: 12px;
    padding: 12px;
}
.country-streaming-services:nth-of-type(2n+1) {
    background-color: #f0f0f0; /* Background color for even-numbered countries */
}

.country-streaming-services:nth-of-type(2n) {
    background-color: transparent; /* Background color for odd-numbered countries */
}

.home-country-streaming {
    border-radius: 12px;
    padding: 12px;
    background-color: #f0f0f0;
}

.form-group {
    display: flex;
    align-items: center;
}

#search-button {
    margin: 12px;
}

.input-wrapper {
    flex: 1;
}

.imdb-link {
    color: inherit; /* Inherit default text color */
    text-decoration: none; /* Remove underline */
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent; /* Add a transparent border */
}
    .imdb-link:hover {
        color: inherit; /* Keep the color the same on hover */
        text-decoration: none; /* Optional: Removes underline on hover */
        border-bottom-color: #000; /* Change the border color on hover */
    }

@media screen and (min-width: 768px) {
    .streaming-service-list {
        column-count: 2;
    }

    .streaming-types-list {
        column-count: 3;
    }
}

@media screen and (min-width: 1024px) {
    .streaming-service-list {
        column-count: 3;
    }

    .streaming-types-list {
        column-count: 3;
    }
}

@media screen and (min-width: 1200px) {
    .streaming-service-list {
        column-count: 4;
    }

    .streaming-types-list {
        column-count: 3;
    }
}

@media screen and (min-width: 1600px) {
    .streaming-service-list {
        column-count: 5;
    }

    .streaming-types-list {
        column-count: 3;
    }
}

.free-icon {
    color: green;
}

.ads-icon {
    color: orange;
}

.sub-icon {
    color: darkred;
}

.streaming-types {
    border-radius: 12px;
    padding: 12px;
    background-color: #deeaff;
    margin-bottom: 30px;
    font-size: large;
}

.streaming-types-list {
    column-gap: 20px; /* Adjust the gap between columns as needed */
    list-style-type: none; /* Remove bullet points */
}

.streaming-types-list li {
    margin-bottom: 8px;
}