main {
    margin: -20vh 5vw 0 5vw;
}

.naslov-strani {
    display: flex;
    height: 25vh;
    background: linear-gradient(90deg, #f94449 0%, #913333 100%);
}
@keyframes slideIn {
    0% {
        transform: translateX(-100%); /* Start off-screen to the left */
    }
    100% {
        transform: translateX(0); /* End in its final position */
    }
}

.naslov-novice {
    display: inline-block;
    width: auto;
    margin-left: -5vw; /* Slightly shifts the div to the left */
    height: 10vh;
    background: linear-gradient(90deg, #f94449 0%, #913333 100%); /* Gradient from red to dark red */
    border-top-right-radius: 50px; /* Completely round top right edge */
    border-bottom-right-radius: 50px; /* Completely round bottom right edge */
    border-top-left-radius: 0; /* Ensure left edge is sharp */
    border-bottom-left-radius: 0;
    padding: 1vh 5vw;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    color: white;
    animation: slideIn 2.2s ease-out forwards; /* Apply animation */
}

main{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-height: fit-content;
}

.event-details {
    width: 45vw;
    background: white;
    border-radius: 5px;
    padding: 5%;
    min-height: fit-content;
    height: 60vh;
    margin-bottom: 2vh;
}

.go-back a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #000; /* Adjust the text color as needed */
    padding: 10px 20px;
    overflow: hidden;
    transition: color 0.4s ease-in-out;
    margin-bottom: 10vh;
}

.go-back a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #FF9914;
    z-index: -1;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.45, 0, 0.55, 1); /* Smooth animation */
}

.go-back a:hover {
    color: #fff; /* Text color change on hover */
}

.go-back a:hover::before {
    transform: translateX(0);
    animation: bounce 0.5s ease-out;
}

@keyframes bounce {
    0% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(1.05); /* Slight overshoot for bounce effect */
    }
    100% {
        transform: scaleX(1);
    }
}

@media (max-width: 768px) {
  main {
    margin: 0 5vw;
    display: block;
  }

  .naslov-strani {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 2vh 5vw;
  }

  .naslov-novice {
    width: 100%;
    margin-left: 0;
    height: auto;
    border-radius: 0;
    padding: 2vh 5vw;
    font-size: 1.2rem;
    text-align: center;
    box-shadow: none;
  }

  .event-details {
    width: 100%;
    height: auto;
    padding: 5vw;
    box-sizing: border-box;
  }

  .go-back a {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 5vh;
    padding: 12px 0;
  }
}