.elementor-10064 .elementor-element.elementor-element-c58f5f8 > .elementor-element-populated{margin:19px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}/* Start custom CSS for column, class: .elementor-element-c58f5f8 *//* styles.css */
.sentence-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
}

.sortable-word {
    padding: 8px 12px;
    margin: 4px;
    background-color: #00008B;
    border: 1px solid #ccc;
    border-radius: 15px;
    cursor: pointer;
    user-select: none;
}

.sortable-ghost {
    opacity: 0.6;
    background: #cfcfcf;
}

.button-container {
    text-align: center;  /* Sentrerer alle inline og inline-block elementer inne i containeren */
}


button {

    background-color: #00008B;
    color: white;
    border: none;
    border-radius: px;
    cursor: pointer;
}
button:hover {
    background-color: #45a049;  /* Litt mørkere grønn for hover-effekt */
}

#message {
    text-align: center; /* Sentrerer teksten horisontalt */
    width: 100%; /* Gjør bredden til 100% av containeren den er i */
    margin-top: 20px; /* Gir litt vertikal plass over meldingen */
}

#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;  // Sentrerer innholdet horisontalt i en kolonne
    justify-content: center;  // Sentrerer innholdet vertikalt
    min-height: 100vh;  // Sørger for at containeren tar opp minst hele vinduets høyde
}

#message, button {
    text-align: center;  // Sentrerer tekst i knappen og meldingen
    margin: 10px 0;  // Gir vertikal margin for å skille elementene
    width: 100%;  // Gjør at bredden på teksten tar opp hele bredden til containeren
}

body {
    font-family: Arial, sans-serif;
}

.endgame-image {
    width: 10%;  /* Bredden som en prosentdel av containeren */
    max-width: 500px;  /* Maksimal bredde */
    height: auto;  /* Beholder bildets proporsjoner */
    display: block;  /* Sentrerer bildet i containeren */
    margin: 0 auto 20px;  /* Sentrering horisontalt og 20px margin nedenfor */
}

.congrats-message {
    text-align: center;  /* Sentrerer gratulasjonsteksten */
    margin-top: 20px;  /* Avstand over teksten */
}

.restart-button {
    display: block;  /* Gjør at knappen tar hele linjen */
    margin: 20px auto;  /* Sentrerer knappen og gir vertikal avstand */
    padding: 10px 20px;  /* Padding for å gjøre knappen større og mer klikkbar */
}

.front-page-container {
    text-align: center;
    padding: 20px;
    margin: 50px auto;
    max-width: 600px;
    background-color: #001220;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.front-page-container img {
    width: 20%;
    height: auto;
    margin-bottom: 20px;
}

.front-page-container button {
    background-color: #FF0000;
    color: white;
    border: none;
    cursor: pointer;
}

.front-page-container button:hover {
    background-color: #45a049;
}

#hint {
    text-align: center;  /* Sikrer at teksten innenfor hintet er midtstilt */
    width: 100%;  /* Gjør at hint-containeren tar full bredde */
    margin: 20px 0;  /* Legger til litt vertikal margin for visuell plass */
    font-style: italic;  /* Gir en stilistisk forskjell, om ønskelig */
}
.time-message {
    text-align: center;  /* Sentrerer teksten horisontalt */
    width: 100%;         /* Gjør at elementet tar full bredde */
    margin: 20px 0;      /* Legger til litt plass over og under */
    font-size: 24px;     /* Øker skriftstørrelsen */
    color: #fff;         /* Setter en mørkere tekstfarge for bedre lesbarhet */
}/* End custom CSS */