@charset "utf-8";

/*--------------------------------------------*/
/*Utility classes                             */
/*--------------------------------------------*/

.container {
    width: min(100% - 30px, 480px);
    margin-inline: auto;
}

.grid {
    display: grid;
    place-items: center;
}

.flex {
    display:flex;
    align-items: center;
}

/*--------------------------------------------*/
/*Background                                  */
/*--------------------------------------------*/

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #5695da url(../img/background.webp) center center / cover no-repeat;
  font-family: "Press Start 2P", system-ui;
}

main {
    min-height: calc(100vh - 50px - 100px);
}

header {
    height:100px;
}

footer {
    height: 50px;
    color: #2c2828;
    line-height: 50px;
    font-size: 10px;
}

/*--------------------------------------------*/
/*Main                                        */
/*--------------------------------------------*/

.title {
    font-size: 15px;
    color: #2c2828;
}

.subtitle {
    font-size: 8px;
    color: #2c2828;
}

.btn-group {
    width: 450px;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.guesses-left {
    color: #e64040;
    width:auto;
    height: 40px;
    line-height: 50px;
    margin-top: 20px;
}

.guess-times {
    font-size: 20px;
}

.flip-card {
    margin: 20px 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 2s;
}

.front {
    position: absolute;
    inset: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    background-color: #fff;
    text-align: center;
    cursor: not-allowed;
    font-size: 50px;
}

.back {
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #03300d; 
    color: #fff;
    position: absolute;
    inset: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    text-align: center;
    cursor: not-allowed;
    font-size: 50px;
}

.guess {
    width: 150px;
    height:50px;
    background-color: #ffaf24;
    color: #fff;
    border-radius: 5px;
    cursor: not-allowed;
    font-size: 15px;
}

.guess:hover {
    transition: ease-in-out 0.25s;
    background-color: #8b5e10;
}

.output {
    margin-top: 30px;
    width:450px;
    height: 100px;
    background: #03300d;
    font-size: 15px;
    color:#fff;
    border-radius: 10px;
    text-align: center;
    cursor: not-allowed;
}

.output::placeholder {
    color: #fff;
}

.play {
    width: 150px;
    height:50px;
    background-color: #a82b2b;
    color:#fff;
    border-radius: 5px;
    font-size: 15px;
}

.play:hover {
    background: #6e1818;
    transition: ease-in-out 0.25s;
}

/*--------------------------------------------*/
/*Media screen                                */
/*--------------------------------------------*/

@media screen and (max-width: 480px) {
    .output {
        width: 100%;
        font-size: 10px;
        flex-wrap: wrap;
    }

    .btn-group {
        width: 100%;
        gap: 100px;
    }

    .title {
        font-size: 10px;
    }

    .subtitle {
        font-size: 6px;
    }

    .guess-times {
        font-size: 8px;
    }
}