@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    height: 100%;
    overflow: hidden;
    background: lightgrey;
}

#headerDiv {
    text-align: center;
    color: darkgreen;
    font-family: Arial, ui-serif;
}

#gameDiv {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

}

#gameCanvas {
    border: 1px darkgrey solid;
}

#scoreDiv {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#creditsDiv {
    position: absolute;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    box-shadow: 0 1px 0 0 #1c1b18;
    background: #eae0c2 linear-gradient(to bottom, #eae0c2 5%, #ddd89c 100%);
    border-radius: 15px;
    border: 2px solid #333029;
    display: inline-block;
    cursor: pointer;
    color: #505739;
    font-family: 'Press Start 2P', cursive;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 30px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
}

#scoreCanvas {
    border: 1px darkgrey solid;
}

/*
    Button design taken from https://www.bestcssbuttongenerator.com/
 */
.flappy-button {
    max-width: 400px;
    box-shadow: 0 1px 0 0 #1c1b18;
    background: #eae0c2 linear-gradient(to bottom, #eae0c2 5%, #ddd89c 100%);
    border-radius: 15px;
    border: 2px solid #333029;
    display: inline-block;
    cursor: pointer;
    color: #505739;
    font-family: 'Press Start 2P', cursive;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 30px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
}
.flappy-button:hover {
    background: #ddd89c linear-gradient(to bottom, #ddd89c 5%, #eae0c2 100%);
}
.flappy-button:active {
    background: #ddd89c linear-gradient(to bottom, #ddd89c 5%, #ccc2a6 100%);
}

#playButton {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#settingsButton {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#creditsButton {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#settingsButtonVisuals {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#settingsButtonVisualBird {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#settingsButtonVisualBackground {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#settingsButtonVisualPipe {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#settingsButtonGameMode {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#settingsButtonMusic {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#settingsButtonSound {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

#settingsButtonBack {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}