html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.sightings-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.sighting-button {
    display: inline-block;
    padding: 0.75rem 1rem;
    background-color: #007bff; /* Bootstrap blue */
    color: white;
    text-decoration: none; /* remove underline */
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.2s ease-in-out;
}

    .sighting-button:hover {
        background-color: #0056b3; /* darker blue */
    }

    .sighting-button.seen {
        background-color: #28a745; /* green for "seen" */
    }

.text-center h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.btn {
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1.1rem;
}
.card {
    transition: transform 0.2s, box-shadow 0.2s;
}

    .card:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }

/* Styling för alla "sighting cards" */
.sighting-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

    .sighting-card:hover {
        transform: scale(1.03);
        box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    }

.sighting-detail-img {
    width: 100%; /* fyller containerbredden */
    max-width: 500px; /* begränsa maximal bredd */
    height: 300px; /* fast höjd */
    object-fit: cover; /* beskär bilden istället för att förvränga */
    border-radius: 12px; /* lite rundade hörn */
    margin-bottom: 20px; /* lite luft under bilden */
}

.sighting-card-img {
    width: 100%; /* fyller kortets bredd */
    height: 200px; /* fast höjd för alla kort */
    object-fit: cover; /* beskär proportionerligt */
    border-radius: 8px; /* rundade hörn */
}
/* Gemensam stil för alla arketyp-bilder */
.archetype-img {
    width: 100%; /* Bilden tar hela kortets bredd */
    height: 300px; /* Samma höjd på alla bilder */
    object-fit: cover; /* Beskär bilden för att fylla boxen utan att tappa proportioner */
    border-radius: 4px; /* Lite rundade hörn */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smidig animation vid hover */
}

    /* Hover-effekt */
    .archetype-img:hover {
        transform: scale(1.03); /* Liten zoom */
        box-shadow: 0 4px 20px rgba(0,0,0,0.3); /* Lätt skugga */
    }
/* Hover-effekt på hela kortet */
.hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .hover-card:hover {
        transform: scale(1.03);
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }