/* General Styles */
body {
    min-height: 100vh;
}

/* To add back in once figure out collapse/expando */
/* a:hover{
    background-color: #0D0D0D;
} */

.active {
    text-decoration: underline;
}

.color-primary{
    color: #00ffff !important;
}

.color-secondary{
    color: #F3F3F3;
}

.bg-body-tertiary {
    background-color: #ED640C;
}

.background-black{
    background-color: #0D0D0D;
}

/* Adds border on bottom of div. */
.divider {
    border-bottom: 1px #00ffff solid;
    width: 100vw;
    box-shadow: 1px 1px 15px 1px #00ffff;
}  

.glow {
    text-shadow: 3px 3px 15px  #00ffff;
}

/* Bootstrap Overrides */

.navbar-nav .nav-link-active{
    color: #00ffff !important;
}

.img-thumbnail {
    border: none; /* Removes the border */
    padding: 0;   /* Removes the padding, if necessary */
  }

/* Typography */

/* Display:
For key lines of page. https://m3.material.io/styles/typography/applying-type#fea95f28-348c-42ae-95e1-1c5bfd819524 */
.display-large{
    font-size: 4.75rem;
    font-family: "Bruno Ace";
    font-weight: 400;
    text-shadow: 3px 3px 15px  #00ffff;
    line-height: 5.3rem;
    letter-spacing: -0.0206rem;        
}
.display-medium{
    /* to update */
    font-size: 3.5rem;
    font-weight: 400;
    font-family: "Bruno Ace";
    text-shadow: 3px 3px 15px  #00ffff;
    line-height: 4.3rem;
    letter-spacing: 0rem;        
}
.display-small{
    font-size: 2rem;
    font-weight: 400;
    font-family: "Bruno Ace";
    text-shadow: 3px 3px 15px  #00ffff;
    line-height: 3.67rem;
    letter-spacing: 0rem;        
}

/* Headline: short, high-emphasis text
https://m3.material.io/styles/typography/applying-type#43511b5a-fe60-4125-ac0c-571c4e6f0642 */
.headline-large{
    font-size: 3.3rem;
    font-weight: 400;
    font-family: "Montserrat";
    line-height: 3.33rem;
    letter-spacing: 0rem;        
}
.headline-medium{
    font-size: 2.33rem;
    font-weight: 400;
    font-family: "Montserrat";
    line-height: 3rem;
    letter-spacing: 0rem;        
}
.headline-small{
    font-size: 1.5rem;
    font-weight: 400;
    font-family: "Montserrat";
    line-height: 2.67rem;
    letter-spacing: 0rem;        
}

/* Title: short, medium emphasis text
https://m3.material.io/styles/typography/applying-type#e9e0cea3-10cb-405d-98a9-cf6a90758967 */
.title-large{
    font-size: 1.83rem;
    font-weight: 400;
    font-family: "Montserrat";
    line-height: 2.3rem;
    letter-spacing: 0rem;        
}
.title-medium{
    font-size: 1.33rem;
    font-weight: 500;
    font-family: "Montserrat";
    line-height: 2rem;
    letter-spacing: 0.0125rem;        
}
.title-small{
    font-size: 1.17rem;
    font-weight: 500;
    font-family: "Montserrat";
    line-height: 1.67rem;
    letter-spacing: 0.0081rem;            
}

/* Body: longer passages of text
https://m3.material.io/styles/typography/applying-type#19205dc2-64ec-4954-a95c-6e6b214c707e */
.body-large{
    font-size: 1.167rem;
    font-weight: 400;
    font-family: "Montserrat";
    line-height: 2rem;
    letter-spacing: 0.0419rem;        
}
.body-medium{
    font-size: 1rem;
    font-weight: 400;
    font-family: "Montserrat";
    line-height: 1.67rem;
    letter-spacing: 0.0206rem;        
}
.body-small{
    font-size: 0.83rem;
    font-weight: 400;
    font-family: "Montserrat";
    line-height: 1.33rem;
    letter-spacing: 0.0331rem;    
}

