@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    /* Transform*/
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    /* Appearance */
    background: #03a1fc;
}

/* Selection colour */
::selection, ::-moz-selection {
    background: #03a1fc; /* WebKit/Blink Browsers */
}

/* Hide outline on selected input */
input:focus {
    outline: none;
}

/* Header */
#header {
    height: 75px;
    background: rgba(255,255,255,0.25);

    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* Header title */
#header a {
    /* Appearance */
    color: white;

    /* Decoration */
    text-decoration: none;

    /* Font */
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
}

/* Header buttons */
#controlButtons button {
    /* Transform */
    padding: 5px 25px 5px 25px;
    margin: 5px;

    /* Appearance */
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.25);
    color: white;

    /* Font */
    font-family: 'Poppins', sans-serif;
    font-size: 24px;

    /* Animation */
    transition: background 0.14s;
}

/* Header buttons - hover */
#controlButtons button:hover {
    cursor: pointer;
    background: rgba(255,255,255,0.6);
}

/* Header buttons (invite) - hover */
#controlButtons #invite:hover {
    background: rgba(0,191,0,0.65);
}

/* Header buttons (quit) - hover */
#controlButtons #quit:hover {
    background: rgba(255,0,0,0.65);
}