:root {
    --main-background: #121212;
    --input-bar-background: #2E2E2F;
    --search-btn-background: #4B4B4B;
    --main-text: #FFFFFF;
    --placeholder-text: #A5A5A5;
    /* to enable dark scroll bar */
    color-scheme: dark;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--main-text);
    background-color: var(--main-background);
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* Typography */

h1, h2, h3, h4, p {
    margin: 0;
    padding: 0;
}

h1 {
   font-size: 2.625rem; 
}

h2 {
    font-size: 1.125rem;
}

a, p {
    font-size: 0.875rem;
}

h4{
    font-size: 0.75rem;
    font-weight: 200;
}

/* Common styles */

.options:hover,
.options:active,
.options:focus {
    color: #A5A5A5;
}

/* Main Section */

main {
    max-width: 34.375rem;
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
}

.header-section, .movie-article, .movie-details {
    display: flex;
    align-items: center;
}

/* Header section */

.header-section {
    background-image: url(./assets/bg-img.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 3.5em 0;
    justify-content: space-around;
}

.options {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}



/* Search Section */

.search-section {
    display: flex;
    width: 85%;
    margin: 0 auto;
    position: absolute;
    top: 150px;
    left: 35px;
}

.search-icon {
    width: 1.2rem;
    padding: 0.5em;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    opacity: 0.8;
}

#search-input {
    flex-grow: 1;
    font-family: inherit;
    color: var(--main-text);
    opacity: 0.8;
}

::placeholder {
    color: var(--placeholder-text);
    opacity: 0.5;
}

#search-input,
.search-icon {
    background-color: var(--input-bar-background);
    border: none;
    outline: none;
}

#search-btn {
    width: 7rem;
    background-color: var(--search-btn-background);
    border: none;
    color: inherit;
    font-family: inherit;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    opacity: 0.8;
}

#search-btn:hover,
#search-btn:focus {
    background-color: #3e3d3d;
}

/* Movie Card Section */

.movie-section {
    padding: 3em 2em;
}

.movie-article {
    padding: 1.5em 0;
    border-bottom: 1.5px solid #2c2c2c;
    gap: 1em;
}

.movie-poster {
    width: 25%;
}

.movie-details {
    align-items: center;
}

.first-row {
    gap: 0.4em;
}

.second-row {
    gap: 1em;
    margin: 1em 0;
}

.description {
    font-size: 0.8rem;
    color: var(--placeholder-text);
}

.default-section {
    text-align: center;
    margin-top: 6em;
}

.default-section {
    opacity: 0.3;
}

.default-section img {
    width: 4rem;
    filter: invert(65%) sepia(1%) saturate(3286%) hue-rotate(20deg) brightness(101%) contrast(91%);
}

.error-section {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    margin-top: 6em;
    color: var(--placeholder-text);
    font-weight: bold;
}