:root {
    --mainColor: #153e82;
    --transparentLightDark: rgba(0, 0, 0, 0.3);
    --transparentDark: rgba(0, 0, 0, 0.7);
    --darkgray: rgba(80, 80, 80, 1);
    --lightgray: rgba(200, 200, 200, 1);
    --slightgray: rgb(220, 220, 220, 1);
}

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100dvh;
    background-color: var(--mainColor);
    overflow: hidden;
}

.content {
    display: flex;
    flex-direction: row;
    gap: 25px;
    padding: 50px;
    align-items: center;
    justify-content: space-evenly;
    width: min(900px, 90dvw);
    height: fit-content;
    z-index: 10;
    background-color: white;
    border-radius: 25px;
    box-sizing: border-box;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.08),
        0 20px 25px -5px rgba(0, 0, 0, 0.03);
}

.logo {
    width: 100%;
    max-width: 450px;
    height: auto;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 275px;
    font-weight: 500;
}

.tr-padding-bottom td {
    padding-bottom: 10px;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: none;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.2s ease;
    background-color: gray;
    color: white;
    padding: 5px 8px;
}

.button:hover {
    cursor: pointer;
    background-color: var(--mainColor);
    color: white;
}

.bold {
    font-weight: bold;
}

.highlight {
    color: var(--mainColor);
}

.word-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.word {
    position: absolute;
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0.07;
    color: white;
    transition: transform 0.3s ease;
    white-space: nowrap;
}

.w-1 {
    font-size: 7rem;
    top: 3%;
    left: 20%;
}

.w-2 {
    font-size: 5rem;
    top: 18%;
    right: 10%;
}

.w-3 {
    font-size: 6.5rem;
    top: 28%;
    left: -2%;
}

.w-4 {
    font-size: 8rem;
    bottom: 15%;
    right: 15%;
}

.w-5 {
    font-size: 3rem;
    bottom: 4%;
    left: 5%;
}

@media (max-width: 700px) {
    .content {
        flex-direction: column;
    }

    .w-1 {
        font-size: 4.5rem;
        top: 2%;
        left: 10%;
    }

    .w-2 {
        font-size: 2rem;
        top: 15%;
        left: 5%;
    }

    .w-3 {
        font-size: 3.5rem;
        top: 75%;
        left: 5%;
    }

    .w-4 {
        font-size: 2rem;
        top: 22%;
        left: 35%;
    }

    .w-5 {
        font-size: 1rem;
        top: 90%;
        left: -4%;
    }
}