EnglishRolePlayGame/css/style.css

:root {
    --border-radius : 15px;

    --white: #ecf0f1;
    --black: #2c3e50;

    --red: #e74c3c;
    --blue: #3498db;
    --green: #2ecc71;
    --purple: #9b59b6;

    --dark-red: #c0392b;
    --dark-blue: #2980b9;
    --dark-green: #27ae60;
    --dark-purple: #8e44ad;
}

body {
    overflow-y: hidden;
    color: var(--white);
}

.container {min-height: 100vh;}

#turn {
    text-align: center;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    padding: 15px 0;
    transition: 0.25s all ease-in-out;
}


#particles-js {
    transition: 0.25s all ease-in-out;
}

.start {
    background-color: var(--black);
}

.turn-hacker {
    background-color: var(--red);
}
.turn-cyber {
    background-color:var(--blue);
}

.title {margin: 100px 0;}

#answers_canvas.turn_hacker .choose-btn {
    box-shadow: var(--red) 0 0 25px;
}

#answers_canvas.turn_hacker .choose-btn {
    box-shadow: var(--blue) 0 0 25px;
}

.choose-btn {
    font-size: 2em;
    margin: 5px;
    padding: 50px;
    color: var(--white);
    border-radius: var(--border-radius);
    transition: all 0.1s ease-out;
}

.choose-btn:hover {
    cursor: pointer;
    box-shadow: 0 0 5px;
    
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}