/* Extras */
.main-frame-extras {
    display: grid;
    grid-template-columns: 5% 45% 45% 5%;
    grid-auto-rows: 60%;
    border: var(--main-frame-border);
    border-image: var(--main-frame-border-image);
    box-shadow: var(--main-frame-shadow);
    grid-area: 2 / 2 / 6 / 9;
    overflow-y: scroll;
    padding-top: 6%;
    row-gap: 15%;

    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: hidden;

    --fade-start: 90%;
    /* --mask: linear-gradient(to bottom, black var(--fade-start), transparent 100%); */
    /* --mask: linear-gradient(to bottom, black 100%, transparent 100%); */

    box-shadow: var(--main-frame-shadow);

    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.grid-container::-webkit-scrollbar {
    display: none;
}

.extras-project {
    position: relative;
    display: flex;
    background: transparent;
    border: none;
}


.extras-project-thumbnail {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.extras-project-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

.extras-project-description {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--noticia-font);
    font-size: var(--font-32-size);
    color: var(--text-color-text);
    pointer-events: none;
}

#exit-container-extra {
    display: none;
    position: relative;
    width: min-content;
    height: min-content;
    grid-area: 5 / 2 / 6 / 3;
    align-self: flex-end;
    transform: translate(100%, -100%);
    cursor: pointer;
}

.center {
    display: flex;
    align-items: center;
    border-radius: 8px;
    grid-area: 2/ 2/ 6/ 4;
}

/* Selected Porject */
#selected-project {
    position: relative;
    display: none;
}

.disabled-container {
    cursor: default !important;
    pointer-events: none !important;
}

/* Sound Design */

.main-frame-extras-sound-design {
    position: relative;
    display: grid;
    border: var(--main-frame-border);
    border-image: var(--main-frame-border-image);
    box-shadow: var(--main-frame-shadow);
    grid-area: 2 / 2 / 6 / 9;
    grid-template-rows: 5% 25% 35% 15% 15% 5%;
    grid-template-columns: 5% 50% 25% 15% 5%;
    justify-items: center;
    opacity: 0;
}

#video-text {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: scroll;
    scrollbar-width: none;
    font-family: var(--noticia-font);
    font-size: var(--font-32-size);
    color: var(--text-color-text);
    grid-area: 3/ 3/ 4/ 5;
    pointer-events: none;
    text-align: center;
    z-index: 3;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(90, 208, 255, 0.3);
}

#video-text::-webkit-scrollbar {
    display: none;
}

video {
    cursor: pointer;
}

#videoPlayer {
    position: relative;
    height: 100%;
}

#play-button {
    position: relative;
    display: flex;
    justify-self: center;
    align-self: center;
    width: 69px;
    aspect-ratio: 1 / 1;
    grid-area: 2/ 2/ 6/ 4;
    background-image: url('/images/patterns/play-button.svg');
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

#website-creation {
    grid-area: 1/2/1/3;
}

#sound-design {
    grid-area: 1/3/1/4;
}


/* Website Creation */
.main-frame-extras-website-creation {
    position: relative;
    display: grid;
    border: var(--main-frame-border);
    border-image: var(--main-frame-border-image);
    box-shadow: var(--main-frame-shadow);
    grid-area: 2 / 2 / 6 / 9;
    justify-items: center;
}


/* Fix Phone BlueTap */
.extras-project-thumbnail,
.extras-project-description,
#next-item,
#previous-item,
.extras-item {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: var(--webtap-color);
}