.header {
    font-family: Arial, san-serif;
    width: 90vw;
    height: 100px;
    background-color: rgba(240, 240, 240, 1);
    color: black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1000;
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    padding: 5px 40px;
    border-radius: 10px;
    overflow: visible;
    font-size: 35pt;
}

.lesson-header {
    font-family: Arial, san-serif;
    width: 85vw;
    height: 70px;
    background-color: lightblue;
    color: black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    position: relative;
    /* z-index: 1000; */
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    padding: 5px 40px;
    border-radius: 10px;
    overflow: visible;
    font-size: 25pt;
}

.skill-box {
    font-family:
        Arial,
        sans serif;
    background-color: rgba(240, 240, 240, 1);
    width: 90%;
    color: black;
    display: flex;
    flex-wrap: wrap;
    /*	flex-direction: row; */
    justify-content: flex-start;
    align-items: center;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    border-radius: 15px;
    padding: 5px 40px;
}

.headline {
    font-size: 75pt;
}

.headline2 {
    font-size: 50pt;
}

.giant {
    font-size: 150pt;
}

.giant2 {
    font-size: 300pt;
}

.question {
    font-size: 100pt;
    text-shadow: 3px 4px 8px #000000;
}
/* Word cards */

.word-card {
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    background-color: lightgray;
    width: 400px;
    height: 200px;
    border: 0px;
    padding: 10px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    font-size: 60pt;
    font-family: Arial, sans-serif;
    position: relative;
}

.cloud-container {
    /* 1. Set the background image URL */
    background-image: url("../background/sky.jpg"); /* */

    /* 2. Prevent the image from repeating */
    background-repeat: no-repeat; /* */

    /* 3. Keep the background image fixed relative to the viewport */
    background-attachment: fixed; /* */

    /* 4. Center the background image */
    background-position: center; /* */

    /* 5. Scale the image to cover the entire div area */
    background-size: cover; /* */

    /* Optional: Ensure the div has a specified height so the background is visible */
    min-height: 500px;
    /* Or set height: 100vh; for a full-screen div */

    /* Optional: Add padding and color for content visibility */
    color: white;
    padding: 20px;
    /* Other styles like display: flex, justify-content: center, align-items: center can center content */

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    font-family:
        Arial,
        sans serif;
    background-color: rgba(240, 240, 240, 1);
    width: 90vw;
    color: black;
    /*box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);*/
    margin-bottom: 20px;
    border-bottom: 0px solid #555;
    border-radius: 15px;
}

.word-cloud {
    background-color: transparent;

    height: 90px;
    border: 10px;
    padding: 10px 75px;
    align-items: center;
    justify-content: center;
    margin: 15px;
    border-radius: 15px;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    font-size: 30pt;
    font-family: Arial, sans-serif;
    position: relative;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}

.digraph-container {
    display: flex;
    flex-wrap: wrap;
}

.digraph-container-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border: 2px solid red;
    /*flex-wrap: wrap;*/
}

.digraph-bubble {
    background-color: purple;
    color: white;

    height: 110px;
    width: 110px;
    border: 10px;
    padding: 10px 10px;
    align-items: center;
    justify-content: center;
    margin: 15px;
    border-radius: 15px;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    font-size: 50pt;
    font-family: Arial, sans-serif;
    position: relative;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
}



/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-container {
    display: flex;
    flex-wrap: wrap;
}

.flip-card {
    background-color: transparent;
    width: 400px;
    height: 250px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    padding: 10px 10px;
    cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.sm-flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back,
.flip-question,
.flip-mud,
.flip-check {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.5);
    font-size: 60pt;
    font-family: Arial, sans-serif;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    color: black;
}

.flip-question {
    background-image: url("../background/purple_question.jpg");
    /*background-color: red;*/
}

.flip-mud {
    background-image: url("../background/mud.jpg");
}

.flip-check {
    background-image: url("../background/check.jpg");
}

/* Style the back side */
.flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
}

/* small flip container */

.sm-flip-card {
    background-color: transparent;
    width: 150px;
    height: 150px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    padding: 10px 10px;
    cursor: pointer;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.sm-flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* stopwatch and clock */

body {
    margin: 0;
    padding-bottom: 100px;
    font-family: Arial, sans-serif;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background-color: #222;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
}

.stopwatch {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
}

.dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.dot.green {
    background-color: #4caf50;
}
.dot.red {
    background-color: #f44336;
}
.dot.blue {
    background-color: #2196f3;
}

.dot:hover {
    transform: scale(1.2);
}

.clock {
    font-size: 24px;
}