/* Project Portfolio CSS */

/* IMPORTS */

/* Font Imports */
@import url('https://fonts.cdnfonts.com/css/lexipa');
@import url('https://fonts.cdnfonts.com/css/nova-stamp');
@import url('https://fonts.cdnfonts.com/css/pic0');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*color: black;*/

}

body {
    /*position: relative;
    min-height: 100vh;
    
    /* Grid pattern on top of background image */
    /*background-color: #d2d2d2;
    background-image: 
        repeating-linear-gradient(
            to right, transparent 0 100px,
            #25283b22 100px 101px),
        repeating-linear-gradient(
            to bottom, transparent 0 100px,
            #25283b22 100px 101px
        );*/
    background: linear-gradient(90deg,#30012e,#08022c);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*background-color: #052a47;*/
}
/*
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-image: url(/assets/colorful-2174045_1920.png);
    background-color: ;
    background-size: cover;
    background-position: top left;
    background-repeat: repeat;
    z-index: -1;
    pointer-events: none;
    
}*/

.hero-background {
    display: ;
    place-items: center; /* centers hero card both vertically and horizontally*/
    width: 100%;
    background-color: black;
    background-size: cover;
    min-height: 100vh; /*<-- Space below paragraph 
    /*margin-bottom: 10px; /* margin space between scrolling skills and this section */
    background-position: center;
}

.hero-background .author {
    font-family: "Architects Daughter", cursive;
    font-weight: 400;
    text-align: center;
    max-width: 300px;
    color: #f4effa; /* color inside hero card */
    display: grid;
    place-items: center;
    /* ProfilePhotoCircle next to Logo in card*/
    gap: 3rem; /* between logo card and photo */
    width: 100%;
    height: 100%;
    font-style: normal;
}


/* Outer Hero Card where lights move */
.hero-background .author .card {
    width: 410px; /* 254*/
    height: 190px; /*190*/
    position: relative;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    /* This section is for the animated color block */
    display: grid;
    place-items: center; /* Controls the gradient square position */
    margin-top: 3rem; /* height relative to top frame */
    margin-bottom: 2rem;
    margin-left: -2rem; /* -2 centers and -30 aligns left to where i wanted it originally. -3.5 aligns only the logo card in center */

}
/* Inside the Hero Card */
.hero-background .author .card .card2 {
    width: 400px;
    height: 180px; 
    background: black;
    color: #f4effa;;
    position: relative;
    display: grid;
    place-content: center;
    place-items: ;
    overflow: hidden;
    border-radius: 20px;

}

.hero-background .author .card .card2 h1{
    z-index: 1;
    color: ;
    font-size: 3em;
}

.hero-background .author .card .card2 p{
    z-index: 1;
    color:;
    font-size: 2em;
}

.hero-background .author .card::before{
    content:'';
    position: absolute;
    width: 100px;
    background-image: linear-gradient(180deg, #951d46, #0fa3b1);
    height: 250%;
    animation: rotBGimg 4.5s linear infinite;
    transition: all 0.2s linear;
}

@keyframes rotBGimg{
    from{
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.hero-background .author .card::after{
    content:;
    position: absolute;
    background: #64861b;
    inset: 5px;
    border-radius: 15px;
}

.logo{
    max-width: 350px; /* Logo size within card2 */
    width: 100%;
    height: auto;
}

.profilephoto {
    width: 15rem;
    margin-top: 1em;
    border-radius: 50%; /* keep circular */
}

.paragraph-image {
    display: flex;
    flex-direction: column; /* stack elements vertically */
    align-items: flex-start; 
}

.quote {
    color: #f4effa; 
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
    font-size: 1.2em;
    margin: 30px;
}

.quoteauthor {
    text-align: right;
    margin-top: 10px;
}

/* The purple edge error is somewhere here */
.intro-paragraph {
  display: grid;
  grid-template-columns: 2fr 2fr; /* text takes 2/3, image takes 1/3 */
  align-items: center;
  /*width: 100%; <-- this line was causing the error/ overflow */ 
  color: #f4effa;
  /*margin-left: 21rem; /* smaller horizontal margin for responsiveness */
  margin: 35px;
  padding-bottom: 1rem;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
  gap: 4rem; /* space between text and image */
}

.intro-paragraph img {
  width: 100%; /* image fills its grid column */
  max-width: 300px; /* optional max size */
  height: auto; /* maintains aspect ratio */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .intro-paragraph {
    grid-template-columns: 1fr; /* stacking the text and image vertically */
    text-align: center;
  }

  .intro-paragraph img {
    margin: 1rem auto 0 auto; /* center image */
  }
}

/* UX BENTO Project Section*/
.content {
    display: flex;
    flex-direction: row;
    justify-content:center;
    /*grid-template-columns: 2fr 1fr;
    gap: px;*/
    width: 100%;
}

/* Bento Section as a Grid Container */
.bento {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 20px; 
    /*background-color: #e5e7e4;*/
    padding: 15px;
    grid-area: bento;
    grid-template-areas:
    "bento sidebar";
}

/* Bento Item Styling (Now Part of the Grid) */
.bento-item {
    box-sizing: border-box;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    grid-area: bento-item; 
}

/* Bento Section */
.bento {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; 
    /*background-color: #e5e7e4; <-- This is the background of this section but affects all the way into the rotation section*/
    padding: 15px;
    justify-content: center; /* Center the cards */
}

/* Bento Item Styling */
.bento-item {
    flex: 1 1 calc(33.333% - 20px); /* Each item takes up 1/3 of the container minus gap */
    box-sizing: border-box;
    border: 2px solid #ddd;
    border-radius: 8px; /* Rounded corners */
    padding: 15px;
    background-color:; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation */
}

.bento-item:hover {
    transform: translateY(-5px); /* Slight lifting when hover*/
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Strong shadow when hover*/
}

/* Title Styling for the Cards*/
.bento-item h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #333;
    text-align: center;
}

/* Image Styling */
.bento-item img {
    width: 100%;
    height: auto;
    border-radius: 8px; 
    margin-bottom: 10px;
}

/* Info (Text and Button) Styling */
.bento-item .info {
    text-align: center; 
}

.caption {
    font-size: 11px;
    color: #828782; 
    margin-bottom: 15px;
    font-style: italic; 
    text-align: center;
  }

.bento-item p {
    margin-bottom: 15px;
    color: #555;
}

/* Button Styling */
.bento-item button {
    padding: 10px 20px;
    background-color: #951d46;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bento-item button:hover {
    background-color: #0fa3b1; 
}

/* Responsive Design for Content*/
@media (max-width: 768px){
    .content{
        flex-direction: column; 
    }

}

/* Responsive Design for Bento Items */
@media (max-width: 1200px) {
    .bento-item {
        flex: 1 1 calc(50% - 20px); /* 2 items per row */
    }
}

@media (max-width: 768px) {
    .bento-item {
        flex: 1 1 calc(100% - 20px); /* 1 item per row */
    }
}

/* Responsive Design for Bento Grid */
@media (max-width: 768px) {
    .bento {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* 1 column on small screens */
    }
}
/* End of UX Project Bento Section */

/* Data Analytics and Web Development Portfolio Section */

/* Project Title Section */
.main_title h1{
    margin: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    font-family: "Architects Daughter", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 5em;
    line-height: 1em;
    position: relative;
    color: #f4effa;

}

.banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.banner .slider{
    position: absolute;
    width: 200px;
    height: 250px;
    top: 10%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    /* Animating the Data Web Project Slider */
    animation: autoRun 65s linear infinite;
    z-index: 2; /* To overlap my photo # has to be greater*/
    
}

.scroller{
    max-width: 100%;
    color: rgb(255, 255, 255);
    background: #0fa3b1;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 25px;
}

.scroller[data-animated=true]{
    overflow: hidden;
    -webkit-mask: linear-gradient(
        90deg, 
        transparent, 
        white 20%,
        white 80%,
        transparent
    );
    mask: linear-gradient(
        90deg, 
        transparent, 
        white 20%,
        white 80%,
        transparent
    );
}

.scroller[data-animated=true] .scroller_inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll 85s linear infinite;
}



.scroller_inner{
    padding-block: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style-type: none;
}

/* Animation for Skill's Scroller */
@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem)); /* using -n% movies the opposite direction */
    }

}



