* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bordercolor: #000000;
}

body {
    background: url('images/greengrid.jpg') repeat;
    background-size: 80px 150px;
    font-family: 'PokedexFont', sans-serif;
    color: white; /*match color of text */
}

/* Main Content Box */
.wrap {
    margin: 3rem auto;
    width: 45rem;
    /*height: 46rem;*/
    height: 50rem;
    background-color: darkgray; /* Off-white */
    display: flex;
    padding: 4px;
    flex-direction: column;
    box-shadow: 0px 0 0 4px #00530e, 0 0 5px 3px #222121; /* note to change shadow if needed */
    border-radius: 10px 5px;
}

/* Main Layout */
.middle {
    width: 100%;
    height: 90%;
    display: flex;
    gap: 4px;
}

/* Sidebar content */
.left {
    width: 27%;
    height: 100%;
    background-color: rgb(77, 77, 77);
    border-inline: #111111 solid 1px;
    box-shadow: inset 0 0 4px #5a5a5a38;
    padding: 6px;
}

/* Main Content Area */
.right {
    width: 73%;
    height: 32rem;
    background-color: darkgray; /* Soft off-white */
    border-inline: 1px solid #000000;
    box-shadow: inset #1a18180e 0 0 7px;
    overflow-y: auto;
    overflow-x: hidden;
}

.right::-webkit-scrollbar {
    display: none;
}

/* Header */
.header {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: url(images/shootdown.gif);
    background-size: -100px;
    background-position: -250px -285px;
    /*box-shadow: #600000 0 0 0 1px, rgb(255 255 255) 0px 0px 20px 8px inset, rgb(0 0 0 / 5%) 0px 2px 1px 0px; */
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.header h1 {
    font-size: 3.8em;
    margin: auto;
    color: #000000;
    text-shadow: 0 0 3px white;
}
.header-container {
    border-radius: 10px 10px 0 0;
    box-shadow: inset rgb(34, 34, 34) 0 0 6px 0px, 
                rgb(22, 21, 21) 0px -1px 3px -2px;
    height: 30%;
    padding: 10px;
    justify-content: space-between; /* Adjusts spacing between elements */
}

/* Sidebar Section */
.sidesection {
    margin: 0 0 0 auto;
    width: 9.4rem;
    height: 100%;
    background-color: #747272; /* Soft pinkish white */
    padding: 5px 3px;
    border-left: 1px solid #136100;
    padding-left: 8px;
    color: white;
}

/* Navigation */
.nav {
    width: 100%;
    height: 13rem;
    background-color: #fff5f5; /* Light off-white */
    border: #1eff00 dashed 1px;
    border-radius: 5px;
    overflow: hidden;
}

/* Top Navigation Bar */
.long {
    width: 100%;
    height: 1.8rem;
    background-color: #141111;
    border-bottom: green 1px dashed;
    text-align: center;
    color: green;
    font-size: 1.3em;
    box-shadow: inset 0 0 3px #161616;
}

/* Scrollable Section */
.scroll {
    width: 100%;
    height: 11.38rem;
    background-color: darkgray;
    overflow: auto;
    padding: 5px;
    box-shadow: inset 0 -5px 8px #f9f9f9;
}

.scroll a {
    width: 100%;
    height: 2rem;
    display: block;
    border-bottom: #005c0f 1px solid;
    color: #006300;
}

.scroll a:hover {
    font-style: italic;
    color: #006300;
}

/* Entry Box */
.entry {
    width: 31rem;
    height: fit-content;
    background-color: rgb(53, 53, 53);
    border-top: 10px;
    border-color: #000000;
    border-right: 10px solid var(--bordercolor);
    padding: 2px 7px;
    border-radius: 3px 3px 5px 5px;
    box-shadow: #474747 0px 0px 3px -1px;
    color: #ffffff;
}

.entry p {
    font-size: 0.79em;
}

.entry p:hover {
    border-left: #23722394 3px solid;
    padding-left: 3px;
}

/* Entry Title */
.entry h4 {
    color: #06b800;
    font-size: 1.5em;
}

.entry h4 + i {
    color: #edf100;
}
.entry a {
    color: yellow;
}
/* Entry Wrapper */
.entrywrapper {
    width: fit-content;
    height: fit-content;
    margin: 1rem auto;
}

/* Tab Navigation */
.tab {
    width: 8rem;
    height: 2.4rem;
    padding: 7px;
    padding-bottom: 0;
    border-radius: 5px 5px 0px 0px;
    margin-left: 10px;
    box-shadow: #686868 0px 0px 3px -1px;
    background-color: #000000;
}

.tab2 {
    width: 100%;
    height: 100%;
    background-color: #024200; /* Soft off-white */
    border-radius: 3px 3px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: left;
    border: 1px solid #13e200;
    border-bottom: 0;
    color: #07c400;
    font-size: 1.1em;
}

/* track Box */
.track {
    width: 100%;
    height: 22rem;
    background-color: darkgray;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    border: 1px #3a3a3a solid;
    box-shadow: inset 0 0px 4px #1a18180e;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the content */
    justify-content: flex-start; /* Ensures content starts from the top */
    padding: 2px;
}

.track img#acover {
    width: 135px;
    height: 135px;
    margin: 0 auto;
    margin-bottom: -15px; /* Adds spacing between the image and the text */
    margin-top: -10px;
    display: block;
    padding: 0;
}
.track img {
    max-height: 9.2rem;
    margin-top: 0px;
    box-shadow: rgba(107, 31, 67, 0.158) 0px 1px 2px 0px;
}
.track p#trkInfo {
    margin: -1px 0; /* Reduce paragraph spacing */
    font-size: 1em; /* Scale down the font */
    font-family: Consolas, monospace; /* Set font to Consolas */
    text-align: center;
    color: #000000;
}

/* Selection Highlight not sure if I want to keep */
::selection {
    background-color: #8B0000;
    color: white;
}
/*font area */
@font-face { 
    font-family: 'PokedexFont';
    src: url('fonts/pokemon-gen-4-regular.ttf') format('truetype'); /*i should have saved the font link... */
    font-weight: normal;
    font-style: normal;
}