@keyframes logo {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(25px);
    }
}

body {
	background: linear-gradient(rgba(20, 26, 35,0.55),rgba(20, 26, 35, 0.55)),
				url("../img/fonsite.png") no-repeat center center fixed;
	background-size: cover;

	margin: 0;
	position: relative;
}

.logo {
    animation: logo 4s ease-in-out infinite alternate;
    margin-bottom: 1rem;
}

.logo img {
    width: 500px;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 1));
}

@media (max-width: 450px) {
    .logo img {
        height: auto;
        max-width: 100%;
    }
}

html, body {
	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.container {
	text-align: center;
}

.logo img {
	width: 225px; /* Change image size for mobile */
	-webkit-animation-name: logo;
	        animation-name: logo;
	-webkit-animation-duration: 5s;
	        animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
}

@-webkit-keyframes logo {
	0% {
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
	50% {
		-webkit-transform: scale(1.07);
		        transform: scale(1.07);
	}
	100% {
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}

@keyframes logo {
	0% {
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
	50% {
		-webkit-transform: scale(1.07);
		        transform: scale(1.07);
	}
	100% {
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}

@media(min-width: 1250px) {
	.title {
		font-size: 24px;
	}

	.subtitle {
		font-size: 15px;
	}

	.logo img {
		width: 470px; /* Change image size for desktop */
	}

	.logo {
		margin-bottom: 28px;
	}
	.img {
		width: 100%;
	}
	.items {
		padding: 30px 0 20px 0;
	}
	.playercount {
		font-size: 1.22em;
		padding: 10px;
	}

	.extrapad {
		padding: 0 42.5px;
	}

	.playercount > p > span {
		padding: 4px 7px;
	}
}