/*MEDIA QUERY */

@media only screen and (max-width: 576px) {
    
    .masthead {
        background-image: url(../assets/img/bgm_mobile.jpg)
    }
    
    header h1 {
        display: none;
    }
    
    .arrow a {
        font-size: 3rem;
    }
}

@media only screen and (max-width: 768px) {
    
    .masthead {
        background-image: url(../assets/img/bgm_mobile.jpg)
    }
    
    header h1 {
        font-size: 1.5rem;
    }

    .arrow a {
        font-size: 3rem;
    }    
}

@media only screen and (min-width: 993px) {
    
    .aree .svg-container {
        background-color: #e6fce7;
        border-radius: 200px;
        width: 100%;
    }
    
    .aree .svg-container svg {
        width: 30%;
        margin-bottom: 0;
        margin-left: unset;
        margin-right: unset;
    }
    
    .aree .svg-container .explanation {
        width: 65%;
        background: none;
        box-shadow: none;
    }
    
    .aree .svg-container .explanation h4 {
        text-align: left;
    }
}