:root {
    --dk-color:#e8c088;
    --mid-color:#E4E6C3;
    --lt-color:#F7F7F2;
    --dkest-color:#261C15;
    --accent:#4b7ed7;
    --bg-color:#366D4B;
    --hover-color: #ffeab9;
    --triangle-blue:#4b7ed7; /* || */
    --triangle-yellow: #d9b056; /* ||| */
    --triangle-darkblue: #425bb2;
    --triangle-brown: #896456; /* | */
    --triangle-tan: #cb9e71; /* |||| */
    --triangle-pink: #d2706b;
    --triangle-green: #319b74; 
    --triangle-dark-green: #1d6c43; 
    --triangle-coneflower: #5763b7; /* | */
    --triangle-orange: #ff7a38; /* faa43d */ /* | */
    --triangle-burgundy: #912e50; /* | */
    --triangle-teal : #57a8ca; /* || */
    --triangle-slate : #566c90; /* | */
    --triangle-purple : #8544c9; /* | */
    --triangle-lime : #6dc759; /* || */
 }

 @font-face {
  font-family: disco;
  src: url(/fonts/Optixal.ttf);
}

h1{
    font-family: disco;
    font-size: xxx-large;
    font-weight: 100;
    padding: 5px;
}

.header_title{
    padding: 0px 0px 20px 0px;
    line-height: .2;
}


 header{
    margin: auto;
    line-height: 1.6;
    a{
        color: var(--dkest-color);
        border: 2px solid var(--dk-color);
        padding: 1px;
        border-radius: 5px;
    }

    a:hover{
        background-color: var(--hover-color);
    }
 }

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }

        .card {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 24px;
            padding-top: 5px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .text-center {
            text-align: center;
        }



        .mistakes {
            font-size: small;
            margin-bottom: 16px;
            color: #666;
        }

        .game-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 16px;
        }

        .word-button {
            padding: 20px;
            text-align: center;
            font-weight: bold;
            font-size: medium;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background-color: #f3f4f6;
            transition: all 0.2s;
        }

        .word-button:not([disabled]):hover {
            background-color: #e5e7eb;
        }

        .word-button.selected {
            outline: 2px solid var(--dk-color);
        }

        .word-button:disabled {
            cursor: not-allowed;
            opacity: 1;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 16px;
        }

        .control-button {
            font-size: 16px;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background-color: #e5e7eb;
        }

        .control-button:hover {
            background-color: #d1d5db;
        }

        .submit-button {
            background-color: var(--dk-color);
            color: black;
        }

        .submit-button:hover:not(:disabled) {
            background-color: var(--hover-color);
        }

        .submit-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .message {
            margin-top: 16px;
            text-align: center;
            font-size: 18px;
            background-color: var(--hover-color);
            border-radius: 5px;


        }

        .label_1{
            margin-top: 16px;
            text-align: center;
            font-size: 18px;
            background-color: #fef08a;
            border-radius: 4px;
        }

        .label_1.active{
            padding: 8px 16px;
            transition: all .5s;
        }

        .label_2{
            margin-top: 16px;
            text-align: center;
            font-size: 18px;
            background-color: #bbf7d0;
            border-radius: 4px;
        }

        .label_2.active{
            padding: 8px 16px;
            transition: all .5s;
        }

        .label_3{
            margin-top: 16px;
            text-align: center;
            font-size: 18px;
            background-color: #bfdbfe;
            border-radius: 4px;
        }

        .label_3.active{
            padding: 8px 16px;
            transition: all .5s;
        }

        .label_4{
            margin-top: 16px;
            text-align: center;
            font-size: 18px;
            background-color: #e9d5ff;
            border-radius: 4px;
        }

        .label_4.active{
            padding: 8px 16px;
            transition: all .5s;
        }

        /* Color classes for solved groups */
        .bg-yellow-200 { background-color: #fef08a; }
        .bg-green-200 { background-color: #bbf7d0; }
        .bg-blue-200 { background-color: #bfdbfe; }
        .bg-purple-200 { background-color: #e9d5ff; }

        footer{
            text-align: center;
            padding: 14px;
            font-size: 10pt;
        }

        .text{
            text-align: center;
            padding: 14px;
            font-size: 10pt;
        }

        header{
            text-align: center;
            padding: 14px;
        }

        p {
            text-align: center;
            padding: 4px;
        }
        


@media all and (orientation: portrait) {
    .word-button {
            padding-top: 5vw;
            padding-bottom: 5vw;
            padding-right: 0px;
            padding-left: 0px;
            font-size: 3vw;
        }

        .game-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 3px;
            margin-bottom: 16px;
        }

        .card {
            max-width: 100%;
            width: 100%;
            margin: 0 auto;
            background: white;
            padding: 2px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .header_title{
            font-size: 9vw;
            line-height: 0.7;
        }

        body{
            width: 100%;
            padding: 0px;
            background-color: beige;
        }

        h1{
            font-size: 9vw;
        }

        .controls{
            gap: 1vw;
        }

        .control-button {
            font-size: 3vw;
            }

        .mistakes {
            font-size: medium;
        }

}