Style.css

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;

    /* Start of Font */
    font-family: calibri;
    font-size: 11px;
    color: white;
    /* End */

    /* Start of Background */
    background-image: url(https://i.imgur.com/iyIkF1t.png);
    background-repeat: repeat;
    /* End */

    /* Start of Scrollbar */
    scrollbar-color: #424242 #262626;
    scrollbar-width: thin;
    /* End */
}



/* Start of URL */
a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* End */



/* These are different Sectors in the HTML Code - Not really neccessary to edit unless you know what you're doing. */
header {
    padding: 50px 0px;
    text-align: center;
}

main {
    margin: auto;
    /* Edit this if you want to change the overall width of each Region section. (The box that holds the Pokémon Icons) */
    width: 75%;
}

footer {
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
    bottom: 0;
    width: 100%;
    margin-top: 2%;
    padding: 0.5% 0%;
    background: #343434;
    text-align: center;
}

footer img.left {
    width: 16px;
    height: 16px;
    margin-right: 30px;
}

footer img.right {
    width: 16px;
    height: 16px;
    margin-left: 30px;
}

/* End */



/* Start of Region quick links above each Region section - Not really neccessary to edit unless you know what you're doing. */
ul.quickjump {
    margin: 0%;
    margin-bottom: 2px;
    padding-left: 2px;
    list-style: none;
}

ul.quickjump li {
    display: inline-block;
}

ul.quickjump li::after {
    content: "|";
    padding-left: 10px;
    padding-right: 10px;
}

ul.quickjump li:last-child::after {
    display: none;
}

/* End */



/* This is the section that contains the Pokémon Icons. Category is the black bar with Region name. Content is the box that contains the Icons. */
div.category {
    background: black;
    border: 1px solid black;
    border-top: 0px;
    border-bottom: 0px;
    font-weight: bold;
    text-align: center;
}

section.content {
    margin-bottom: 2%;
    padding: 10px 0px;
    background: #2b2f30;
    border: 1px solid black;
    border-top: 0px;
    text-align: center;
}

/* End */



/* Font that says Box # */
p.box {
    margin: 0px;
    margin-left: 20px;
    font-weight: bold;
    text-align: left;
}

/* End */



/* Start of Icon opacity */
img.own {
    opacity: 1.0;
}

img.notown {
    opacity: 0.3;
}

img.notown:hover {
    opacity: 1.0;
}

/* End */



/* Start of Info box when hovering over Icons */
div.pkmn:hover {
    -webkit-box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.59);
    box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.59);
}

div.pkmn {
    display: inline-block;
    position: relative;
}

div.pkmn span.info {
    visibility: hidden;
    width: 110px;
    padding: 4px 0;
    background-color: rgb(31, 31, 31);
    border: 1px solid black;
    text-align: center;
    position: absolute;
    z-index: 1;
    bottom: 110%;
    left: 50%;
    margin-left: -50px;
}

div.pkmn:hover span.info {
    visibility: visible;
}

span.info p {
    margin: 0;
    padding-bottom: 4px;
    font-weight: bold;
}

span.info p.form {
    margin: 0;
    padding-bottom: 4px;
    font-style: italic;
    font-weight: 100;
}

/* End */



/* Progress Bar Display */
label {
    font-weight: bold;
}

label::before {
    content: "\a";
    white-space: pre;
}

progress {
    height: 6px;
    width: 100%;
    background-color: #D4D4D4;
    border: 1px solid black;
    border-left: 0px;
    border-right: 0px;
}

progress::-moz-progress-bar {
    background-color: #2A9200;
}

/* Firefox */
progress::-webkit-progress-bar {
    height: 6px;
    width: 100%;
    background-color: #D4D4D4;
    border-bottom: 1px solid black;
}

/* Edge/Chrome */
progress::-webkit-progress-value {
    background-color: #2A9200;
}

/* End */



/* Icons for genders. - No need to edit. */
div.male,
div.female {
    max-width: 7px;
    min-height: 10px;
    margin-bottom: 4px;
    padding: 0% 50%;
    background-repeat: no-repeat;
    background-position: center;
}

