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

*{
    font-family: 'Comfortaa', cursive ;
    font-weight: bold;
    color: white;
}

html, body{
    height: 100% ;
    margin: 0px;
    background: black;
}

body{
    margin: auto;
    max-width: 900px;

    display: flex;
    flex-direction: column;
}

header .nav-content{
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

#content{
    flex: 1 ;
    background: url("/images/php/tps/tp05/geometric-triangle-neon-laser.jpg");
    background-size: cover;
    background-position: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow: hidden;
}

.title{
    height: 100px ;
    display: flex;
    align-items: center;

    font-size: 2em;
    color: white;
}

.games-list{
    max-width: 800px;
    height: 100%;
    padding: 0 10px;

    overflow: auto;
}

.game{
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 5px;
    background: lightgray;
    opacity: 0.8;
    font-size: 0.9em;
}

.neon{
    border: 2px solid #c07caf;
    border-radius: 5px;
    background: #513575;
    color: white;
}

.game h1{
    font-size: 1.5em;
}
.game-description{
    font-size: 1em;
}
.game-content{
    display: flex;
}
.game-content img{
    margin-right: 5px;
    min-width: 150px;
    max-height: 200px;
}

#game-form{
    width: 600px;

    display: flex;
    flex-direction: column;
    align-content: center;

    overflow: auto;
}
#game-form .mb-3{
    padding: 5px;
    padding-bottom: 8px;
}
#game-form textarea{
    min-height: 100px;
    height: 100px;
}
#game-form button{
    width: 80%;

}
#preview-container{
    max-height: 150px;
    background: white;
    margin-bottom: 5px;
    border-radius: 5px;
    display: flex;
}

#preview-image {
    width: 100%;
    object-fit: contain;
}

.error{
    background: lightpink;
}