/****** BASICS ******/
    body {
        margin: 0;
        background-image: url(/backgrounds/cybernetcore.jpg);
        background-color: slategray;
    }

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

/****** WRAPPER *****/
    #wrapper {
    display: grid;
    grid-template: 
    "left head head" 150px
    "left nav nav" 50px
    "left main right" 2fr
    "footer footer right" 25px
    / 225px 1fr 225px;
    margin: 0 auto;
    margin-top: 15px; 
    width: 1150px;
    height: 95vh;
    border: 1px solid #3c2f2f;
    border: 2px inset;
    border-radius: 0px 6px 6px 6px;
    background: white;
    background-image: url(/backgrounds/darkcardboard.jpg);
    box-shadow: 2px 2px 2px #0006;
    }
/***** HEADER STYLING ******/
    header {
    grid-area: head;
    border: 1px solid #3c2f2f;
    border: 2px inset;
    border-radius: 6px 6px 6px 6px;
    background: white;
    background-image: url(/backgrounds/orangecoastaldith.jpg);
    }

    .wrap {
        display: grid;
        grid-template-columns: 600px 1fr;
    }

    h1 {
        font-family: rascal;
        font-size: 4em;
        position: relative;
        bottom: -0.6em;
        line-height: 1.2;
        word-spacing: -15px;
    }

    .logo img {
        margin-left: -85px;
        width: 150px;
        height: 150px;
    }
/****** NAVIGATION ****/
    nav {
        grid-area: nav;
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 6px 6px 6px 6px;
        background: aliceblue;
    }

    .wrapping {
        display: grid;
        grid-template-columns: repeat(8 , 1fr);
        padding: 10px;
    }

    .button {
        margin-left: 5px;
        height: 25px;
        border: 1px solid #3c2f2f;
        border: 2px inset black;
        border-radius: 15px 15px 15px 15px;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        box-shadow: 2px 2px 2px #0006;
    }

    .button:hover {
        transform: translateY(-2px);
        box-shadow: 2px 2px 2px 2px rgba(104, 184, 224, 0.601);
        text-decoration: none;
    }

    a {
        text-decoration: none;
        text-align: center;
        color: black;
    }

    .button p {
        margin-top: 5px;
        color: darkolivegreen;
    }

/***** LEFT SIDEBAR *****/
    #left {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 6px 6px 6px 6px;
        background: white;
        background-image: url(/backgrounds/bubblewrapdith.jpg);
        grid-area: left;
        padding: 15px;
        overflow: scroll;
    }

    /***** DECOR *****/
    .manga-image {
        border: black 1px solid;
        height: 200px;
        box-shadow: 2px 2px 2px #0006;
        background-image: url(/imgs/homeimage/jpgs/natsu.jpg);
        background-size: 100%;
    }

    .manga-image:hover {
        transform: rotate(7deg);
    }

    /***** STYLING FOR MINI NAV BAR *****/
    .more-nav {
        border: 1px solid #000;
        border: 2px inset;
        box-shadow: inset 2px 2px 2px 2px #0006;
        height: 215px;
        margin-top: 5px;
        padding: 10px;
        background-image: url(/backgrounds/bluecybercore.jpg);
    }

    .more-nav h3 {
        text-align: center;
        border-radius: 15px 15px 15px 15px;
        border: black 1px solid;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
        margin-top: 5px;
        font-family: courier;
        font-size: 1em;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    li a {
        display: block;
        color: black;
        text-decoration: none;
    }

    .button-two {
        margin-top: 5px;
        height: 25px;
        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;
    }

    .button-two:hover {
        transform: translateY(-2px);
        box-shadow: 2px 2px 2px 2px rgba(104, 184, 224, 0.601);
        text-decoration: none;
    }

    .button-two p {
        margin-top: 5px;
        color: darkolivegreen;
    }

    /***** DECOR *****/
    .manga-image-two {
        border: black 1px solid;
        height: 265px;
        margin-top: 5px;
        box-shadow: 2px 2px 2px #0006;
        background-image: url(/imgs/homeimage/jpgs/bluekiss.jpg);
        background-color: #ffffff;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .manga-image-two p {
        font-size: 0.6em;
        padding: 5px;
        position: relative;
        bottom: -170px;
        text-align: left;
        font-family: courier;
    }

    .tag { 
        margin-left: 50px;
        margin-top: -20px;
    }

/***** MAIN CONTENT STYLING ******/
    main {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 6px 6px 6px 6px;
        background: white;
        background-image: url(/backgrounds/bubblewrapdith.jpg);
        grid-area: main;
        overflow: scroll;
    }

    /***** Where things get a bit hectic and lengthy ******/
    /***** FIRST SECTION OF MAIN *****/
    /**** holds my introduction and decor image ****/
    .container {
        display: grid;
        grid-template-columns: 265px 2fr;
        padding: 15px;
        gap: 5px;
    }

    .image {
        height: 250px;
        box-shadow: 2px 2px 2px #0006;
    }

    .image img {
        width: 265px;
        height: 253px;
    }

    .intro {
        border: black 1px solid;
        height: 220px;
        border: 1px solid #a1a1a1;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        background: white;
        background-image: url(/backgrounds/orangecoastdith.jpg);
        padding: 15px;
    }
        
    .intro::-webkit-scrollbar {
        width: 0;
        /* remove scrollbar space */
        background: transparent;
        /* to make scrollbar invisible */
    }

    .intro::-webkit-scrollbar-thumb {
        background: transparent;
    }

    .intro h2 {
        font-family: rascal;
        font-size: 1.5em;
        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: -5px;
    }

    .intro p {
        font-family: courier;
        font-size: 0.9em;
        border: black 1px dotted;
        border-radius: 15px 15px 15px 15px;
        background-color: #ffffff;
        text-align: left;
        box-shadow: 2px 2px 2px #0006;
        padding: 15px;
    }

    /***** SECOND SECTION OF MAIN *****/
    /***** contains miscellaneous items and to-do listt *****/
    .container-two {
        display: grid;
        grid-template-columns: 215px 1fr 215px;
        padding: 15px;
        margin-top: -20px;
        gap: 5px;
    }

    .image-two {
        border: black 1px solid;
        border: 2px #ffffff inset;
        box-shadow: 0 0 2px 2px #ffffff inset;
        height: 220px;
        overflow: hidden;
        padding: 15px;
        background-color: aliceblue;
    }

    .image-two:hover {
        border: 2px #ffffff outset;
    }

    .image-two h4 {
        text-align: center;
        border-radius: 15px 15px 15px 15px;
        border: black 1px solid;
        margin-top: 5px;
        font-family: rascal;
        font-size: 1.2em;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
    }

    .image-two p {
        text-align: center;
        margin-top: 10px;
        font-family: courier;
    }

    .album img {
        width: 150px; 
        height: 150px;
        margin-left: 18px;
        margin-top: -14px;
        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); 
    } 
    } 

    /***** TO-DO LIST ****/
    .to-do {
        height: 228px;
        border: 1px solid #a1a1a1;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        background: white;
        background-image: url(/backgrounds/bluecoastdith.jpg);
        box-shadow: 2px 2px 2px #0006;
        padding: 10px;
    }

    .to-do h2 {
        text-align: center;
        font-family: rascal;
        border-radius: 15px 15px 15px 15px;
        border: black 1px solid;
        background-color: #fff4e6;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
    }

    .to-do ul {
        font-family: courier;
        font-size: 0.9em;
        background-color: white;
        border: #000 1px dotted;    
    }  

    .to-do li {
        list-style-type: circle;
        font-size: 0.9em;
        margin-left: 25px;
    }

    .image-slide {
        border: black 1px solid;
        height: 250px;
        position: relative;
    }

    /***** SLIDESHOW STYLING *****/
    .slides {
        display: none;
    }

    .slides img {
        width: 100%;
        height: 250px;
    }

