html, body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    width: calc(100% - 16px);
    max-width: 358px;
}

.title-icon {
    width: 200px;
    max-width: 100%;
    margin: 0 auto;
    animation: appear-anim 2s linear;
}
.title-icon img {
    width: 100%;
}

.oracle-picture {
    width: 100%;
    animation: appear-anim-10 2s linear;
}
.oracle-picture img {
    width: 100%;
}

footer {
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-network {
    margin: 8px;
    width: 38px;
    height: 38px;

    display: flex;
    justify-content: center;
    align-items: center;

    &:nth-child(1) { animation: appear-anim-20 2s linear; }
    &:nth-child(2) { animation: appear-anim-30 2s linear; }
    &:nth-child(3) { animation: appear-anim-40 2s linear; }
    &:nth-child(4) { animation: appear-anim-50 2s linear; }
}

.footer-network img {
    width: 100%;
}

@keyframes appear-anim {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes appear-anim-10 {
    0% { opacity: 0; transform: scale(0.8); }
    10% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes appear-anim-20 {
    0% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes appear-anim-30 {
    0% { opacity: 0; transform: scale(0.8); }
    30% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes appear-anim-40 {
    0% { opacity: 0; transform: scale(0.8); }
    40% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes appear-anim-50 {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}