/***** BASICS *****/
    body {
        margin: 0;
        background-image: url(/backgrounds/mintoreo.jpg);
        background-size: 75%;
        background-color: rgb(38, 26, 26);
    }

    @font-face {
        font-family: rascal;
        src: url(/fonts/RASCAL__.TTF);
    }

/**** LAYOUT ****/
    .wrapper {
        display: grid;
        grid-template: 
        "aside head" 100px
        "aside main" 1fr
        "aside footer" 30px
        / 225px 1fr;
        width: 1150px;
        margin: 0 auto;
        margin-top: 20px;
        height: 85vh;
    }

/***** HEADER *****/
    header {
        grid-area: head;
        background-image: url(/imgs/homeimage/pngs/ctrlc.png);
        background-repeat: repeat;
        grid-area: head;
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
    }

    header img {
        margin-top: -125px;
    }

/***** ASIDE *****/
/***** my bio and mood *****/
    aside {
        grid-area: aside;
        overflow: hidden;
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
    }

    aside h3 {
        font-family: rascal;
        font-size: 2em;
        text-align: center;
    }

    aside img {
        filter: sepia(0.5);
    }

    /***** for my buttons on my mood and bio *****/
    .button-one, .button-two, .button-three, .button-four, .button-five {
        margin-top: 5px;
        border: aliceblue 2px ridge;
        border-radius: 15px;
        background-image: linear-gradient(#dadcde, beige 50%, #dadcde 50%, beige 50%);
        text-align: center;
        font-family: courier;
    }

    .button-one:hover, .button-two:hover, .button-three:hover, .button-four:hover, .button-five:hover {
        transform: translateY(-5px);
    }

    .section, .section-two, .section-three, .section-four {
        margin-top: 5px;
        background-color: papayawhip;
        border: aliceblue 2px ridge;
        border-radius: 15px;
        background-image: linear-gradient(#dadcde, beige 50%, #dadcde 50%, beige 50%);
        font-family: courier;
        font-size: 0.9em;
    }

    .section:hover, .section-two:hover, .section-three:hover, .section-four:hover {
        transform: translateY(-5px);
    }

/***** MAIN CONTENT *****/
    main {
        grid-area: main;
    }

    .container {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }

    /****** about me section ******/
    .about {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        height: 600px;
        background-image: url(/backgrounds/bubblewrapdith.jpg);
        background-color: #fff4e6;
        padding: 25px;
    }

    .about h2 {
        background-color: #fff4e6;
        margin: 45px;
        margin-top: -5px;
        font-family: rascal;
        font-size: 2em;
        font-style: italic;
        border: black 1px solid;
        border: 2px #ffffff inset;
        box-shadow: 0 0 2px 2px #ffffff inset;
        text-align: center;
        height: 50px;
    }
    
     .about h2:hover {
        border: 2px #ffffff outset;
    }

    .about p {
        background-color: #fff4e6;
        font-family: courier;
        padding: 10px;
        border: black 1px solid;
        border: 2px #ffffff inset;
        box-shadow: 0 0 2px 2px #ffffff inset;

    }

    /***** FAVORITE SECTION *****/
    .favorites {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        height: 650px;
        overflow: scroll;
        overflow-x: hidden;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
    }

    .favorites h2 {
        font-family: rascal;
        font-size: 1.5em;
    }

    /****** favorite character section *****/
    .characters img {
        width: 90px;
        height: 90px;
    }

    .characters figure {
        display: inline-block;
        margin: auto;
        width: 70px;
    }

     /****** favorite albums section *****/
    .albums img {
        width: 90px;
        height: 90px;
    }

    .albums figure {
        display: inline-block;
        margin: auto;
        width: 45px;
    }

    /****** favorite books section *****/
    .books img {
        width: 80px;
        height: 100px;
    }

    .books figure {
        display: inline-block;
        margin: auto;
        width: 45px;
    }

/***** FOOTER ****/
    footer {
        grid-area: footer;
        border: 1px palegoldenrod solid;
        background-image: url(/imgs/aboutimage/pngs/ctrlmini.png);
    }

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