body{
    margin:0;
    padding:0;

    font-family:'Inter', sans-serif;

    background:#0f172a;
    color:#f8fafc;

    overflow-x:hidden;
    line-height:1.7;
}
.filler::after{
    height: 100%;
}

.Background{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-5;
}

body::before{
    content:'';

    position:fixed;
    inset:0;

    background:
    rgba(15,23,42,0.75);

    z-index:-1;

        /* Link the animation to the page's vertical scroll timeline */
    animation: fadeInBackground linear both;
    animation-timeline: scroll();
  
    /* The range of the scroll where the animation happens (e.g., first 500px) */
    animation-range: entry 0px exit 500px; 
}


.root{
    width:min(1300px, 92%);

    margin:3rem auto 6rem auto;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:3rem;
}

#title{
    position: sticky;
    top: 40vh;
    max-height: 100vh;

    margin-top: -16vh;
    font-size:
    clamp(2.8rem, 6vw, 5rem);

    font-weight:800;

    text-align:center;

    line-height:1.1;

    color:rgba(248, 250, 252,1);

    z-index: 10;

    animation: fadeinTitle linear both;
    animation-timeline: scroll();
    animation-range: entry 0px exit 500px; 
}
.titleContainer{
width: 100vw;
height: 100vh;


display: flex;
align-items: center;
justify-content: center;
}

#title a{
    color:#60a5fa;
    text-decoration:none;

    transition:0.3s ease;

    animation: fadeinTitleLink linear both;
    animation-timeline: scroll();
    animation-range: entry 0px exit 500px; 
}

#title a:hover{
    color:#93c5fd;
}


.overview,
.video1,
.picture1{
    width:100%;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius:32px;

    backdrop-filter:blur(14px);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.35);

    overflow:hidden;

    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.overview:hover,
.video1:hover,
.picture1:hover{
    transform:translateY(-2px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.45);
}


.overview{
    display:grid;
    grid-template-columns:
    320px 1fr;

    gap:2rem;

    padding:2rem;
}

.specs{
    padding:2rem;

    background:
    rgba(255,255,255,0.04);

    border-radius:24px;

    border:
    1px solid rgba(255,255,255,0.05);
}

.specs p{
    margin:0;

    color:#cbd5e1;

    font-size:1.2rem;

    line-height:2;
}

.Summary{
    padding:2rem;

    display:flex;
    align-items:center;

    font-size:1.5rem;

    color:#cbd5e1;

    background:
    rgba(255,255,255,0.03);

    border-radius:24px;
}
.ContentTable{
    width:100%;
    height: 100%;
    padding-top: 0.5rem;
    padding-left: 2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;


    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius:32px;

    backdrop-filter:blur(14px);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.35);

    overflow:hidden;

    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.ContentTable h2{
    padding-bottom: 1rem;
    color: #60a5fa;
    font-size: 2vw;
    font-family:'Inter',sans-serif;
}
.ContentTable p{
    font-size: 1vw;
}


.video1,
.picture1{
    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:2rem;

    align-items:center;

    padding:2rem;
}

.video1 img,
.picture1 img{
    width:100%;

    border-radius:24px;

    object-fit:cover;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.4);
}
.titleAndPicture{
    display: flex;

        height: 25rem;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vh;
}
.titleAndPicture h2{
     text-align: center;
     font-size: 2vw;
     font-family:'Inter',sans-serif;
     color: #60a5fa;
}

.bulletPoints{
    padding-left:1.5rem;
}

.bulletPoints li{
    font-family:'Inter', sans-serif;
    margin-bottom:1.5rem;

    color:#cbd5e1;

    font-size:1.2rem;
}

.root u{
    text-decoration:none;

    color:#60a5fa;

    font-weight:700;
}

.root a{
    color:#60a5fa;
    text-decoration:none;

    transition:0.25s ease;
}

.root a:hover{
    color:#93c5fd;
}

.slideshow{
    position:relative;
    width:100%;
}

.slide{
    display:none;
    width:100%;
    border-radius:24px;
}

.slide.active{
    display:block;
}

.commands 
{
    height: 85%;
    width: auto;
    object-fit:fill !important;
}


.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    background:rgba(0,0,0,0.6);
    color:white;
    border:none;

    width:40px;
    height:40px;

    cursor:pointer;
    border-radius:50%;
}

.prev{
    left:10px;
}

.next{
    right:10px;
}

@media(max-width:1000px){

    .overview{
        grid-template-columns:1fr;
    }

    .video1,
    .picture1{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    .root{
        margin-top:6rem;
        gap:2rem;
    }

    #title{
        font-size:2.3rem;
    }

    .overview,
    .video1,
    .picture1{
        padding:1.3rem;
        border-radius:24px;
    }

    .specs,
    .Summary{
        padding:1.3rem;
    }

    .bulletPoints li,
    .Summary,
    .specs p{
        font-size:0.95rem;
    }

}
@keyframes fadeInBackground {
  from {
    background-color: rgba(255, 255, 255, 0); 
  }
  to {
    background-color: rgba(15,23,42,0.85); 
  }
}
@keyframes fadeinTitle {
  from {
    color: rgba(255, 255, 255, 0); 
  }
  to {
    color: inherit;
  }
}
@keyframes fadeinTitleLink {
  from {
    color: rgba(255, 255, 255, 0); 
  }
  to {
    color: royalblue;
  }
}