styles.css

/********************************************
*   Styles for Rock, Paper, Scissors.       *
*   Author: Nikos-Nikitas                   *
*   GitHub: https://github.com/nikosnikitas *
*********************************************/

:root {
    --main: #222222;
    --secondary: #887676;
    --other: #045757;
    --font: serif;
    --white: #f6f6f6;
}

* {
    font-family: var(--font);
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}

a {
    color: var(--secondary);
    text-decoration: none;
}

a:hover {color: var(--white);}

a:hover::after {
    content: ' <<< Visit for more!';
    color: var(--secondary);
    font-size: smaller;
    font-weight: normal;
}

body {
    background-color: var(--main);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.container {
    font-size: x-large;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--main);
    color: var(--other);
    border: 1px solid var(--main);
    border-radius: 25px;
    width: 80%;
    margin-top: 8%;
}

button {
    opacity: 60%;
    background-color: var(--main);
    color: var(--other);
    border: 3px solid var(--other);
    border-radius: 25px;
    margin: 24px;
    padding: 4px;
    width: 250px;
    height: 50px;
    font-family: sans-serif;
    font-size: inherit;
    font-weight: bold;
    cursor: pointer;
}

button:hover::before {
    content: '< ';
    color: var(--other);
}


button:not(#start):hover::after {
    content: ' >';
    color: var(--other);
}

#start:hover::after {
    content: '! >';
    color: var(--other);
}

button:hover, button:focus {
    opacity: 100%;
    animation-name: show;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

p {
    color: var(--secondary);
    font-size: larger;
}

@keyframes show {
    from {
        padding: 4px;
    }

    to {
        padding: 8px;
    }    
}