@font-face {
    font-family: Audiowide;
    src: url('../fonts/Audiowide-Regular.ttf');
}

@font-face {
    font-family: NightMachine;
    src: url('../fonts/Night-Machine.otf');
}

:root {
    --gradient-first: #1A1949;
    --gradient-last: #432F8E;
    --text: #FFFFFF;
    --alt-text: #4788B6;
}

html, body {
    background: linear-gradient(to bottom right, var(--gradient-first), var(--gradient-last));
    color: var(--text);
    font-family: 'Audiowide';
    font-size: 1.2em;
    display: flex;
    align-items: center;
    height: 100%;
    text-align: center;
    width: 100%;
}

main {
    margin: auto;
    max-width: 350px;
    width: 100%;
    padding-bottom: 2em;
}

.title {
    font-family: 'NightMachine';
    font-size: 3em;
    margin: 0 0 1em 0;
}
.subtitle {
    font-family: 'NightMachine';
    font-size: 2em;
    margin: 0 0 1em 0;
}

.lead > a.btn {
    background-image: url('../images/btn_play.png');
    color: var(--alt-text);
    font-family: 'Audiowide';
    font-size: 60px;
    height: 118px;
    padding-left: 40px;
    text-align: left;
    width: 331px;
}

.btn-enigma {
    background-size: contain;
    line-height: 60px;
    font-size: 1.2em;
    height: 80px;
    width: 80px;
    margin-bottom: 0.5em;
}
.btn-enigma-none {
    background-image: url('../images/btn_violet.png');
}
.btn-enigma-near {
    background-image: url('../images/btn_orange.png');
}
.btn-enigma-solved {
    background-image: url('../images/btn_green.png');
}

.btn-menu {
    background-image: url('../images/btn_menu.png');
    background-size: contain;
    font-size: 1.2em;
    height: 70px;
    width: 70px;
}
.btn-back {
    background-image: url('../images/btn_back.png');
    background-size: contain;
    font-size: 1.2em;
    height: 70px;
    width: 70px;
}

.logform {
    margin-left: auto;
    margin-right: auto;
    width: 15em
}

.profilePicture {
    max-height: 200px;
    max-width: 200px;
}

.results {
    font-size: 0.7em;
}
.results img {
    max-height: 120px;
}