div.male {
    background-image: url(https://i.imgur.com/fWGLGPg.png);
}

div.female {
    background-image: url(https://i.imgur.com/mkE5Iy2.png);
}

/* End */



/* Icons for types. - No need to edit. */
div.normal,
div.fighting,
div.flying,
div.poison,
div.ground,
div.rock,
div.bug,
div.ghost,
div.steel,
div.fire,
div.water,
div.grass,
div.electric,
div.psychic,
div.ice,
div.dragon,
div.dark,
div.fairy,
div.bird {
    display: inline;
    max-width: 32px;
    min-height: 12px;
    padding: 0px 20%;
    background-repeat: no-repeat;
    background-position: center;
}

div.normal {
    background-image: url(https://i.imgur.com/QaahcOB.png);
}

div.fighting {
    background-image: url(https://i.imgur.com/npyfkah.png);
}

div.flying {
    background-image: url(https://i.imgur.com/JVCqa9m.png);
}

div.poison {
    background-image: url(https://i.imgur.com/9Vwi8Sb.png);
}

div.ground {
    background-image: url(https://i.imgur.com/2vvE0AW.png);
}

div.rock {
    background-image: url(https://i.imgur.com/f7JsAm0.png);
}

div.bug {
    background-image: url(https://i.imgur.com/jDbkdxe.png);
}

div.ghost {
    background-image: url(https://i.imgur.com/xoLmyQa.png);
}

div.steel {
    background-image: url(https://i.imgur.com/OBjB4hY.png);
}

div.fire {
    background-image: url(https://i.imgur.com/73lLzOd.png);
}

div.water {
    background-image: url(https://i.imgur.com/a3DxUpg.png);
}

div.grass {
    background-image: url(https://i.imgur.com/cclVgAS.png);
}

div.electric {
    background-image: url(https://i.imgur.com/ihTj8p2.png);
}

div.psychic {
    background-image: url(https://i.imgur.com/ttStBNv.png);
}

div.ice {
    background-image: url(https://i.imgur.com/hsdAAgJ.png);
}

div.dragon {
    background-image: url(https://i.imgur.com/oLjDOzO.png);
}

div.dark {
    background-image: url(https://i.imgur.com/s5M7HpF.png);
}

div.fairy {
    background-image: url(https://i.imgur.com/XS8m0fV.png);
}

div.bird {
    background-image: url(https://i.imgur.com/MetWrKP.png);
}

/* End */



/* Below CSS is for the"Getting Started" HTML page. Feel free to ignore this. */
a.download {
    font-size: large;
    text-decoration: underline;
}

ul.quickjumpGS {
    margin: auto;
    margin-top: 40px;
    padding: 0px;
    list-style: none;
    text-align: center;
}

ul.quickjumpGS li {
    display: inline-block;
}

ul.quickjumpGS li::after {
    content: "|";
    padding-left: 10px;
    padding-right: 10px;
}

ul.quickjumpGS li:last-child::after {
    display: none;
}

p.GS {
    font-weight: bolder;
}

ul.GS,
ul.GS2 {
    margin: 0%;
    padding: 0%;
    list-style: none;
}

ul.GS li {
    padding: 3px 0px;
    font-weight: bolder;
    margin-bottom: 1px;
}

ul.GS li::before,
ul.GS2 li::before {
    content: "»";
    padding-right: 5px;
}

ul.GS p {
    margin: 0px;
    padding-bottom: 20px;
    font-style: italic;
}

ul.GS2 li {
    padding: 3px 0px;
    font-weight: lighter;
    margin-bottom: 7px;
}

img.GS {
    border: 1px solid black;
}

img.GS2 {
    padding-left: 10px;
    padding-bottom: 10px;
}

div.categoryGS {
    margin: auto;
    width: 90%;
    background: black;
    border: 1px solid black;
    border-top: 0px;
    border-bottom: 0px;
    font-weight: bold;
    text-align: center;
}

div.GS-Area {
    width: 100px;
    background: black;
    font-weight: bold;
    text-align: center;
}

section.contentGS {
    margin: auto;
    width: 90%;
    margin-bottom: 2%;
    padding: 10px 0px;
    background: #404040;
    border: 1px solid black;
    border-top: 0px;
    text-align: center;
}

details {
    margin: auto;
    margin-bottom: 2%;
    text-align: center;
}

summary {
    margin: auto;
    width: 90%;
    background: black;
    border: 1px solid black;
    border-top: 0px;
    border-bottom: 0px;
    font-weight: bold;
    text-align: center;
    color: white;
}

/* End */