/***** BASICS *****/
    body {
        margin: 0;
        background-image: url(/backgrounds/timerewind.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #3c2f2f;
    }

    @font-face {
        font-family: basiic;
        src: url(/fonts/basiic.ttf);
    }

/****** LAYOUT ******/
    .wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 100px 100px 250px 225px 225px 25px;
        border: 8px #3c2f2f ridge;
        border-radius: 15px;
        margin: 0 auto;
        margin-top: 20px;
        width: 800px;
        height: 95vh;   
        overflow: scroll;
        background-image: url(/backgrounds/wooden.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

/****** HEADER ******/
    header {
        border: 4px #3c2f2f ridge;
        grid-column-start: 1;
        grid-column-end: 4;
        background-image: url(/headers/minecraft.jpg);
        background-repeat: repeat;
        background-size: 15%;
    }

    header .title {
        font-family: basiic;
        font-style: italic;
        font-weight: bold;
        position: relative;
        margin-top: 45px;
        line-height: 1.2;
        word-spacing: -15px;
        font-size: 4em;
        color: pink;
        filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black) drop-shadow(0px 1px #000) drop-shadow(0 -1px #000) drop-shadow(1px 0 #000) drop-shadow(-1px 0 #000);
    }

/****** LEFT SIDEBAR ******/
    .leftside {
        border: 4px #3c2f2f ridge;
        border-radius: 15px;
        grid-row-start: 2;
        grid-row-end: span 2;
        height: 342px; 
        background-color: #fff4e67d;
    }

    .leftside h3 {
        text-align: center;
        font-family: basiic;
        border: 2px #3c2f2f ridge;
        border-radius: 15px;
        background-image: linear-gradient(#dadcde, #fff4e6 50%, #dadcde 50%, #fff4e6 50%);
    }

    .leftside img {
        margin-left: 70px;
    }

/****** RIGHT SIDEBAR ******/
    .rightside {
        border: 4px #3c2f2f ridge;
        border-radius: 15px;
        grid-column-start: 3;
        grid-row-start: 2;
        grid-row-end: span 2;
        height: 342px;
        background-color: #fff4e67d;
    }

    .rightside h3 {
        text-align: center;
        font-family: basiic;
        border: 2px #3c2f2f ridge;
        border-radius: 15px;
        background-image: linear-gradient(#dadcde, #fff4e6 50%, #dadcde 50%, #fff4e6 50%);
    }

    .rightside img {
        margin-left: 70px;
    }

/****** MAIN CONTENT ******/
    .main-content {
        border-radius: 15px;
        grid-column-start: 2;
        grid-row-end: span 2;
    }

    .main-content img {
        margin-top: 25px;
    }

    .main-content iframe {
        margin-top: -500px; 
        margin-bottom: 100px; 
        margin-left: 25px;
    }

    /***** this is the first gaming section that shows my played games *****/
    .long {
        border: 4px #3c2f2f ridge;
        border-radius: 15px;
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 4;
    }

    .long h3 {
     font-family: basiic;
     font-style: italic;
     font-weight: bold;
     border: 2px #3c2f2f ridge;
     border-radius: 15px;
     background-image: linear-gradient(#dadcde, #fff4e6 50%, #dadcde 50%, #fff4e6 50%);
     text-align: center;
    }

    .scroll-container {
        background-color: #00000086;
        overflow: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 5px;
        height: 140px;
    }

    .scroll-container img {
        margin-top: 3px;
        padding: 5px;
    }

    /***** this is my second section that shows the games I want to play *****/
    .long-two {
        border: 4px #3c2f2f ridge;
        border-radius: 15px;
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 5;
    }

    .long-two h3 {
     font-family: basiic;
     font-style: italic;
     font-weight: bold;
     border: 2px #3c2f2f ridge;
     border-radius: 15px;
     background-image: linear-gradient(#dadcde, #fff4e6 50%, #dadcde 50%, #fff4e6 50%);
     text-align: center;
    }

    .scroll-container-two {
        background-color: #00000086;
        overflow: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 5px;
        height: 140px;
    }

    .scroll-container-two img {
        margin-top: 3px;
        padding: 5px;
    }

/****** FOOTER ******/
    footer {
        border: 4px #3c2f2f ridge;
        border-radius: 15px;
        grid-column-start: 1;
        grid-column-end: 4;
        font-family: basiic;
        background-image: linear-gradient(#dadcde, #fff4e6 50%, #dadcde 50%, #fff4e6 50%);
    }

/****** this is the styling section of the progress bar ******/
    [role="progressbar"] {
    height: 15px;
    border: 1px solid var(--w7-el-bd);
    border-radius: var(--w7-el-bdr);
    box-shadow: inset 0 0 0 1px #f3f3f388, 0 0 0 1px #eaeaea88;
    margin: 2px 0;
    overflow: hidden;
    background: radial-gradient(circle at 0 50%, #0000001f 10px, transparent 30px),
        radial-gradient(circle at 100% 50%, #0000001f 10px, transparent 30px),
        linear-gradient(
        to bottom,
        #f3f3f3af,
        #fcfcfcaf 3px,
        #dbdbdbaf 6px,
        #cacacaaf 6px,
        #d5d5d5af
        ),
        #ddd;
        
        > div {
            overflow: hidden;
            height: 100%;
            box-shadow: inset 0 0 0 1px #ffffff1f;
            background-color: turquoise;
            background-image: linear-gradient(
                to bottom,
                #f3f3f3af,
                #fcfcfcaf 3px,
                #dbdbdbaf 6px,
                transparent 6px
            ),
            radial-gradient(circle at 0 50%, #0000002f 10px, transparent 30px),
            radial-gradient(circle at 100% 50%, #0000002f 10px, transparent 30px),
            linear-gradient(to bottom, transparent 65%, #ffffff55),
            linear-gradient(to bottom, transparent 6px, #cacaca33 6px, #d5d5d533);
        }

        &.paused > div {
            background-color: paleturquoise;
        }

        &.error > div {
            background-color: paleturquoise;
        }
    }

/****** ACCESSABILITY *******/
    #skip-to-content-link {
        position: fixed;
        top: 0;
        left: 0;
        display: inline-block;
        padding: 0.375em 0.75em;
        line-height: 1;
        font-size: 1.25em;
        background-color: var(--content-background-color);
        color: var(--text-color);
        transform: translateY(-3rem);
        transition: transform 0.1s ease-in;
        z-index: 99999999999;
    }

    #skip-to-content-link:focus, #skip-to-content-link:focus-within {
        transform: translateY(0);
    }