/* Animation of the Item Slider 
rotateX() moves item for particular view, while
rotateY() moves item in the 3D space */
@keyframes autoRun{
    from{
        transform: perspective(1000px) rotateX(-12deg) rotateY(0deg);
    }to{
        transform: perspective(1000px) rotateX(-12deg) rotateY(360deg);
    }
}

/* Note that the distance between the slider items
has to be 360 deg/quantity of items = x degrees
Therefore, if I have 5 items, 360/5 = 72 deg increments
Your first item starts at 0 degrees. You increment each
item by the x degrees calculated 
Basically rotateY of item at position: 
(position - 1) * (360 deg/quantity) */

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        /* This positions the items in the 3D circle on the Y axis. Position and Quantity are your variables used in the HTML within the style class */
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(550px);

}

.banner .slider .item img{
    width: 100%;
    height: 100%;

}

.banner .content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, 100vw);
    height: max-content;
    padding-bottom: 100px;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 1; /* level in the z-index for overlapping */

}

/* Banner Headings */
.banner .content h1{
    font-family: 'Pic0', sans-serif;
    font-size: 10em;
    line-height: 1em;
    position: relative;
    color: #f4effa;
}

.banner .content h1::after{
    position:absolute;
    inset: 0 0 0 0;
    conent: attr(data-content);
    z-index: 3; /* This number is relevant to the z-index of the .model for overlapping. Must be+1 of the z-index from the .model*/

}

.banner .content h2{
    font-size: 3em;
}

.banner .content .myphoto{
    background-image: url(/assets/MV_Aug2025a_transp_PNG_biggerImage_small2b.png);
    width: 100%;
    height: 68vh; /* 75vh is right angle for optical effect 1st photo 68vh is for the Summer 2025 photo*/
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 2;
}

/* Analytics and Development Subtitle */
.banner .content .project-details{
    font-family: "Architects Daughter", cursive;
    /*text-align: left;*/
    max-width: 300px;
    color: #f4effa;;
    margin-right: 160px;
                                                
}