body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-blue);
    animation: colorSwitchBackground 9s infinite linear;
}

.home {
    padding: 10px;
    width: 400px;
    display: flex;
    flex-direction: column;
    background-color: var(--const-white);
    border-radius: var(--border-radius-l);
}

.home-title {
    text-align: center;
    margin: 20px 0 20px 0;
}

.home-button {
    width: 100%;
    padding: 10px 0 10px 0;
    margin-top: 10px;
    border-radius: var(--border-radius-m);
    color: var(--const-white);
    background-color: var(--color-black);
    text-align: center;
    transition: .2s;
}

.home-button:is(:hover, :focus) {
    background-color: var(--color-black-focus);
}

.home-button:active {
    background-color: var(--color-black-active);
}

.home-button.accent {
    background-color: var(--color-blue);
}

.home-button.accent:is(:hover, :focus) {
    background-color: var(--color-blue-focus);
}

.home-button.accent:active {
    background-color: var(--color-blue-active);
}

@media (max-width: 460px) {
    body {
        align-items: flex-end;
    }

    .home {
        width: calc(100% - 20px * 2);
        margin: 20px;
    }
}

@keyframes colorSwitchBackground {
    0% {
        background: #50c8fc;
    }

    20% {
        background: #5094fc;
    }

    40% {
        background: #5056fc;
    }

    60% {
        background: #8350fc;
    }

    80% {
        background: #5056fc;
    }

    100% {
        background: #50c8fc;
    }
}