@charset "UTF-8";

@font-face {
    font-family: 'PixelMplus';
    src: url('./PixelMplus10-Regular.ttf');
}

* {
    font-family: 'PixelMplus';
    font-size: 20px;
    font-weight: normal;
}

h1 {
    text-align: center;
    font-size: 50px;
    font-weight: normal;
    margin: 0;
    color: #FFF;
    position: absolute;
    width: 300px;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: -5px -5px 0 #d28282, 0 -5px 0 #d28282, 5px -5px 0 #d28282,
                 -5px  0   0 #d28282,                   5px  0   0 #d28282,
                 -5px  5px 0 #d28282, 0  5px 0 #d28282, 5px  5px 0 #d28282;
    transition: .3s;
}

h1 .sub {
    font-size: 30px;
    text-shadow: -3px -3px 0 #d28282, 0 -3px 0 #d28282, 3px -3px 0 #d28282,
                 -3px  0   0 #d28282,                   3px  0   0 #d28282,
                 -3px  3px 0 #d28282, 0  3px 0 #d28282, 3px  3px 0 #d28282;
    display: block;
    margin: 0.25em 0;
    transition: .3s;
}

h2 {
    text-align: center;
    font-size: 40px;
    font-weight: normal;
    margin: 1em;
    color: #FFF;
    text-shadow: -4px -4px 0 #8282d2, 0 -4px 0 #8282d2, 4px -4px 0 #8282d2,
                 -4px  0   0 #8282d2,                   4px  0   0 #8282d2,
                 -4px  4px 0 #8282d2, 0  4px 0 #8282d2, 4px  4px 0 #8282d2;
}

h2>.sub {
    font-size: 20px;
    display: block;
    text-shadow: -2px -2px 0 #8282d2, 0 -2px 0 #8282d2, 2px -2px 0 #8282d2,
                 -2px  0   0 #8282d2,                   2px  0   0 #8282d2,
                 -2px  2px 0 #8282d2, 0  2px 0 #8282d2, 2px  2px 0 #8282d2;
}

body {
    margin: 0;
    padding: 0;
    background-color: #bce8bc;
    color: #172517;
}

main {
    max-width: 800px;
    margin: auto;
}

section {
    position: relative;
    text-align: center;
    margin: 5em 0;
}

footer {
    text-align: center;
    padding: 3em;
    background-color: #66a366;
    color: #FFF;
    text-shadow: -2px -2px 0 #8282d2, 0 -2px 0 #8282d2, 2px -2px 0 #8282d2,
                 -2px  0   0 #8282d2,                   2px  0   0 #8282d2,
                 -2px  2px 0 #8282d2, 0  2px 0 #8282d2, 2px  2px 0 #8282d2;
}

#visual {
    width: 100%;
    height: 50vh;
    max-height: 640px;
    margin: 0 auto;
    background-image: url('./bg.png');
    overflow: hidden;
}

#history .history {
    margin: 1em 0;
}

#history .history .date {
    color: #FFF;
    margin-bottom: 2px;
    text-shadow: -2px -2px 0 #629e62, 0 -2px 0 #629e62, 2px -2px 0 #629e62,
                 -2px  0   0 #629e62,                   2px  0   0 #629e62,
                 -2px  2px 0 #629e62, 0  2px 0 #629e62, 2px  2px 0 #629e62;
}

a.download {
    text-decoration: none;
    background-image: url("./download.png");
    width: 280px;
    height: 80px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
}

a.download .download-wrapper {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    color: #FFF;
    text-shadow: -2px -2px 0 #8282d2, 0 -2px 0 #8282d2, 2px -2px 0 #8282d2,
                 -2px  0   0 #8282d2,                   2px  0   0 #8282d2,
                 -2px  2px 0 #8282d2, 0  2px 0 #8282d2, 2px  2px 0 #8282d2;
}

a.twitter {
    text-decoration: none;
    background-image: url("./twitter.png");
    width: 279px;
    height: 51px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
}

a.twitter .twitter-wrapper {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    color: #FFF;
    text-shadow: -2px -2px 0 #d28282, 0 -2px 0 #d28282, 2px -2px 0 #d28282,
                 -2px  0   0 #d28282,                   2px  0   0 #d28282,
                 -2px  2px 0 #d28282, 0  2px 0 #d28282, 2px  2px 0 #d28282;
}

.big {
    font-size: 30px;
}

.main-rabbit {
    animation-name: fade-lr;
    animation-duration: 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    position: absolute;
    top: 60%;
    left: 20%;
    user-select: none;
    transition: .3s;
}

.sub-rabbit {
    animation-name: fade-bt;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    position: absolute;
    user-select: none;
    transition: .3s;
}

.sub-rabbit.one {
    top: 50%;
    right: 28%;
    animation-delay: 1s;
}

.sub-rabbit.two {
    top: 56%;
    right: 22%;
    animation-delay: 1.2s;
}

.sub-rabbit.three {
    top: 62%;
    right: 16%;
    animation-delay: 1.4s;
}

@keyframes fade-lr {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-bt {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 720px) {
    h1 {
        font-size: 40px;
        text-shadow: -4px -4px 0 #d28282, 0 -4px 0 #d28282, 4px -4px 0 #d28282,
                     -4px  0   0 #d28282,                   4px  0   0 #d28282,
                     -4px  4px 0 #d28282, 0  4px 0 #d28282, 4px  4px 0 #d28282;
    }

    h1 .sub {
        font-size: 20px;
        text-shadow: -2px -2px 0 #d28282, 0 -2px 0 #d28282, 2px -2px 0 #d28282,
                     -2px  0   0 #d28282,                   2px  0   0 #d28282,
                     -2px  2px 0 #d28282, 0  2px 0 #d28282, 2px  2px 0 #d28282;
    }

    .main-rabbit {
        left: -7%;
    }

    .sub-rabbit.one {
        right: 14%;
    }

    .sub-rabbit.two {
        right: 3%;
    }

    .sub-rabbit.three {
        right: -8%;
    }
}