style.css

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');
    * {
        font-family: 'Poppins', sans-serif!important;
    }
    
    html {
        height: 100%;
        display: grid;
        align-items: center;
        justify-items: center;
    }
    
    html[data-theme="light"] {
        --bg-base: #a8b3c4;
        --bg-grad: linear-gradient(315deg, #b8c6db 0%, #e3e7eb 74%);
        --bg-grad-modal: linear-gradient(135deg, #b8c6db 0%, #e3e7eb 74%);
        --bg: #FCFCFC;
        --bg-panel: #555454;
        --color-headings: #8499b9;
        --btn-color: rgb(175, 227, 255);
        --color-text: #181717;
    }
    
    html[data-theme='dark'] {
        --bg-base: #5a6672;
        --bg-grad: linear-gradient(315deg, #485461 0%, #28313b 74%);
        --bg-grad-modal: linear-gradient(135deg, #485461 0%, #28313b 74%);
        --bg: #333333;
        --bg-panel: #434343;
        --color-headings: #69768a;
        --btn-color: rgb(56, 126, 163);
        --color-text: #fff6f6;
    }
    
    body {
        background-color: var(--bg-base) !important;
        background-image: var(--bg-grad) !important;
        max-width: 80%;
        min-width: 75%;
        display: flex;
        align-self: center;
        flex-direction: column;
    }
    
    .overall-container {
        margin: 0 auto;
        min-width: 50%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-self: center;
    }
    
    h1,
    #header-span {
        color: var(--color-text);
        font-family: 'Playfair Display', serif!important;
        font-size: 5rem;
        padding-top: 0.1rem;
        padding-bottom: 0rem;
    }
    
    #header-span {
        background-image: linear-gradient( transparent calc(65% - 5px), darken(--bg-base, 15%) 5px, );
        background-size: 0;
        background-repeat: no-repeat;
        display: inline;
        transition: 0.5s ease;
    }
    
    h1:hover {
        background-size: 100%;
    }
    
    .fa {
        color: var(--color-text);
        font-size: 1rem;
        position: absolute;
        max-height: 2.2rem;
        max-width: 2.2rem;
    }
    
    .game-container {
        min-width: 90%;
        height: 60vh;
        align-content: center;
        margin: 0 auto;
    }
    
    .title-container {
        align-self: center;
        padding: 0rem;
        text-align: center;
        width: 90vw;
        border-bottom: solid 1px var(--color-text);
    }
    
    table {
        margin: 0 auto;
    }
    /* Default Table Style */
    
    #dvTable {
        border: none;
        background: var(--bg-grad);
        min-width: 5rem;
        max-height: 50%;
        max-height: 37.5rem;
        overflow-y: scroll;
        font-size: 1.5rem;
    }
    
    #dvTable::-webkit-scrollbar {
        width: 0 !important
    }
    
    #dvTable {
        overflow: -moz-scrollbars-none;
    }
    
    #dvTable::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }
    
    #dvTable {
        -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        scrollbar-width: none;
    }
    
    #dvTable thead th,
    #dvTable tfoot th {
        color: #777;
        background: rgba(0, 0, 0, .1);
    }
    
    #dvTable caption {
        padding: .5rem;
    }
    
    #dvTable th,
    #dvTable td {
        padding: .5rem;
        border: 1px solid lightgrey;
    }
    
    .key-container {
        align-self: center;
    }
    
    .keyboard-button-keys {
        width: 5.75rem;
        height: 4rem;
        margin: 0rem;
        font-size: 1.5rem;
    }
    
    #a {
        margin-left: 0rem;
    }
    /* modal styling */
    
    #modal-levels {
        list-style-type: none;
    }
    
    #modal-notes {
        padding: 0.5rem;
        border: 1px solid;
        border-color: var(--color-text);
        width: auto;
    }
    
    .modal-body,
    .modal-header,
    .modal-levels {
        color: var(--color-text)!important;
    }
    
    .modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: 200ms ease-in-out;
        border: 1px solid rgb(8, 0, 0);
        border-radius: 10px;
        z-index: 10;
        font-size: 0.6rem;
        background-color: rgb(80, 77, 88);
        background-image: var(--bg-grad-modal);
        min-width: 40%;
        max-width: 80%;
    }
    
    .modal-leader {
        width: auto !important;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }
    
    .modal.active {
        transform: translate(-50%, -50%) scale(1);
    }
    
    #level-select {
        color: var(--color-text);
        font-size: 1.5rem;
    }
    
    .modal-header {
        padding: 0.25rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--color-text);
    }
    
    .modal-header .title {
        font-size: 2rem;
        padding: 0.5rem;
        font-weight: bold;
    }
    
    .modal-header .close-button {
        cursor: pointer;
        border: none;
        outline: none;
        background: none;
        font-size: 2rem;
        color: rgb(177, 85, 85);
        font-weight: bold;
    }
    
    .modal-body {
        padding: 2rem 1.25rem;
        font-size: 1.125rem;
    }
    
    #overlay {
        position: fixed;
        opacity: 0;
        transition: 200ms ease-in-out;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
        pointer-events: none;
    }
    
    #overlay.active {
        opacity: 1;
        pointer-events: all;
    }
    /* modal styling ends here */
    
    .overall-container {
        display: flex;
        flex-direction: row;
        padding: 0.15rem;
    }
    
    .word-box {
        border: 1px solid black;
        height: 15.625rem;
        width: 15.625rem
    }
    
    .hangman-figure {
        border: 1px solid black;
        height: 15.625rem;
        width: 15.625rem
    }
    
    .attr {
        color: var(--color-text);
        margin: 0 auto;
        padding-top: 1rem;
        font-size: 1rem;
    }
    /* header text animations */
    /*  */
    
    .gradient-text:hover {
        animation: expand 0.5s ease forwards;
    }
    
    @keyframes expand {
        0% {
            background-size: 50%;
            background-position: 0 0;
        }
        20% {
            background-size: 55%;
            background-position: 0 1em;
        }
        100% {
            background-size: 325%;
            background-position: -10em -4em;
        }
    }
    
    @keyframes expand-rev {
        0% {
            background-size: 325%;
            background-position: -10em -4em;
        }
        20% {
            background-size: 55%;
            background-position: 0 1em;
        }
        100% {
            background-size: 50%;
            background-position: 0 0;
        }
    }
    /* light and dark mode toggle */
    
    .container {
        background-color: var(--bg-panel);
        margin: 5em;
        padding: 5em;
        border-radius: 15px;
        display: grid;
        grid-template-columns: 80% auto;
        grid-template-rows: auto auto;
        grid-template-areas: "title switch" "content content";
    }
    
    input[type=checkbox] {
        height: 0;
        width: 0;
        visibility: hidden;
    }
    
    #level-select {
        font-size: 1.5rem;
    }
    
    #lvl-chk {
        color: #181717 !important;
    }
    
    label {
        cursor: pointer;
        text-indent: -9999px;
        width: 52px;
        height: 27px;
        background: grey;
        float: right;
        border-radius: 100px;
        position: relative;
    }
    
    label:after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 90px;
        transition: 0.3s;
    }
    
    input:checked+label {
        background: var(--color-headings);
    }
    
    input:checked+label:after {
        left: calc(100% - 5px);
        transform: translateX(-100%);
    }
    
    label:active:after {
        width: 45px;
    }
    
    html.transition,
    html.transition *,
    html.transition *:before,
    html.transition *:after {
        transition: all 750ms !important;
        transition-delay: 0 !important;
    }
    /* desktop styles here */
    /* desktop styles here */
    /* desktop styles here */
    /* desktop styles here */
    /* desktop styles here */
    
    html {
        font-size: 62.5%;
    }
    
    body {
        font-family: 'Rubik', sans-serif;
        color: #fff;
        background-color: #233d4d;
    }
    
    .container {
        max-width: 70rem;
        width: 100%;
        padding: 2rem;
        margin: auto;
    }
    
    .container p {
        font-size: 1.8rem;
        text-align: center;
        margin: 2rem 0;
    }
    
    .game-box {
        padding: 1rem;
        margin: 6rem 0 2rem;
        display: flex;
        flex-direction: row;
    }
    
    .refresh-btn,
    .user-btn,
    .lvl-btn-tournament,
    .game-btn {
        background-color: var(--btn-color);
        color: var(--color-text);
        font-size: 1.05rem;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        display: inline-block;
        outline: none;
        border: none;
        cursor: pointer;
    }
    
    .figure {
        display: block;
        height: 24rem;
        width: 20rem;
        fill: transparent;
        stroke: #fff;
        stroke-width: 4px;
        stroke-linecap: round;
        flex-shrink: 0;
    }
    
    .body-part {
        display: none;
    }
    
    .content {
        height: 24rem;
        max-width: 50rem;
        width: 100%;
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .word-wrap {
        font-size: 3rem;
        height: 70%;
        list-style-type: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .letter {
        text-align: center;
        display: block;
        height: 3.5rem;
        width: 2.75rem;
        margin-right: 0.8rem;
        border-bottom: 4px #fff solid;
    }
    
    .not-present {
        height: 30%;
        padding: 1rem;
        display: flex;
        display: none;
    }
    
    .not-present.visible {
        display: flex;
    }
    
    .not-present h2 {
        display: inline-block;
        padding: 0 0 0 4rem;
        font-size: 2rem;
        font-weight: 500;
    }
    
    .not-present p {
        font-size: 2rem;
        display: inline-block;
        margin: 0;
        padding: 0 1rem;
    }
    
    .game-bg {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        z-index: 10;
        display: none;
    }
    
    .game-bg.visible {
        display: block;
    }
    
    .no-work {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 100;
        max-width: 40rem;
        width: 75%;
        height: 15rem;
        padding: 2rem;
        line-height: 1.6;
        margin: auto;
        background-color: var(--color-headings);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
    }
    
    .no-work p {
        font-size: 2rem;
    }
    
    .display-msg {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 100;
        max-width: 40rem;
        width: 75%;
        height: 20rem;
        padding: 2rem;
        line-height: 1.6;
        margin: auto;
        background-color: #233d4d;
        color: var(--color-text);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        display: none;
    }
    
    .display-msg.visible {
        display: flex;
    }
    
    .display-msg p {
        font-size: 2rem;
        margin: 0;
    }
    
    .display-msg .play {
        font: inherit;
        font-size: 1.6rem;
        padding: 1.2rem;
        cursor: pointer;
        margin-top: 3rem;
        background-color: var(--bg-grad-modal);
        border-radius: 4px;
        color: var(--color-text);
        border: none;
        outline: none;
        transition: opacity 200ms ease-in;
    }
    
    @media (hover: hover) {
        .display-msg .play:hover {
            opacity: 0.75;
        }
    }
    
    .msg-info {
        font-size: 0.75rem;
    }
    
    #name-form {
        background-color: var(--bg);
        /* margin: .5rem; */
        max-height: 2.5rem;
    }
    
    #name-form {
        background-color: var(--bg);
        color: var(--color-text);
        /* margin: .5rem; */
        max-height: 2.5rem;
    }
    
    .warning-letter {
        border: 2px --color-text;
        border-radius: 8px;
        background-color: var(--bg-grad);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 40rem;
        width: 75%;
        margin: auto;
        transform: translateY(100%);
        transition: transform 200ms ease-in;
    }
    
    .warning-letter.visible {
        transform: translateY(-20%);
    }
    
    .warning-letter p {
        margin: 2rem;
        font-size: 1.8rem;
    }