body {
	margin: 0;
	padding: 0;
}

.count {
	background-image: url(img/christmas2.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-color: rgba(255, 250, 251, 0.585);
	padding-bottom: 100px;
	height: 100vh;
  overflow: hidden;
}

.heading {
	display: flex;
	justify-content: center;
}

.title {
	background: linear-gradient(to left, #f10a0a, #f42675, #c12525);
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-transform: uppercase;
}

.santa-claus {
	position: absolute;
	top: 5px;
	left: 250px;
}

h1 {
	font-size: 60px;
	padding: 20px;
	font-family: "Cinzel", serif;
}

.container {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.christmas {
	background: rgba(248, 248, 248, 0.327);
	height: 250px;
	width: 180px;
	margin-top: 50px;
	border: 3px solid rgb(188, 34, 34);
}

.block {
	display: flex;
	flex-direction: column;
	align-items: center;
}

h3 {
	font-size: 30px;
	font-family: "Cinzel", serif;
	color: rgb(188, 34, 34);

}

.days,
.minutes,
.hours,
.seconds {
	font-family: "Cinzel", serif;
	font-size: 40px;
	color: rgb(188, 34, 34);
}

.red {
	font-size: 60px;
	border: none;
	color: rgb(245, 10, 10);
}

.btn {
	display: flex;
}

.btn :hover{
	cursor: pointer;
}

button {
	margin-left: 50px;
	z-index: 1;
	background-color: transparent;
	border: none;
}

/*FILMS*/
.films {
	background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), url(img/christmas2.webp) no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.header {
	display: flex;
	justify-content: center;
}

.header-movies {
	color: #e71a21;
	font-size: 50px;
	font-family: "Cinzel", serif;
}

.input-field {
	display: flex;
	font-family: "Cinzel", serif;
}

#search {
	flex: 1;
	padding: 20px;
	font-size: 22px;
	font-family: "Cinzel", serif;
}

.containerTwo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.movies {
	padding: 10px;
	margin: 10px;
	text-align: center;
}

.movies_container {
	background-image: url(img/christmas3.webp);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

a {
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(231, 22, 22);
	font-weight: bolder;
	font-family: "Cinzel", serif;
	font-size: 20px;
}

canvas {
	display: block;

}

/* ---- particles.js container ---- */

#particles-js {
	position: absolute;
	width: 100%;
	height: 120%;

}

@media all and (max-width:800px) {
	h1 {
		font-size: 40px;
	}

	.christmas {
		height: 200px;
		width: 150px;
	}

	h3 {
		font-size: 25px;
	}

	.days,
	.minutes,
	.hours,
	.seconds {
		font-family: "Montserrat", sans-serif;
		font-size: 30px;
		color: rgb(188, 34, 34);
	}

	.red {
		font-size: 40px;
	}

	.santa-claus {
		top: 50px;
	}
}

@media all and (max-width:500px) {
	h1 {
		font-size: 30px;
	}
  .movie{
        width: 300px;
        height: 350px;
    }

}


@media all and (max-width:375px){
    h1{
        font-size: 30px;
    }
    .days, .minutes, .hours, .seconds{
        font-size: 20px;
    }
    h3{
        font-size: 20px;
    }
    #particles-js {
        height: 110%;
      }
      .christmas{
        height: 140px;
        width: 120px;
        margin-top: 30px;
    }
}