@charset "utf-8";
* {
    box-sizing: border-box;
}

html {
    background: linear-gradient(to bottom,rgba(117, 255, 227, 1) 0%, rgba(84, 255, 142, 1) 100%);
    background-repeat: no-repeat;
}

/* Font Declarations */
@font-face {
  font-family: "charlie-zonk";
  src: url("fonts/CharlieZonk/Charlie-Zonk.ttf");
  src: url("fonts/CharlieZonk/charlie-zonk-webfont.woff") format('woff');
  src: url("fonts/CharlieZonk/charlie-zonk-webfont.woff2") format('woff2');
}

@font-face {
  font-family: "ballet-harmony";
  src: url("fonts/Ballet-Harmony.ttf");
}

@font-face {
  font-family: "handmade";
  src: url("fonts/Handmade.otf");
}

/* Opening Text */
    .intro-desc > p {
        text-align: center;
        font-size: 20pt;
        margin: 6px auto;
    }

/* Text Styles */
p {
    font-family: handmade;
    font-size: 16pt;
    text-wrap: wrap;
    overflow: auto;
    color: black;
}

/* Mini Menu */

#sprite-menu {
    background: rgba(255,255,255,0.5);
    margin: 0px 4px 0px 4px;
    padding: 0.25px;
    width: 400px;
    border-radius: 25px;
    text-align: left;
    display: flex;
}

#sprite-menu ul {
    display: flex;
    position: relative;
}

li {
    list-style-type: none;
}

a {
    font-family: "handmade";
    letter-spacing: 1px;
}

.sprite-link {
    margin: 0px 4px 0px 4px;
    font-size: 20pt;
    color: black;
}

a img.nav-sprite {
    margin: 0px 4px 0px 4px;
}

/* Header Styles */

header {
    width: 100%;
    text-align: center;
    color: black;
}
h1 {
    font-family: "Charlie Zonk", sans-serif;
    font-size: 50pt;
    font-weight: 400;
    margin: auto;
}

h2, h3, h4, h5, h6 {
    font-family: "handmade", sans-serif;
    font-size: 30pt;
    font-weight: 300;
    margin: auto;
}

/* Merch Menu */

nav.merch ul, nav.merch-alex ul {
    float: center;
    display: flex;
}

nav.merch > li, nav.merch-alex > li {
    list-style-type: none;
}

a.official {
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: 40px;
    color: black;
    background-color: greenyellow;
    border: rgb(255, 100, 102) 5px solid;
    margin: 0px  10px;
    padding: 0px 2px;
    width: 300px;
}

a.fanmade {
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: 40px;
    color: black;
    background-color: greenyellow;
    border: rgb(255, 100, 102) 5px solid;
    margin: 0px  10px;
    padding: 0px 2px;
    width: 300px;
}

a.official-alex {
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: 30px;
    color: black;
    background-color: greenyellow;
    border: rgb(255, 100, 102) 5px solid;
    margin: 0px  10px;
    padding: 0px 2px;
    width: 200px;
}

a.fanmade-alex {
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: 30px;
    color: black;
    background-color: greenyellow;
    border: rgb(255, 100, 102) 5px solid;
    margin: 0px  10px;
    padding: 0px 2px;
    width: 200px;
}

a.alex-brightman {
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: 30px;
    color: black;
    background-color: greenyellow;
    border: rgb(255, 100, 102) 5px solid;
    margin: 0px  10px;
    padding: 0px 2px;
    width: 200px;
}

nav.fan-annual > ul {
    float: center;
    display: flex;
}

nav.fan-annual > li {
    list-style-type: none;
}

a.fan-annual {
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: 25px;
    color: black;
    background-color: rgb(255, 100, 102);
    border: greenyellow 3px solid;
    margin: 0px  10px;
    padding: 0px 2px;
    width: 150px;
}

/* Table Styles */

.table-box {
    clear: both;
    position: relative;
    min-width: 770px;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    display: block; 
    background-color: turquoise;
}

table.merch {
    width: 100%;
    border: greenyellow 2px solid;
    background-color: greenyellow;
}

thead {
    background-color: rgb(154, 109, 255);
}

tbody {
    background-color: rgb(255, 100, 102);
}

tr.official {
    background-color: lavender;
}

th {
    font-family: handmade;
    font-size: 16pt;
    text-wrap: wrap;
    overflow: auto;
}

th.designer, th.notes {
    background-color: rgb(255, 137, 139);
}

th.header {
    font-family: handmade;
    font-size: 20pt;
}

th.image {
    width: 42%;
    padding: 7px;
}

th.designer {
    width: 15%;
}

th.release {
    width: 8%;
}

th.notes {
    width: 27%;
}

th.price {
    width: 8%;
}

img.merch-image {
    width: 100%;
}

#redirect {
    text-decoration: none;
    color: white;
}

/* Folder Icons */

.row-a {
    position: relative;
    margin: 0px 360px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.row-b {
    position: relative;
    margin: 0px 310px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}



.solo-fizz-folder-icon {
    padding: 4px;
    justify-content: center;
    display: inline-block;
    margin: 0 auto;
    min-width: 81px;
}