@import url(../styles/components/header.css);
@import url(./components/footer.css);

:root{
    --white: #F0EDEE;
    --black: #0A090C;
    --cyan: #90DDF0;

    --grid-column: 10% 43.333% 46.666%;
    --grid-row: 15.625% 81.25% 3.125%;

    --font-sm: 20rem;
    --font-md: 36rem;
    --font-lg: 90rem;

    --bg: url(../Assets/img/desk-home-fondo.jpg);
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: none;
    appearance: none;
    list-style: none;
    text-decoration: none;
}

html{
    font-size: 6.25%;
}

body{
    overflow: hidden;

    display: grid;
    /* .15fr .45fr 1.9fr 2.1fr .15fr */
    grid-template-columns: 3.125% 9.375% 40.625% 43.75% 3.125%;
    grid-template-rows:5.555% 13.888% 72.222% 2.777% 5.555%;
    grid-template-areas: 
        '. . . . .'
        '. header header header .'
        '. . main main .'
        '. footer footer footer .'
        '. . . . .'
    ;

    background-image: var(--bg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
    width: 100%;
    height: 100vh;

    font-family: 'Work Sans', sans-serif;
    font-size: 16rem;
}

img{
    width: 100%;
    height: 100%;
}

header, footer{
    display: grid;
    grid-template-columns: 10% 43.333% 46.666%;
}

header{
    grid-area: header;
}

main{
    grid-area: main;
}

main section{
    position: relative;

    display: none;
    grid-template-columns: .93fr 1fr;
    place-items: center;

    width: 100%;
    height: 100%;
}

footer{
    grid-area: footer;

    font-size: var(--font-sm);
    color: var(--white);
}

.active{
    display: grid;
}

.start{
    justify-self: start;
}

.end{
    justify-self: end;
}

.main-left{
    grid-column: 1 / 2;
}

.main-right{
    grid-column: 2 / 3;
}

.img--big{
    width: 670px;
    height: 380px;
}

.img--small{
    width: 250px;
    height: 140px;
}

.content-box{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.title{
    color: var(--white);
    font-size: var(--font-lg);
}

.subtitle{
    color: var(--white);
    font-size: var(--font-sm);
    font-weight: normal;
}

.text-content{
    user-select: none;
    cursor: pointer;

    overflow-y: scroll;

    color: var(--white);
    font-size: var(--font-sm);

    max-height: 400px;
}

.text-content::-webkit-scrollbar{
    width: 50px;
}

.text-content::-webkit-scrollbar-thumb{
    background-color: var(--cyan);
    background-clip: content-box;

    border: 22px solid transparent;
    border-radius: 90px;
}

.btn-play{
    padding: 10px 15px;

    position: absolute;
    top: 50%;
    left: 40%;

    background: var(--white);
}

.btn-play::before{
    position: absolute;
    content: '';
    top: 50%;
    left: 100%;
    
    background: var(--white);
    width: 700px;
    height: 1px;
}

.icon--play{
    color: var(--black);
}

.btn-play:hover > .icon--play{
    color: var(--cyan);
}

.video-selector{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    color: var(--white);
}

.video-title{
    user-select: none;
    align-self: flex-start;

    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.video-number{
    font-size: var(--font-sm);
}

.video-btn{
    font-size: var(--font-md);
    color: var(--white);
}

.video-btn:hover{
    color: var(--cyan);
}

.index{
    margin-top: 20px;
    display: flex;
    gap: 50px;
}

.icon-indicator{
    cursor: pointer;

    width: 15px;
    height: 15px;

    border: 1px solid var(--cyan);
}

.icon-indicator:hover,
.icon-indicator:checked{
    background: var(--cyan);
    box-shadow: 0 0 15px var(--cyan);
}