/***** RIGHT SIDE BAR STYLING *****/
    #right {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 6px 6px 6px 6px;
        background: aliceblue;
        grid-area: right;
        padding: 15px;
        overflow: scroll;
    }

    .updates-box {
        border: 1px solid #a1a1a1;
        border: 2px inset;
        border-radius: 0px 6px 6px 6px;
        background: white;
        background-image: url(/backgrounds/bluecoastdith.jpg);
        height: 260px;
        box-shadow: 2px 2px 2px #0006;
        overflow: scroll;
        padding: 5px;
    }

    .updates-box h2 {
        text-align: center;
        border-radius: 15px 15px 15px 15px;
        border: black 1px solid;
        font-family: 1em;
        font-family: rascal;
        background-image: linear-gradient(#dadcde, white 50%, #dadcde 50%, white);
    }

    .updates-box p {
        font-size: 0.8em;
        font-family: courier;
        padding: 2px;
    }

    .status {
        border: 1px solid #000;
        border: 2px inset;
        box-shadow: inset 2px 2px 2px 2px #0006;
        height: 220px;
        margin-top: 5px;
        background-image: url(/backgrounds/bluecybercore.jpg);
        padding: 15px;
    }

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

    .status img {
        width: 180px;
        height: 190px;
        margin-left: -10px;
        margin-top: 5px;
    }

/***** FOOTER ****/
    footer {
        border: 1px solid #3c2f2f;
        border: 2px inset;
        border-radius: 6px 6px 6px 6px;
        background: white;
        grid-area: footer;
        background-image: url(/backgrounds/orangecoastaldith.jpg);
    }

    .column {
        display: grid;
        grid-template-columns: 550px 325px;
    }

    .button-image {
        margin-left: 25px;
        height: 25px;
    }

    .button-image img {
        width: 25px;
        height: 20px;
    }

    .button-image img:hover {
        transform: translateY(-5px);
    }

    .credits {
        height: 25px;
    }

    .credits p {
        margin-top: 2px;
        font-family: courier;
        font-size: 1em;
    }

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

/****** RESPONSIVENESS ******/
    @media (max-width:800px) {
        body {
            font-size: 14px;
        }

        .layout {
            width: 100%;
            grid-template: "header" auto "main" auto "footer" auto / 1fr;
        }

        .left {
            display: none;
        }

        aside {
            border-bottom: 1px solid;
            padding: 9px;
            font-size: 0.9em;
        }

        main {
            max-width: none;
            padding: 15px;
        }

         #skip-to-content-link {
            font-size: 1rem;
        }
    }