@import url("/css/style_main.css");

.home__section {
    display: flex;
    margin: 2rem auto;
    justify-content: space-evenly;
}

.home__section__meki {
    width: 15rem;
    margin: auto;
    display: block;
    
    animation: rock 1s ease-in-out infinite;
}

    
@keyframes rock {
    0% {
        transform: rotate(-5deg);
    }
    
    50% {
        transform: rotate(5deg);
    }
    
    100% {
        transform: rotate(-5deg);
    }
}

.home__intro__windows {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    max-width: 65%;
    margin: auto;
}

.bubble__updates {
    background-image: url("/img/home/updates_bg.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    mix-blend-mode: overlay;
    
    border-radius: 1rem;
    padding: 1rem;
    
    width: 100%;
    height: 20rem;
    
    overflow-y: scroll;
    
    color: white;
    
    margin: auto;
    
    text-shadow: 2px 2px #000000;
}

.shrines-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 80%;
}

.bubble--shrine {
    width: 30%;
    background-position: left center;
    background-size: cover;
}

.bubble--shrine__logo {
    width: 15rem;
    image-rendering: pixelated;
}

@media only screen and (max-width: 1300px) {
    .bubble--shrine__logo {
        width: 8rem;
    }
    
    .home__section__meki {
        width: 12rem;
    }
    
    .home__section {
        flex-direction: column;
        max-width: 90%;
        margin: auto;
    }
    
    .home__intro__windows {
        max-width: 90%;
    }
}