/* Reset margin and padding, set up a fullscreen view */
    body, html {
        margin: 0;
        padding: 0;
        height: 100vh;
        font-family: Arial, sans-serif;
        background: url('background.webp') no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
    }

.top-bar {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Sort med 80% opacitet */
	color: #fff;
    padding: 15px 0;
    text-align: center;
    font-size: 16px;
    position: absolute; /* Skift til absolute */
    top: -25px; /* Skub den op uden for visningen */
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
    /* Main container centered horizontally */
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 30px;
    }

    /* Style the wheel container to stay fixed and centered on the screen */
    #wheel-container {
        position: fixed;
        top: 34%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 24vw; /* Default for large screens */
		font-size: 18px;
        max-width: 465px;
        height: auto;
        z-index: 10;
    }

    /* Fixed wheel size */
    #wheel {
        width: 100%;
        height: 100%;
        transform-origin: center center;
        transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
    }

    /* Style the arrow to point to the top center */
    #arrow {
        position: absolute;
        top: 46%;
        left: 105%;
        transform: translateX(-50%) rotate(90deg);
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 40px solid #ff0000;
    }

    /* Style the spin button */
    #spin-button {
        position: absolute;
        top: 60%;
        transform: translateX(-50%);
        left: 50%;
        padding: 12px 24px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(45deg, #0073e6, #005bb5);
        border: none;
        border-radius: 8px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 99;
    }

    #spin-button:hover {
        background: linear-gradient(45deg, #005bb5, #004494);
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
    }

    /* Result container positioned below the button */
    #result-container {
        position: absolute;
        top: 70%;
        transform: translateX(-50%);
        left: 50%;
        padding: 10px;
        background-color: #fff;
        border: 2px solid #333;
        width: 300px;
        max-width: 90vw;
        box-sizing: border-box;
        text-align: center;
        z-index: 99;
        
    }
/* Default style */
#wheel-container {
    width: clamp(200px, 25vw, 500px); /* Responsive width range */
    max-width: 500px;  /* Ensures it doesn't get too large */
}

/* Large screens (24" Desktop and up) */
@media (min-width: 1921px) {
    #wheel-container {
        width: 22vw;
    }
}

/* Medium screens (13" Notebook to 22" Desktop) */
@media (max-width: 1920px) and (min-width: 1025px) {
    #wheel-container {
        width: clamp(200px, 24vw, 450px);
    }
}

/* Small screens (Tablets and smaller devices) */
@media (max-width: 1024px) and (min-height: 601px) {
    #wheel-container {
        width: clamp(200px, 32vw, 350px);
    }
}

/* Smaller tablets */
@media (max-width: 768px) {
    #wheel-container {
        width: clamp(200px, 47vw, 300px);
    }
}

/* Very small devices (Phones) */
@media (max-width: 550px) {
    #wheel-container {
        width: clamp(150px, 71vw, 300px);
    }
}

/* Extra small devices */
@media (max-width: 320px) {
    #wheel-container {
        width: 90vw;
    }
}
/* 768x360 Mobile Breakpoint */
@media (max-width: 768px) and (max-height: 360px) {
    #wheel-container {
        width: clamp(185px, 100vw, 100px);
    }
}

    




/* Baggrundsboks til formularen */
#form-container {
    width: 320px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9); /* Hvid baggrund med lidt gennemsigtighed */
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
}

#form-container h2 {
    margin-top: 0;
    color: #333;
}

#form-container label {
    display: block;
    text-align: left;
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}

#form-container input[type="text"],
#form-container input[type="email"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#submit-button {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(45deg, #0073e6, #005bb5);
    border: none;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

#submit-button:hover {
    background: linear-gradient(45deg, #005bb5, #004494);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
}