header {
	display: flex;
	flex-direction: column;
	margin-block: 0;
	background-color: var(--bg-color);
}

header h1 {
	display: flex;
	margin-block: 0px;
}

#logo_container {
	display: flex;
	width: 100%;
	margin: 0;
	justify-content: center;
    align-items: center;
}

#logo_container img {
	width: 80%;
	box-shadow: 4px 10px 4px rgba( 0, 0, 0, 0.5);
	transition: transform 200ms ease-in-out;
	animation: logo_shake_init 1000ms ease-in-out;
}

@keyframes logo_shake_init {
	30%{
		transform: perspective(100px) translate3d(0%, 5%, 15px);
	}
	40%{
		transform: perspective(100px) translate3d(0%, 5%, 15px) rotate(2deg);
	}
	50%{
		transform: perspective(100px) translate3d(0%, 5%, 15px) rotate(-2deg);
	}
	60%{
		transform: perspective(100px) translate3d(0%, 5%, 15px) rotate(2deg);
	}
	70%{
		transform: perspective(100px) translate3d(0%, 5%, 15px) rotate(-2deg);
	}
}

#logo_container img:hover {
}

#logo_container img:hover {
	box-shadow: 2px 5px 2px rgba( 0, 0, 0, 0.5);
}

@media screen and (min-width: 981px) {
	header{
		flex-direction: row;
    }
    
    #logo_container {
		width: 25%;
		max-height: 100%;
	}
}