/* Label: very small text (e.g. buttons)
https://m3.material.io/styles/typography/applying-type#af6eb002-9cbb-4b64-bce6-1315d2252364 */
.label-large{
    font-size: 1.167rem;
    font-weight: 500;
    font-family: "Montserrat";
    line-height: 1.67rem;
    letter-spacing: 0.0081rem;
    text-transform: uppercase;
}
.label-medium{
    font-size: 1rem;
    font-weight: 500;
    font-family: "Montserrat";
    line-height: 1.33rem;
    letter-spacing: 0.0419rem;
    text-transform: uppercase;   
}
.label-small{
    font-size: 0.917rem;
    font-weight: 500;
    font-family: "Montserrat";
    line-height: 1.33rem;
    letter-spacing: 0.0419rem;
    text-transform: uppercase;
}

/* Fonts */
.roboto-mono {
    font-family: "Roboto Mono", serif;
    font-style: normal;
}

.roboto-slab {
    font-family: "Roboto Slab", serif;
    font-style: normal;
}

.sedgwick {
    font-family: "Sedgwick Ave Display";
}

.montserrat {
    font-family: "Montserrat";
}

.bruno-ace {
    font-family: "Bruno Ace" ;
}

.oswald {
    font-family: "Oswald", serif;
    font-style: normal;
}

.permanent-marker {
    font-family: "Permanent Marker";
}

/* Banner Styles */
.banner-video {
    width: 100%;
    height: 68vh; /* must be 100vh on large screens */
    overflow: hidden;
}

.banner-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -100;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(13, 13, 13, 5)); /* Example gradient */
    pointer-events: none; /* Makes sure the overlay doesn't interfere with interactions */
}

.banner-text {
    position: absolute;
    top: 37%;
    left: 0%;  /* 22% for full screen. */
    text-align: center;
}

.banner-text h1 {
    margin: auto;
}

.banner-text h3 {
    margin-top: 10px;
}

.banner button {
    z-index: 1;
}

/* Typography */
.article-headline {
    padding-bottom: 3.5rem;
    align-content: center;
}

/* Features */

.text-body-margin{
    margin: 32px;
}

.feature {
    position: absolute;
    width: 100vw;
    height: 20vh;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.feature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.feature:hover {
    /* transform: scale(1.01); */
}

.feature-logo {
    height: 4rem;
    z-index: 3;

}

.feature-logo img {
    height: 100%;
    width: auto;
}

.video-banner {
    position: relative;
    overflow: hidden;
  }
  
  .feature-image,
  .feature-video {
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: visible ;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out;
  }
  
  .feature-image {
    z-index: 2;
    opacity: 1; /* Fully visible by default */
  }
  
  .feature-video {
    z-index: 1;
    opacity: 0; /* Hidden by default */
  }
  
  .video-banner:hover .feature-image {
    opacity: 0; /* Fade out image on hover */
  }
  
  .video-banner:hover .feature-video {
    opacity: 1; /* Fade in video on hover */
  }
  


/* Effects */

.fade-in {
    animation: fadeIn 3s;
}

.image-hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-hover-effect:hover {
    transform: scale(1.2);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    animation: wiggle 0.7s infinite alternate;
}

/* Portfolio */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.row-centered {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.card-wrapper {
    width: 300px;
    height: 300px;
    margin: 10px;
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.5s, z-index 0.5s;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.front,
.back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.back {
    transform: rotateY(180deg);
}

.card-wrapper.expanded {
    transform: translate(50%, 50%) scale(2) rotateY(180deg);
    z-index: 100;
}

.card-wrapper.expanded .back {
    transform: rotateY(0deg);
}

/* Utility Classes */
.centered-div {
    width: 70rem;
    margin: 0 auto;
}

.square {
    height: 150px;
    width: 150px;
}

/* Animations */
@keyframes wiggle {
    0% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(2deg);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Media Queries */

@media screen and (min-width: 500px) {
    .feature {
        height: 30vh;
        align-content: center;
    }

    .banner-video {
        height: 68vh;
    }

    .feature-logo {
        height: 5rem;
    }
}


@media screen and (min-width: 1000px) {

    .article-headline {
        /* font-size: 3rem; */
        padding-bottom: 3rem;
    }

    .column-expand-1x2 {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .feature {
        height: 50vh;
        align-content: center;
    }
    .feature-logo {
        height: 7rem;
    }
}

@media screen and (min-width: 1500px) {

    .article-headline {
        /* font-size: 4rem; */
        padding-bottom: 3rem;
    }
    .feature {
        height: 90vh;
        align-content: center;
    }

    .feature-img {
        width: 100vw;
    }

    .block {
        width: 60rem;
    }

    .feature-logo {
        height: 10rem;
    }

    .square {
        height: 300px;
        width: 300px;
    }
}