@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes backgroundIn {
    from { background-size: 100% 0%; }
    to { background-size: 100% 100%; }
}
@keyframes dropIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes riseIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes slideIn {
    from { transform: translate(-32px, 0); opacity: 0;}
    to { transform: translate(0, 0); opacity: 1;}
}
@keyframes scaleIn {
    from { transform: scale(0,1); }
    to { transform: scale(1,1); }
}
@keyframes growIn {
    from { transform: scale(2,1) translate(0, -50%) rotate(-15deg); opacity: 0; }
    to { transform: scale(1,1) translate(0, -50%) rotate(5deg); opacity: 1; }
}

body {
    display: flex;
    flex-direction: column;
    align-content: center;
}

.header {
    align-self: center;
    filter: drop-shadow(5px 5px 0 black) drop-shadow(0 0 10px black);
}
.header.visible {
    animation: dropIn 0.5s ease forwards;
}

.hiring-note {
    font-size: 12px;
    font-style: italic;
    align-self: center;
}
.hiring-note.visible {
    animation: fadeIn 1s ease forwards;
}

.price-info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.price-info.visible {
    animation: slideIn 1s ease forwards;
}

.commission-rules {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
}
.commission-rules.visible {
    animation: 1s slideIn 0.5s ease forwards;
}
.commission-rules ul {
    text-align: left;
}

.price-table {
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
}
.price-table.visible {
    animation: 0.5s riseIn 1s ease forwards;
}
.price-table td {
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,0,0,0.2));
}

.contact-info {
    margin-top: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
}
.contact-info.visible {
    animation: 0.5s slideIn 1.25s ease forwards;
}