/* rock-salt-regular - latin */
@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rock-salt-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Rock Salt Regular'), local('RockSalt-Regular'),
       url('../fonts/rock-salt-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/rock-salt-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/rock-salt-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/rock-salt-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/rock-salt-v9-latin-regular.svg#RockSalt') format('svg'); /* Legacy iOS */
}

*{margin:0; padding:0;}
body{
    width: 100vw;
    height: 100vh;
    background-color: black;
    color: white;
    transform: scale(.8);
}
header{
    height: 1%;
}
main{
    width: 100vw;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center
}
#mini_cont{
    width: 570px;
    height: 80vh;
    background-color: ;
    display: flex;
    flex-wrap: wrap;
}
#mini_cont div{
    border-radius: 50%;
    display: flex;
    flex: 1 1;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: ;
    transition: 1s;
}
#mini_cont div:hover:nth-child(1),
#mini_cont div:hover:nth-child(2),
#mini_cont div:hover:nth-child(3),
#mini_cont div:hover:nth-child(4){
    box-shadow: 
        inset 0 -25px  50px -30px #ff5757,
        inset 0 25px  50px -30px #ff5757
        ;
    transition: .6s;
}


.kleine{
    width: 70px;
    transition: .5s;
}

div:hover > img.kleine{
    transform: scale(1.1);
    transition: .5s;
}

#mini_cont #div_bg{
    width: 300px;
    height: 250px;
}
#mini_cont #div_text{
    width: 300px;
    height: 20px;
    z-index: 1;
}
#bildgross{
    width: 300px;
}
.anima{
    animation: pulse 3s;
}
@keyframes pulse{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
p{
    width: 300px;
    text-align: center;
    font-family: 'Rock Salt', cursive;
    transform: 
        translate(-140px,70px) 
        rotate(-35deg);
    color: #ff5757;
    
    font-size: 1.5em;
}
footer{
    height: 10vh;
    text-align: center;
    font-family: 'Rock Salt', cursive;
    color: #ff5757;
    font-size: 1.2em;
}