/* Ren G Site Style Sheet */


/* animations */

@font-face {
    font-family: 'Bodoni 72';
    src: url(../fonts/bodoni-72-book.ttf) format('opentype');
    font-style: normal;
}

@keyframes fadeIn {
    to {
      opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
      transform: translateY(180px); /* Start 100px below its final position */
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}

/* global styles */

h1 {
    color: #492F24;

    /* Heading 1 */
    font-family: "Bodoni 72";
    font-size: 9vw;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
}

h2 {
    color: #492F24;

    /* Heading 2 */
    font-family: "Bodoni 72";
    font-size: 120px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

h3 {
    color: #492F24;

    /* Subheading */
    font-family: "Bodoni 72";
    font-size: 1.6vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

p {
    color: #492F24;

    /* Normal Text */
    font-family: "Bodoni 72";
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

a {
    color: #492F24;
    text-decoration: none;
}

body {
    background-image: url("../assets/Background-2.svg");
    cursor: url("../assets/93c81736d55c7366d7c9586e9c1e0f79.gif"), auto;
    padding: 0;
    margin: 0;
    background-color: #f4f2ed;
    background-attachment: fixed;
    /*background-repeat: repeat;*/
    background-position: center;
}

footer {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 5px 20px;
    font-size: 14px;
    border-top-left-radius: 10px;
}

footer p {
    font-size: 0.8vw;
}

/* landing page */

.landing-page {
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards;
    text-align: center;
}

.landing-page-nav-bar {
    justify-content: flex-start;
    align-items: center;
    gap: 40px; 
    display: inline-flex;
}

.landing-page-nav-bar h3:hover {
    text-decoration: underline;
}

.landing-page h1 {
    margin-top: 4vh;
    paint-order: stroke fill; 
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #FFF;
    margin-bottom: 0;
}

.icons {
    padding-top: 1.5%;
    padding-bottom: 2%;
    display: inline-flex;
    align-items: center;
    gap: 19px; 
}

.icons img {
    max-width: 100%;
    height: auto;
}

.source-photo img {
    flex-shrink: 1; 
    height: auto; 
    width: auto; 
    max-width: 50vw; 
    max-height: 50vh;
    border: 0.3vw solid #FFFFFF;
}

/* navbar div class (for all other pages) */

.navbar-logo {
    position: static;
    display: inline-flex;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
}

.logo {
    height: 7vh;
    padding-right: 8.2vw;
}

.logo h1 {
    letter-spacing: -3%;
    margin: 0;
    padding-left: 2vw;
    padding-top: 1.5vh;
    color: #FFB8C3;
    paint-order: stroke fill; 
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #492F24;
    font-size: 7.4vw;
}

.navbar {
    height: 7vh;
    display: inline-flex;
    gap: 8.2vw;
    margin-bottom: 0;
}

.navbar h3 {
    padding-top: 7vh;
    font-size: 1.8vw;
}

.navbar a:hover {
    text-decoration: underline;
}

/* homepage */

.intro-text {
    height: auto;
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards;
    margin: 0;
}

.intro-text h2 {
    margin-top: 14vh;
    margin-left: 14vw;
    margin-right: 10vw;
    font-size: 5.7vw;
}

.intro-text span {
    color: #FFB8C3;
}

/* shows */

.dates-and-shows {
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards;
}

.live-dates {
    text-align: center;
}

.live-dates h2 {
    margin: 0;
    font-size: 9vw;
    padding-top: 5vh;
    padding-bottom: 2vh;
}

.shows {
    animation: slideInFromBottom 1s ease-in-out forwards;
    margin-left: 28vw;
    margin-right: 5vw;
}

.shows p span {
    color: #FFB8C3;
}

/* contact page */

.contact {
    padding-top: 11vh;
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards;
    text-align: center;
}

.contact h2:hover {
    color:#FFB8C3;
}

.navbar-videos h1 {
    padding-bottom: 10vh;
}

/* music videos */

.most-recent-video {
    padding-top: 6vh;
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards;
    animation: slideInFromBottom 1s ease-in-out forwards;
}

.most-recent-video h3 {
    font-size: 4vw;
    margin: 0;
    padding-top: 2vh;    
    padding-bottom: 10vh;
    text-align: center;
}

.most-recent-video iframe {
    border: 10px solid #ffffff;
    margin-bottom: 0;
}

.videos h3 {
    font-size: 4vw;
    margin: 0;
    padding-top: 4.5vh;    
    padding-bottom: 8vh;
    text-align: center;
}

.videos {
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards;
    animation: slideInFromBottom 1s ease-in-out forwards;
}

.videos iframe {
    border: 10px solid #ffffff;
    margin-bottom: 0;
    margin-top: 3vh;
}

.video-container {
    position: relative;
    width: 80%;
    max-width: 840px; /* optional cap */
    aspect-ratio: 16 / 9; /* keeps video ratio */
    margin: 0 auto; /* center it */
  }
  
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

/* releases */

.listen h2 {
    text-align: center;
    font-size: 9vw;
    margin: 0;
    padding-top: 4vh;
    padding-bottom: 3vh;
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards;
}

.releases {
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards;
    animation: slideInFromBottom 1s ease-in-out forwards;
    text-align: center;
    margin-left: 19vw;
}

.release-text-img {
    display: flex;
    align-items: center;
    gap: 5vw;
    align-self: stretch;
    padding-bottom: 15vh;
}

.release-text-img img {
    max-width: 25vw;
    height: auto;
    flex-shrink: 1;
    object-fit: contain;
}

.release-text h3 {
    font-size: 4vw;
    margin: 0;
}

.release-text p {
    text-align: left;
    font-size: 2vw;
    color: #FFB8C3;
}

.release-text a {
    color: #FFB8C3;
}

.release-text a:hover {
    text-decoration: underline;
}

.release-text {
    display: flex;
    width: 30vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1px;
}

/* shop */

.shop {
    padding-top: 11vh;
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards;
    text-align: center;
}

.shop h2 {
    font-size: 9vw;
}
.shop h2 span {
    color: #FFB8C3;
}

@media screen and (max-width: 768px) {

    .landing-page {
        margin-top: 20vh;
    }

    .landing-page h1 {
        font-size: 14vw;
        margin-bottom: 0.1%;
    }

    .landing-page h3 {
        font-size: 2.5vw;
        margin-bottom: 1.7vh;
    }

    .icons {
        padding-top: 3%;
        padding-bottom: 3%;
        display: inline-flex;
        align-items: center;
        gap: 19px; 
    }

    .source-photo img {
        max-width: 55vw; 
        max-height: 55vh;
    }
    

    .navbar-logo {
        position: static;
        display: block;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
    }

    .logo {
        padding-left: 5vw;
        height: 7vh;
        text-align: center;
    }

    .logo h1 {
        font-size: 10vw;
    }

    .navbar h3 {
        font-size: 2.4vw;
        padding-top: 3.5vh;
    }

    .navbar {
        margin-left: 11vw;
        margin-right: 11vw;
        display: flex;
        gap: 8.2vw;
        margin-bottom: 0;
    }

    .intro-text h2 {
        margin-top: 20vh;
        margin-left: 12vw;
        margin-right: 8vw;
        font-size: 7vw;
    }

    .shows p {
        font-size: 3vw;
    }

    .shows {
        margin-left: 12vw;
    }

    .contact h2 {
        padding-top: 12vh;
        font-size: 12vw;
    }

    .most-recent-video h3 {
        padding-bottom: 5vh;
    }

    .videos h3 {
        padding-bottom: 5vh;
    }

    .release-text-img {
        padding-bottom: 8vh;
    }

    .release-heading h2 {
        margin-top: 3vh;
    }

    .shop h2 {
        font-size: 10vw;
        margin-top: 20vh;
    }

    footer p {
        font-size: 1.5vw;
    }


}