.madimi-one-regular {
    font-family: "Madimi One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

* {
    box-sizing: border-box;
    /* outline: 1px solid black; */
}

p,
figcaption {
    font-family: monospace;
    font-size: 35px;
}

body {
    margin: 0px;
    background-color: #E8D0B8;
}

header {
    /* background-color: #EAC38B; */
    color: #413334;

    .titleText {
        display: flex;
        justify-content: space-evenly;

        p {
            margin: clamp(1%, 5%, 10%);
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: #413334;
            font-family: "Madimi One";
            font-size: clamp(10px, 10vw, 100px);
        }

        .titleRock {
            color: #A9A7A8;
        }

        .titleRock:hover {
            background-image: url("/Rock-paper-scissors/content/images/rockBG.png");

        }

        .titlePaper {
            color: #E3E0E2;
        }

        .titleScissors {
            color: white;
        }
    }

    .description {
        margin: clamp(1px, 5px, 5px);
        display: flex;
        justify-content: center;

        p {
            text-align: center;
            font-size: clamp(20px, 3dvw, 50px);
        }

    }
}

content {
    display: flex;
    flex-direction: column;

    p {
        text-align: center;
    }

    .scoreboard {
        margin: clamp(1px, 5px, 10px);
        display: flex;
        flex-direction: column;
        background-color: #413334;

        .scoreTag {
            display: flex;
            justify-content: space-between;
        }

        .score {
            background-color: #B09268;
            padding: clamp(2px, 20px, 40px);
            display: flex;
            justify-content: space-between;
        }


        strong {
            text-align: center;
            vertical-align: middle;
            font-size: clamp(20px, 10dvw, 100px);
            color: #A9A7A8;
        }

        p {
            margin: clamp(1%, 1%, 5%);
            text-align: center;
            vertical-align: middle;
            font-size: clamp(10px, 10vw, 100px);
        }

        i {
            text-align: center;
            vertical-align: middle;
            font-size: clamp(10px, 5vw, 100px);
        }
    }

    .result {
        margin: 0px;

        p {
            font-size: clamp(15px, 3vw, 100px);
        }

    }

    .game {
        margin: clamp(2%, 5%, 5%);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-align: center;

        .player {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: center;

            p {
                margin: 0px;
                font-size: clamp(10px, 5vw, 100px);
            }

            .playerOptions {
                margin-top: 255px;
                display: flex;
                justify-content: space-evenly;
                align-items: baseline;
                max-width: 50vw;
            }

            @media (max-width:1000px) {
                .playerOptions {
                    margin-top: 20px;
                    display: flex;
                    flex-direction: column;
                    max-width: 50vw;
                    align-items: center;
                }
            }

            figure {
                margin: 0;
            }

            img {
                margin: clamp(5px, 10px, 10px);
                max-width: clamp(100px, 20vw, 600px);
                max-height: clamp(100px, 20vw, 800px);
                min-height: 70%;
            }

            img:hover {
                scale: 1.2;
            }
        }

        .computer {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            p {
                margin: 0px;
                font-size: clamp(10px, 5vw, 100px);
                vertical-align: top;
            }
            @media (max-width:1000px) {
                img{
                    max-width: clamp(150px, 40vw, 800px);
                    max-height: clamp(150px, 60vh, 800px);
                }
            }
            
            figure {
                justify-self: baseline;
                max-width: clamp(150px, 40vw, 1000px);
                max-height: clamp(150px, 80vh, 800px);
            }   
        }
    }
}