:root {
    /* Palette */
    --alabaster: #E8EDDF;
    --timberwolf: #CFDBD5;
    --maizeCrayola: #F5CB5C;
    --eerieBlack: #242423;
    --jet: #333533;
    font-family: 'Roboto', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
   background: var(--jet);
   /* animation: body 10000ms linear infinite alternate; */
   /*radial-gradient(circle at center, var(--eerieBlack), var(--jet) 0%, var(--maizeCrayola) 200%);*/
}

/* @keyframes body {
    from {background-color: var(--jet);}
to {background-color: var(--alabaster);}
} */

h3 {
    display: block;
    text-align: center;
    padding: 2px;
    margin-left: 0.3em;
    color: var(--alabaster);
    border-radius: 2em;
    transition: 500ms;
}

.page {
    animation: glow 6000ms linear infinite alternate;
}

@keyframes glow {
    0% {filter: brightness(100%);}
    25% {filter: brightness(110%);}
    50% {filter: brightness(105%);}
    75% {filter: brightness(200%);}
    100% {filter: brightness(200%);}
}

#page__logo-container__logo {
    position: sticky;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10em;
    width: 40%;
}

#searchForm {
    display: flex;
    justify-content: center;
    margin-bottom: 10%;
}

#searchMedia {
    display: block;
    padding: 2px;
    margin-top: 5%;
    margin-left: 0.3em;
    background-color: var(--eerieBlack);
    width: 40%;
    border: 3px solid var(--eerieBlack);
    color: var(--alabaster);
    border-radius: 0 2em 2em 0;
    transition: 500ms;

}

#mediaType {
    display: block;
    padding: 2px;
    margin-top: 5%;
    background-color: var(--eerieBlack);
    width: 6%;
    border: 3px solid var(--eerieBlack);
    color: #fefffe5d;
    border-radius: 2em 0 0 2em;
    transition: 500ms;

}

#searchMedia:focus {
    border: 3px solid var(--maizeCrayola);
    outline: none;
}

#mediaType:focus {
    border: 3px solid var(--maizeCrayola);
    outline: none;
}

#page_popular_movies {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 50px;
    padding: 20px;
    border-radius: 1em;
    background-color: var(--eerieBlack);
}

#page_popular_tv {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 50px;
    padding: 20px;
    border-radius: 1em;
    background-color: var(--eerieBlack);
}

.poster__wrap__movies {
    position: relative;
    text-align: center;
}

.poster__wrap__tv {
    position: relative;
    text-align: center;
}

.movie-poster_result {
    margin: 2em;
    border: thick solid var(--eerieBlack);
	border-radius: 10%;
	max-width: 75%;
	height: 200px;
}

.tv-poster_result {
    margin: 2em;
    border: thick solid var(--eerieBlack);
	border-radius: 10%;
	max-width: 75%;
	height: 200px;
}

.poster__wrap__tv {
    position: relative;
    text-align: center;
}

.poster__description_layer {
    position: absolute;
    display: grid;
	left: 10%;
	right: 10%;
    top: 0;
    bottom: 0;
	align-items: center;
	align-content: center;
	justify-content: center;
	visibility: hidden;
    margin: 1em;
}

.poster__description {
    display: flex;
	justify-content: center;
    text-align: center;
    overflow-wrap: break-word;
    color: var(--alabaster);
}


.poster__wrap__movies:hover .poster__description_layer {
	visibility: visible;
}

.poster__wrap__movies:hover .movie-poster_result {
	filter: blur(2.5px);
	border: thick solid var(--alabaster);
	filter: brightness(50%);
}

.poster__wrap__tv:hover .poster__description_layer {
	visibility: visible;
}

.poster__wrap__tv:hover .tv-poster_result {
	filter: blur(2.5px);
	border: thick solid var(--alabaster);
	filter: brightness(50%);
}

footer {
    display: flex;
    justify-items: center;
    flex-direction: column;
    align-items: center;
}

#TMDB_logo {
    width: 14em;
}

#TMDB_credits {
    color: var(--alabaster);
}

.arrow-container {
	display: flex;
	justify-content: center;
	align-items: center;
    margin-bottom: 20%;
}

.arrow {
	width: 3vmin;
	height: 3vmin;
	box-sizing: border-box;
	position: relative;
    transform: rotate(135deg);

}

.arrow::before {
	content: "";
	width: 100%;
	height: 100%;
	border-width: 0.8vmin 0.8vmin 0 0;
	border-style: solid;
	border-color: var(--alabaster);
	transition: 0.2s ease;
	display: block;
	transform-origin: 100% 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(245, 203, 92, .5);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(245, 203, 92, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(rgba(245, 203, 92, 0));
	}
}

.arrow:hover::before {
	cursor: pointer;
	border-color: var(--maizeCrayola);
	transform: scale(0.8);
}

.generate__random__movie {
    background-color: red;
}