/* Variables */
:root {
--text-color:#333;
--blue: #6088b4;
--light-blue: #d6e0eb;
--light-orange: #f7dec3;
--orange: #df886d;
}

body {margin:0;}

.main-nav {background-color:#213e5e; margin-bottom:2em; padding:0em; color:white;}
.main-nav {display:flex; justify-content:space-between; padding-left: 1em; padding-right:1em;}
.main-nav {margin-bottom:3em;}

.main-nav a {padding:.5em; color:white;}
.main-nav a:hover {padding:.5em; color:#213e5e;}

.main-logo {width:80px; position:absolute; left:48.5%; top:1%;}
.main-logo:hover {animation: wobble 0.7s both;}


main {width:90%; margin:2em auto;}

.box {padding:1em; background-color:#efefef; box-sizing: border-box;}
.divider {margin-bottom:5em;}

/* Startseite */
.tools-liste {display: grid; grid-gap:2em; grid-template-columns: repeat(4, 1fr);}
@media only screen and (max-width: 1600px) { .tools-liste {grid-template-columns: repeat(3, 1fr);} }
@media only screen and (max-width: 1200px) { .tools-liste {grid-gap:1.5em; grid-template-columns: repeat(2, 1fr);} }
@media only screen and (max-width: 700px) { .tools-liste {grid-gap:1em; grid-template-columns: 1fr;} }

@keyframes wobble {
	0% {transform: scale3d(1, 1, 1);}
	30% {transform: scale3d(1.25, 0.75, 1);}
	40% {transform: scale3d(0.75, 1.25, 1);}
	50% {transform: scale3d(1.15, 0.85, 1);}
	65% {transform: scale3d(0.95, 1.05, 1);}
	75% {transform: scale3d(1.05, 0.95, 1);}
	100% {transform: scale3d(1, 1, 1);}
}