.hero {
    background: url('../images/minecraft-hero.jpg') center/cover no-repeat;
}

body {
    background: linear-gradient(to bottom, #183216, #09251a);
    background-attachment: fixed;
}

.hero-buttons {
    margin-top: 10px;
}

.CopyMCIP {
    background: rgba(255, 255, 255, 0.2);
    margin-left: 12px;
}

.CopyMCIP:hover,
.CopyMCIP:focus {
    background: rgba(255, 255, 255, 0.4);
}

.copied {
    background-color: rgba(63, 255, 121, 0.2);
    outline-color: rgba(63, 255, 121, 0.4);
    animation: copy 2s infinite ease-in-out;
    user-select: none;
    pointer-events: none;
}
.copied:hover,
.copied:focus {
    background-color: rgba(63, 255, 121, 0.2);
    outline-color: rgba(63, 255, 121, 0.4);
}

#technical-information {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    outline: 1px solid rgba(204, 204, 204, 0.2);
    padding: 20px;
    border-radius: 20px;
}

@keyframes copy {
    0% {
        background-color: rgba(63, 255, 121, 0.2);
        outline-color: rgba(63, 255, 121, 0.4);
        outline-width: 1px;
    }

    10% {
        background-color: rgba(233, 255, 63, 0.2);
        outline-color: rgba(242, 255, 63, 0.4);
        outline-width: 2px;
    }

    50% {
        background-color: rgba(63, 255, 121, 0.2);
        outline-color: rgba(63, 255, 121, 0.4);
        outline-width: 3px;
    }

    90% {
        background-color: rgba(233, 255, 63, 0.2);
        outline-color: rgba(242, 255, 63, 0.4);
        outline-width: 1px;
    }

    100% {
        background-color: rgba(63, 255, 121, 0.2);
        outline-color: rgba(63, 255, 121, 0.4);
        outline-width: 1px;
    }
}

@media (max-width: 480px) {
    .CopyMCIP {
        margin-left: 0;
        margin-top: 22px;
        display: block;
    }
}