/* CSS page of base.html.twig */
/* in this order : btn green colors on every pages / logo_myvlog_ia1 / navbar links with greenline / dropdown toggle colors / 
menu burger / green text-shadow on all H / green underline of all H1  / body / general-div / arrow up / pagination / 
usa image maps next underline titles on every USA videos, west and east coast. / new green badge effect on first card for home page
and on last card on west and east coast. */

.btn{
    background-color: #65b868;
}

.logo_myvlog_ia1 {
    width: 80px;
    height: auto;
}

.nav-link {
    color: white;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.nav-link:hover {
    color: white;
}

/* green underline in all navbar link */
.nav-link::after {
    color:white;
    content: "";
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: #65b868;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -ms-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
    width: 100%;
}

/*navbar dropdown toogle treatment : */
/*dropdown toggle in navbar treatment for the css automaticcaly given fat-line*/
.dropdown-toggle::after {
    /*css automatically given : then i transform */
    /* border-top: .3em solid; 
    border-right: .3em solid transparent; 
    border-bottom: 0; 
    border-left: .3em solid transparent; */
    border-top: none;
    border-right: none; 
    border-bottom: none; 
    border-left: none; 
}

/* Color dropdown menu in navbar green */
.dropdown-menu {
    background-color: #65b868;
}

/* menu burger */
.navbar-toggler-icon {
    background-color: #28a745;
}

h1, h2, h3, h4, h5 {
    text-shadow: 0px 0px 20px #65b868;
}

/* green underline on all h1 */
h1 {
    position: relative;
    display: inline-block;
}

h1::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: #65b868;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -ms-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}

h1:hover::after {
    width: 100%;
}

body {
    background-color: #000;
    color: #fff;
    min-height: 100vh;
}

.general-div {
    margin: 1em auto;
    margin-top: 3rem;
    margin-bottom: 5rem;
    width: 85%;
    text-align: center;
}

/* Arrow up */
#back-to-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
    /* hide by default */
    display: none; 
    background-color: black; 
    color: #65b868;
    box-shadow: 0px 0px 20px 5px rgba(101,184,104,0.5);
    padding: 5px 10px;
    font-size: 24px;
    border-radius: 50%;
    text-decoration: none;
    z-index: 1000;
}

#back-to-top:hover {
    background-color: #333;
}

/* Pagination colors */
.pagination .page-link {
    background-color: #000;
    color: #65b868;
    border: 1px solid #65b868;
    box-shadow: 1px 1px 10px #65b868;
}

.pagination .page-link:hover {
    background-color: #fff;
    color: #65b868;
}

.pagination .page-item.active .page-link {
    background-color: #fff;
    color: #65b868;
    border: 1px solid #65b868;
}

/* Image of USA map on every USA pages, animation just after the green underline*/
.road-trip-container {
    position: relative;
}

.road-trip-title {
    position: relative;
    display: inline-block;
}

.road-trip-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: #65b868;
    transition: width 0.3s ease-in-out;
    transform: translateX(0%);
}

.road-trip-title:hover::after {
    width: 100%;
}

.road-trip-image {
    position: absolute;
    top: -15px;
    transform: translateX(0%);
    opacity: 0;
    width: 110px;
    height: auto;
    pointer-events: none;
}

.road-trip-title:hover + .road-trip-image {
    animation: fadeInRight 1.2s ease forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-70px);
        -webkit-transform: translateX(-70px);
        -moz-transform: translateX(-70px);
        -ms-transform: translateX(-70px);
        -o-transform: translateX(-70px);
    }
    50% {
        opacity: 1;
        transform: translateX(13px);
        -webkit-transform: translateX(13px);
        -moz-transform: translateX(13px);
        -ms-transform: translateX(13px);
        -o-transform: translateX(13px);
    }
    to {
        opacity: 1;
        transform: translateX(8px);
        -webkit-transform: translateX(8px);
        -moz-transform: translateX(8px);
        -ms-transform: translateX(8px);
        -o-transform: translateX(8px);
    }
}

/* Hide usa map image on mobile screen (less than 768px) */
@media screen and (max-width: 768px) {
    .road-trip-image {
        display: none;
    }
}

/* Green new badge on first card on home page and on last card on west and east coast */
.badge{
    background-color: #65b868;
}

.badge1 {
    position: absolute;
    display: inline-block;
    top: 20px;
    left: -5px;
    transform: rotate(-45deg);
    transform-origin: center center;
    font-size: 0.8em;
    overflow: hidden; /* To prevent the badge from overflowing (go out) the card */
}

.triangle-badge {
    position: absolute;
    display : inline-block;
    top: 0px;
    left: 0px;
    width: 0;
    height: 0;
    border-top: 50px solid #65b868;
    border-right: 50px solid transparent;
}

.hover-badge1, .hover-badge2 {
    position: absolute;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    top: 50%;
    font-size: 1.1em;
    padding: 0.2em 1em;
    white-space: nowrap;
    transform-origin: center center;
}

.hover-badge1 {
    right: -65px; /* For the right */
    transform: translateX(-100px) rotate(90deg);
}

.card:hover .hover-badge1 {
    transform: translateX(0) rotate(90deg);
    opacity: 1;
}

.hover-badge2 {
    left: -65px; /* For the left */
    transform: translateX(100px) rotate(270deg);
}

.card:hover .hover-badge2 {
    transform: translateX(0) rotate(270deg);
    opacity: 1;
}