/****** BASICS ******/
    body {
        margin: 0;
        background-image: url(/backgrounds/bedroom.jpg);
        background-size: 100%;
        background-color: rgb(52, 66, 29);
    }

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

/***** LAYOUT *****/
    .container {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 15px 15px 15px 15px;
        box-shadow: 2px 2px 2px #0006;
        background-image: url(/backgrounds/darkplank.jpg);
        margin: 0 auto;
        margin-top: 10px; 
        width: 900px;
        height: 92vh;
        display: grid;
        grid-template: 
        "head head right" 200px
        "left main main" 1fr
        "footer footer footer" 25px
        / 225px 1fr 225px;
        padding: 25px;
        overflow: scroll;
    }

/**** HEADER ****/
    header {
        border: 1px solid #a1a1a1;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        background: white;
        grid-area: head;
        background-image: url(/backgrounds/crit.jpg);
    }

    header h1 {
        color: white;
        font-family: poti;
        font-size: 6em;
        text-align: center;
        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);
    }

/***** ASIDE RIGHT CONTENT *****/
    .right {
        border: 1px solid #a1a1a1;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        grid-area: right;
    }

    .right img {
        width: 215px;
        height: 215px;
    }

/***** ASIDE LEFT CONTENT *****/
    .left {
        border: 1px solid #a1a1a1;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        background-image: url(/backgrounds/wii.jpg);
        grid-area: left;
        padding: 15px;
    }

    /***** stuff for my section for recommedning movies *****/
    .recs {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 15px 15px 15px 15px;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        box-shadow: 2px 2px 2px #0006;
        height: 235px;
    }

    .recs h2 {
        font-family: courier;
        font-size: 1em;
        text-align: center;
        border-radius: 15px 15px 15px 15px;
        border: black 1px solid;
        background-color: #fff4e6;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        box-shadow: 2px 2px 2px #0006;
    }

    .recs img {
        width: 125px;
        height: 190px;
        margin-left: 33px;
        margin-top: -7px;
        animation-name: floating; 
        animation-duration: 3s; 
        animation-iteration-count: infinite; 
        animation-timing-function: ease-in-out;
    }

    @keyframes floating { 
    0% { 
    transform: translate(0,  0px); 
    } 

    50%  { 
    transform: translate(0, 5px); 
    } 

    100%   {
    transform: translate(0, -0px); 
    } 
    }

    /***** styling for list of my physical movie copies *****/
    .letterbox {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 15px 15px 15px 15px;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        box-shadow: 2px 2px 2px #0006;
        height: 235px;
        margin-top: 5px;
        overflow: scroll;
    }

    .letterbox h2 {
        font-family: courier;
        font-size: 1em;
        text-align: center;
        border-radius: 15px 15px 15px 15px;
        border: black 1px solid;
        background-color: #fff4e6;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        box-shadow: 2px 2px 2px #0006;
    }

    .letterbox img {
        width: 115px; 
        height: 180px;
        margin-top: 15px;
    }

    .scroll-container {
        overflow: auto;
        overflow-y: hidden;
        white-space: nowrap;
        margin-top: -5px;
    }

/**** MAIN CONTENT ****/
    main {
        border: 1px ridge #a1a1a1;
        border-radius: 6px 6px 6px 6px;
        background-image: url(/backgrounds/wii.jpg);
        grid-area: main;
        padding: 15px;
    }

    .movies {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 15px 15px 15px 15px;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        box-shadow: 2px 2px 2px #0006;
        padding: 10px;
        height: 295px;
        overflow: scroll;
    }

    .movies img {
        width: 99px;
        height: 150px;
    }

    .movies img:hover {
        transform: rotate(7deg);
    }

    .top-ten {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 15px 15px 15px 15px;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        box-shadow: 2px 2px 2px #0006;
        height: 175px;
        margin-top: 5px;
        overflow: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

    .top-ten h3 {
        font-family: courier;
        font-size: 1em;
        text-align: center;
        border-radius: 15px 15px 15px 15px;
        border: black 1px solid;
        background-color: #fff4e6;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        box-shadow: 2px 2px 2px #0006;
        margin-top: 2px;
    }

    .top-ten img {
        width: 100px;
        height: 150px;
        margin-top: -12px;
    }

/***** FOOTER *****/
    footer {
        border: 1px solid #a1a1a1;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        grid-area: footer;
        font-family: courier;
        
    }

/****** 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);
    }