html {
        background-color: moccasin;
        height: 100%;
}

body {
        background-color: cadetblue;
        transition: background-color 0.1s ease-out;
        margin: 20px;
        padding: 0;
        font-family: "Almendra";
}

header {
        background-color: moccasin;
        padding: 10px;
        border-bottom: 2px dashed gray;

        .header-container {
                display: flex;
                flex-direction: row-reverse;
                align-items: center;

                h1 {
                        color: cornflowerblue;
                        font-family: "Almendra";
                        text-align: left;
                        font-size: clamp(20px, 10vh, 55px);
                        height: auto;
                        max-height: 100px;
                        flex: 1;
                }

                .boat {
                        height: auto;
                        max-width: 150px;
                        width: 100%;
                        pointer-events: none;
                        display: block;
                }

                .boat-container {
                        display: flex;
                        justify-content: left;
                        align-items: left;
                        width: 100%;
                        flex: 2;
                }
        }
}

.Content {
        margin-left: 10px;
        margin-right: 10px;


        .Instruction {
                display: flex;
                align-items: baseline;
                gap: 10px;

                details {
                        p {
                                line-height: 1.4;
                                font-size: 20px;
                                color: black;
                        }
                }

                p {
                        font-size: 40px;
                        text-align: left;
                        line-height: 1;
                        margin-top: 5px;
                        margin-bottom: 5px;
                }

                li {
                        line-height: 1.4;
                        font-size: 20px;
                        color: black;

                }

        }

        .game {
                display: flex;
                width: 100%;
                gap: 10px;

                .table-container {
                        padding: 10px;
                        flex: 1;
                        background-color: cadetblue;

                        table,
                        th,
                        td,
                        tr {
                                border: 1px solid black;
                        }

                        tr:nth-child(even) {
                                background-color: rgba(0, 0, 0, 0.2);
                        }

                        tr:nth-child(odd) {
                                background-color: rgba(0, 0, 0, 0.125);
                        }

                        table {
                                border-collapse: collapse;
                                width: 100%;
                        }

                        th,
                        td {
                                padding: 10px;
                                text-align: center;
                        }

                        th {
                                background-color: darkseagreen;
                        }
                }

                .button-container {
                        flex: 1;
                        padding: 10px;

                        .button-container-part {
                                display: flex;

                                button {
                                        font-family: "Almendra";
                                        font-size: 18px;
                                        width: 100%;
                                        text-align: center;
                                        transition-duration: 0.2s;
                                        padding: 7px;
                                        height: clamp(30px, 15vh, 85px);
                                }

                                button:hover {
                                        background-color: darkseagreen;
                                        color: black;
                                        cursor: grab;
                                        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
                                        border: 2px solid black;
                                }

                                button:disabled {
                                        pointer-events: none;
                                }
                        }
                }
        }
}

footer {
        background-color: moccasin;
        width: 100%;
        margin-top: 25px;
        text-align: center;
        border-top: 2px dashed gray;
}