/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url('../assets/bg1.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-family: Arial, sans-serif;
}

.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 50px;
    text-align: center;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img
{
	max-width: 100%;
	filter: drop-shadow(10px 10px 10px #000);
}


.loader
{
	display: flex;
	justify-content: center;
	align-items: center;

	filter: drop-shadow(5px 5px 5px #000);
}

.loader::after
{
	content: '';
	width: 50px;
	height: 50px;
	border: 5px solid #fff;
	border-top-color: #111;
	border-radius: 50%;
	animation: load 1s infinite ease-in-out;
}

@keyframes load {
	to
	{
		transform: rotate(2turn);
	}
}

@media(max-aspect-ratio: 16/9)
{
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 50px;
	    text-align: center;
	}

	.logo {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.logo img
	{
		max-width: 80%;
		filter: drop-shadow(10px 10px 10px #000);
	}


	.loader
	{
		display: flex;
		justify-content: center;
		align-items: center;

		filter: drop-shadow(5px 5px 5px #000);
	}

	.loader::after
	{
		content: '';
		width: 50px;
		height: 50px;
		border: 5px solid #fff;
		border-top-color: #111;
		border-radius: 50%;
		animation: load 1s infinite ease-in-out;
	}
}