/* Font */
@import url('https://fonts.google.com/specimen/Outfit');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 /* Colors */
:root{
    /* Primary */
    --Soft-blue: hsl(215, 51%, 70%);
    --Cyan: hsl(178, 100%, 50%);

    /* Neutral */
    --Very-dark-blue---main-BG: hsl(217, 54%, 11%);
    --Very-dark-blue---card-BG: hsl(216, 50%, 16%);
    --Very-dark-blue---line: hsl(215, 32%, 27%);
    --White: hsl(0, 0%, 100%);

    /* Typografy */

    --Outfit-font: "Outfit", sans-serif;
}

body{
    font-family: var(--Outfit-font);
    background-color: var(--Very-dark-blue---main-BG);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
    padding: 16px;
}

main{
    background-color: var(--Very-dark-blue---card-BG);
    border-radius: 10px;
    max-width: 20rem;
    padding: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.description{
    position: relative;
    display: flex;
    flex-direction: column;
}

.description__container{
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: fit-content;
}

.description__container::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--Cyan);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

.description .description__container .description__icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.description__container:hover::before{
    opacity: 0.5;
}

.description:hover .description__container .description__icon{
    opacity: 1;
}

.description__main__image{
    display: block;
    max-width: 100%;
    border-radius: 10px;
}

h2, .creator span{
    color: var(--White);
}

h2{
    margin-bottom: 1rem;
}

p{
    color: var(--Very-dark-blue---line);
}

.line{
    display: block;
    height: 1px;
    background-color: var(--Very-dark-blue---line);
    margin-bottom: 1rem;
}

.description, .timming{
    margin-bottom: 1rem;
}

.timming{
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.timming__item{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.timming .timming__image{
    width: fit-content;
}

.timming .timming__item .timming__text{
    color: var(--Very-dark-blue---line);
}

.timming p:first-of-type{
    color: var(--Cyan);
}


.creator{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.creator .creator__image{
    display: block;
    width: 30px;
    border-radius: 50%;
    border: 1px solid var(--White);
}

h2:hover, .creator p span:hover{
    cursor: pointer;
    color: var(--Cyan);
}

footer{
    position: fixed;
    bottom: 0;
}