body,div{
    margin: 0;
}
body{
    height: auto;
    width: 100%;
    overflow-x: hidden;
}
.box{
    position: relative;
}
.ani-element, .links{
    position: absolute;
    top:0;
}
.ani-element{
    text-align: center;
    opacity: 0;
}
.ani-element.action{
    opacity: 1;
}
picture img, .ani-element img{
    width: 100%;
    vertical-align: middle;
}
.ani-element div{
    position: relative;
}
.ani-1{
    width: 82.6%;
    left: 8.7%;
}
.ani-2{
    display: none;
}
.ani-3{
    width: 91.9%;
    left: 5%;
}
.ani-4{
    width: 100%;
    left: 0;
}
.ani-4>div:nth-of-type(1){
    /*width: 82.2%;
    left: 9%;*/
    width: 88.2%;
    left: 6.7%;
}
.ani-4>div:nth-of-type(2){
    width: 87.2%;
    left: 7%;
}
.links{
    width: 85.8%;
    left: 7.6%;
}
.links>a{
    display: block;
    position: relative;
}
.note-page{
    background-color: #e6f7ff;
}
.note-page .links{
    position: relative;
}
.note-page .links>a{
    top:0;
}
.ani-1.action{
    animation-name: ani-1-action;
    animation-duration: 1s;
}
@keyframes ani-1-action {
    0% { top: 100vh; opacity: 0;}
    100% { top: 0; opacity: 1;}
}
.ani-3.action div{
    animation-name: ani-3-action;
    animation-duration: 1s;
}
.ani-3.silence div{
    animation-name: ani-3-action;
    animation-duration: 1s;
    animation-direction:reverse;
}
.ani-3.action div:nth-of-type(2){
    animation-duration: 1.5s;
}
.ani-3.action div:nth-of-type(3){
    animation-duration: 2s;
}
@keyframes ani-3-action {
    0% { left:100vw; opacity: 0;}
    100% { left: 0; opacity: 1;}
}
.ani-4.action div{
    animation-name: ani-4-action;
    animation-duration: 1s;
}
.ani-4.silence div{
    animation-name: ani-4-action;
    animation-duration: 1s;
    animation-direction:reverse;
}
.ani-4.action div:nth-of-type(2){
    animation-name: ani-4-action;
    animation-duration: 1.5s;
}
@keyframes ani-4-action {
    0% { top:0; opacity: 0;}
    10% { top:-30vw; opacity: 0;}
    100% { top: 0; opacity: 1;}
}
#snow{
    width: 100vw;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
}
.snowflake {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(white, #ddd); /* Workaround for Chromium's selective color inversion */
    border-radius: 50%;
    filter: drop-shadow(0 0 10px white);
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }

@media screen and (min-width: 769px){ 
    .ani-1{
        width: 35.9%;
        left: 54.4%;
    }
    .ani-2{
        width: 78.1%;
        left: 13.5%;
        display: block;
    }
    .ani-3{
        width: 100%;
        left: 0;
    }
    .ani-3>div{
        position: absolute;
    }
    .ani-3>div:nth-of-type(1){
        width: 26.3%;
        left: 12.7%;
    }
    .ani-3>div:nth-of-type(2){
        width: 25.9%;
        left: 37.9%;
        top:-2vw;
    }
    .ani-3>div:nth-of-type(3){
        width: 26.7%;
        left: 62.1%;
        top:-1vw;
    }
    .ani-4>div:nth-of-type(1){
        width: 72.5%;
        left: 14.3%;
    }
    .ani-4>div:nth-of-type(2){
        display: none;
    }
    .links{
        width: 100%;
        left: 0%;
        text-align: center;
    }
    .links > a{
        width: 23%;
        display: inline-block;
        top:0;
    }
    @keyframes ani-1-action {
        0% { left: 100%; opacity: 0;}
        100% { left: 54.4%; opacity: 1;}
    }
    .ani-2.action{
        animation-name: ani-2-action;
        animation-duration: 1s;
    }
    .ani-2.silence div{
        animation-name: ani-2-action;
        animation-duration: 1s;
        animation-direction:reverse;
    }
    @keyframes ani-2-action {
        0% { top: 5vw; opacity: 0;}
        100% { top: 0; opacity: 1;}
    }
    @keyframes ani-3-action {
        0% { transform:scale(0.1,0.1); opacity: 0;}
        100% { transform:scale(1,1); opacity: 1;}
    }
    @keyframes ani-4-action {
        0% { top:30vw; opacity: 0;}
        100% { top: 0; opacity: 1;}
    }
}