@import url('https://fonts.googleapis.com/css2?family=Passion+One&family=Work+Sans&display=swap');

/* Removing the preset padding and margin */
* {
    padding: 0;
    margin: 0;
}

body {
    color: white;
    background-color: black;
}

/* Styling Header */
header {
    background-image: url("https://kq-storage.s3.ap-south-1.amazonaws.com/Github/animax/animax-bg%5B1%5D.png");
    background-size: 100% 100%;
    max-width: 100%;
    max-height: 100%;
    border: 8px solid #1B1717;
}

#logo img {
    height: 5vh;
}

#header-text>p {
    width: 300px;
}

nav {
    margin: 2% 7%;
}

#scroll {
    width: 80px;
}

.movie-text {
    max-width: 400px;
}

/* Styling header text */
#header-text {
    max-width: 500px;
    min-height: 300px;
    padding: 10% 0%;
    margin: auto;
    align-items: center;
    text-align: center;
}

/* Styling buttons */
.button {
    background-color: #F50A5F;
    padding: 7px;
}

a {
    text-decoration: none;
    color: white;
}

/* Styling play button */
#play {
    display: inline;
}

/* giving size to the div */
.movie-image {
    height: 240px;
    width: 400px;
}

.movie-image>img {
    width: 100%;
}

h1 {
    font-family: 'Passion One', cursive;
    font-size: 55px;
    font-weight: lighter;
}

p {
    font-family: 'Work Sans', sans-serif;
    font-size: 22px;
}

.movie-text>p {
    margin: 22px 0px;
}

hr {
    color: #1B1717;
    border: 4px solid #1B1717;
}

footer {
    height: 90px;
    text-align: center;
}

/* Iteration 1: Styling all the flex elements with (Justify-content:space-between) & (align-items:center) */
.flex-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Iteration 2: Using flex-wrap */
.movies{
    flex-wrap:wrap;
    margin: 3% 14%;
}

/* Iteration 3: Styling all the flex elements with (flex-direction:column), (Justify-content:space-evenly) */
.flex-column{
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* Iteration 4: Animation */
#scroll{
    position: relative;
    animation: arrow 3s infinite;
}
@keyframes arrow {
0%{
    top: 15px;
}
100%
{
    top: 100px;
}
}


/* Iteration 5: Making webpage mobile responsive */
@media only screen(max-width:600px){
    .wrap-reverse{
        flex-wrap: wrap-reverse;
    }
    .container{
        text-align: center;
    }

.button{
    background-color: bisque;
}
}
@media only screen and (min-width: 600px)and (max-width: 800px){
.button{
    background-color: #92a1b5;
}
}