/* main tab container */
* {
    box-sizing: border-box;
}
body {
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(255, 255, 230);
    background-color: rgba(0, 0, 0, 1);
}
#maincontainer {
    width: 98vw;
    height: 98vh;
    border-radius: 10px;
    border-color: rgb(0, 255, 0);
    border-bottom-style: outset;
    border-width: 5px;
    margin: 1vh auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 1);
    box-shadow: 2px 4px 10px rgba(0, 255, 0, 1);
}
#maincontainer h1 {
    text-align: center;
    font-size: 30px;
    margin: auto;
    padding: 5px;
    border-radius: 10px;
    border-color: rgb(0, 255, 0);
    border-bottom-style: outset;
    border-width: 2px;
    width: 90vw;
}
/* all tabs */
#tabcontainer {
    width: 85vw;
    justify-content: center;
    padding: 5px;
    align-items: center;
    display: flex;
}
#tabcontainer div {
    text-align: center;
    flex: content;
    padding: 8px 15px;
    margin: 5px;
    font-weight: bold;
}
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 230);
    border-radius: 10px;
    border-top: 5px outset rgb(255, 235, 220);
    cursor: pointer;
}
#tab1:hover, #tab2:hover, #tab3:hover, #tab4:hover, #tab5:hover, #tab6:hover, #tab7:hover {
    background-blend-mode: lighten;
    background-color: rgb(53, 62, 67);
}
#tab1:hover {
    border-top-color: rgb(255, 165, 0);
    box-shadow: 1px 1px 3px rgb(255, 165, 0);
}
#tab2:hover {
    border-top-color: rgb(255, 106, 180);
    box-shadow: 1px 1px 3px rgb(255, 106, 180);
}
#tab3:hover {
    border-top-color: rgb(57, 255, 20);
    box-shadow: 1px 1px 3px rgb(57, 255, 20);
}
#tab4:hover {
    border-top-color: rgb(0, 0, 255);
    box-shadow: 1px 1px 3px rgb(0, 0, 255);
}
#tab5:hover {
    border-top-color: rgb(157, 0, 255);
    box-shadow: 1px 1px 3px rgb(157, 0, 255);
}
#tab6:hover {
    border-top-color: rgb(255, 255, 0);
    box-shadow: 1px 1px 3px rgb(255, 255, 0);
}
#tab7:hover {
    border-top-color: rgb(255, 0, 0);
    box-shadow: 1px 1px 3px rgb(255, 0, 0);
}
/* all tabs content */
#tabcontent {
    width: 90%;
    height: 95%;
    margin: .5% auto;
    padding: 15px;
    background-color: rgba(52, 63, 67, 0.75);
    border-radius: 10px;
    border-color: rgb(255, 255, 255);
    border-bottom-style: outset;
    border-width: 4px;
    overflow-y: scroll;
    text-align: center;
    box-shadow: 2px 4px 10px rgba(255, 255, 255, 1);
}
#tabcontent h2 {
    margin: 5px auto;
    padding: 10px;
    background-color: black;
    text-align: center;
    font-size: 22px;
}
/* home tab */
#home_container {
    margin: .5% auto;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    border-top: 3px outset rgb(255 128 0);
    border-bottom: 5px outset rgb(255 128 0);
    box-shadow: 1px 3px 6px rgb(255 128 0);
    width: 95%;
    height: 90%;
    text-align: center;
}
#homeimg1, #homeimg2, #homeimg3 {
    border-top: 3px outset rgb(255 128 0);
    border-bottom: 5px outset rgb(255 128 0);
    box-shadow: 1px 3px 6px rgb(255 128 0);
    border-radius: 10px;
    margin: 10px 20px;
    cursor: pointer;
}
#homeimg1:hover, #homeimg2:hover, #homeimg3:hover {
    border-top-color: rgb(255 255 0);
    border-bottom-color: rgb(255 255 0);
    box-shadow: 1px 3px 6px rgb(255 255 0);
}
#home_tab_img_container {
    margin: 5% auto;
    padding: 5px;
    gap: 10px;
}
/* build theme */
#build_container {
    margin: 1% auto;
    padding: 15px;
    background-color: black;
    border-radius: 10px;
    border-top: 3px outset rgb(57, 255, 20);
    border-bottom: 5px outset rgb(57, 255, 20);
    box-shadow: 1px 1px 3px rgb(57, 255, 20);
    width: 95%;
    height: 90%;
    text-align: center;
}
#download_csm_btn {
    padding: 5px 10px;
    margin: 10px auto;
    border-radius: 10px;
    border-top: 3px outset rgb(57, 255, 20);
    background-color: black;
    color: rgb(255 255 230);
    cursor: pointer;
    display: none;
    width: 25%;
}
#download_csm_btn:hover {
    box-shadow: 1px 1px 3px rgb(255, 255, 0);
    background-color: rgb(53, 62, 67);
}
/* build gui */
#build_gui_container {
    margin: 1.5% auto;
    padding: 15px;
    background-color: black;
    border-radius: 10px;
    border-top: 3px outset rgb(57, 255, 20);
    border-bottom: 5px outset rgb(57, 255, 20);
    box-shadow: 2px 4px 10px rgb(57, 255, 20);
    width: 94%;
    height: 90%;
    text-align: center;
}
#build_gui_container h1 {
    font-size: 24px;
    width: 50%;
    margin: 5px auto;
    border-color: rgb(57, 255, 20);
}
#save_menu_btn, #delete_menu_btn {
    border-radius: 10px;
    border-top: 3px outset rgb(57, 255, 20);
    background-color: black;
    color: rgb(255 255 230);
    cursor: pointer;
    padding: 5px 15px;
}
#save_menu_btn:hover, #delete_menu_btn:hover {
    background-color: rgb(53, 62, 67);
    box-shadow: 1px 1px 3px rgb(255, 255, 0);
}
#select_version, #select_region {
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    border-top: 3px outset rgb(57, 255, 20);
    background-color: black;
    color: rgb(255 255 230);
    cursor: pointer;
}
#select_version:hover, #select_region:hover {
    background-color: rgb(53, 62, 67);
    box-shadow: 1px 1px 3px rgb(255, 255, 0);
    cursor: pointer;
}
#select_version option, #select_region option {
    background-color: black;
    color: rgb(255 255 230);
}
#spin_color, #cursor_color {
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    border-top: 3px outset rgb(57, 255, 20);
    background-color: black;
    color: rgb(255 255 230);
    cursor: pointer;
}
#spin_color:hover, #cursor_color:hover {
    box-shadow: 1px 1px 3px rgb(255, 255, 0);
    background-color: rgb(53, 62, 67);
}
#spin_color option, #cursor_color option {
    background-color: black;
    color: rgb(255 255 230);
    cursor: pointer; 
}
#spin_color_container, #spin_option_container, #cursor_shadow_container {
    width: 33%;
    text-align: center;
    display: inline-block;
}
#spin_color_label, #spin_color, #cursor_color_label, #cursor_color {
    margin: 0 5px;
}
#fastspin, #spin, #nospin, #fastspinlabel, #spinlabel, #nospinlabel {
    margin: 0 5px;
    cursor: pointer;
}
#source_file_save, #trans_channels {
    margin: 5px;
}
#source_file_save_label, #trans_channels_label {
    margin: 5px;
}
#source_file_container, #trans_channels_container {
    width: 40%;
    text-align: center;
    display: inline-block;
}
#begin_build_btn {
    padding: 5px 20px;
    margin: 10px auto;
    border-radius: 10px;
    border-top: 3px outset rgb(57, 255, 20);
    background-color: black;
    color: rgb(255 255 230);
    width: 25%;
    cursor: pointer;
}
#begin_build_btn:hover {
    box-shadow: 1px 1px 3px rgb(255, 255, 0);
    background-color: rgb(53, 62, 67);
}
/* gallery tab */
#theme_img_enlarged {
    width: 85vw;
    height: 80vh;
    margin: 5px auto;
    padding: 5px;
    background-color: rgba(52, 63, 67, 0.75);
    border-radius: 10px;
    border-top: 10px outset rgb(255, 165, 0);
    border-bottom: 15px outset rgb(255, 165, 0);
    overflow-y: scroll;
    display:none;
    z-index: 20;
    position: absolute;
    top: 13vh;
    left: 7.5vw;
}
#theme_gallery {
    margin: 25px auto;
    padding: 10px 20px;
    background-color: black;
    border-radius: 10px;
    border-top: 3px outset rgb(255, 106, 180);
    border-bottom: 5px outset rgb(255, 106, 180);
    box-shadow: 1px 3px 6px rgb(255, 106, 180);
    width: 95%;
    text-align: center;
}
#preview_filter option:hover, #spin_color option:hover {
    background-color: rgb(53, 62, 67);
}
#loadnextbtn, #loadprevbtn {
    padding: 5px 10px;
    margin: 5px 15px;
    border-radius: 10px;
    border-top: 2px solid rgb(255 106 180);
    background-color: black;
    color: rgb(255 255 230);
    cursor: pointer;
    font-weight: bold;
}
#loadnextbtn:hover, #loadprevbtn:hover {
    background-color: rgb(53, 62, 67);
    box-shadow: 1px 1px 3px rgb(255 106 180);
}
#preview_select, #preview_filter {
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    border-top: 2px solid rgb(255 106 180);
    background-color: black;
    color: rgb(255 255 230);
    font-weight: bold;
    cursor: pointer;
}
#preview_select:hover, #preview_select option, #preview_filter:hover, #preview_filter option {
    background-color: rgb(53, 62, 67);
    box-shadow: 1px 1px 3px rgb(255 106 180);
    color: rgb(241, 150, 196);
    cursor: pointer;
}
#preview_select option, #preview_filter option {
    background-color: black;
    color: rgb(255 255 230);
    cursor: pointer;
    text-align: center;
}
#gallery_header_container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-evenly;
    justify-content: space-evenly;
}
/* build theme button */
#preview_get_theme_btn {
    padding: 5px 15px;
    border-radius: 10px;
    border-top: 3px outset rgb(255 106 180);
    background-color: black;
    color: rgb(255 255 230);
    cursor: pointer;
    margin: 5px auto;
    font-weight: bold;
}
#preview_get_theme_btn:hover {
    background-color: rgb(53, 62, 67);
    box-shadow: 1px 1px 3px rgb(255 106 180);
}
#num_theme_downloads {
    margin: 5px auto;
    border-radius: 10px;
    border-bottom: 2px outset rgb(255 106 180);
    font-weight: bold;
}
#gallery_header {
    border-radius: 10px;
    border-bottom: 2px outset rgb(255 106 180);
    width: 50%;
    text-align: center;
    margin: 5px auto;
    padding: 5px 15px;
    font-weight: bold;
}
#preview_mainimg, #preview_secondaryimg {
    box-shadow: 1px 1px 3px rgb(255 106 180);
    width: 75%;
    height: 45%;
    margin: 10px auto;
    cursor: pointer;
}
#preview_mainimg:hover, #preview_secondaryimg:hover {
    box-shadow: 1px 1px 3px rgb(255 255 0);
    cursor: pointer;
}
#img_main, #img_secondary {
    width: 90%;
    height: 45%;
}
#preview_video {
    box-shadow: 1px 1px 3px rgb(255 106 180);
}
#preview_imgs_container {
    flex-wrap: nowrap;
    width: 95%;
    height: 90%;
}
#preview_imgs {
    width: 40%;
    height: 90%;
}
/* downloads tab */
#theme_installers {
    margin: 2.5% auto;
    padding: 15px;
    background-color: black;
    border-radius: 10px;
    border-color: rgb(0 0 255);
    border-bottom-style: outset;
    border-top-style: outset;
    box-shadow: 2px 3px 8px rgb(0 0 255);
    border-width: 3px;
    width: 95%;
    height: 90%;
    text-align: center;
}
#downloadimg1, #downloadimg2, #downloadimg3 {
    border-bottom: 5px outset rgb(0 0 255);
    border-top: 3px outset rgb(0 0 255);
    box-shadow: 1px 3px 6px rgb(0 0 255);
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
}
#downloadimg1:hover, #downloadimg2:hover, #downloadimg3:hover {
    border-top-color: rgb(255 255 0);
    border-bottom-color: rgb(255 255 0);
    box-shadow: 1px 3px 6px rgb(255 255 0);
    cursor: pointer;
}
/* stats tab */
#stats_message{
    margin: 2.5% auto;
    padding: 15px;
    background-color: black;
    border-radius: 10px;
    border-top-color: rgb(255 255 0);
    border-bottom-color: rgb(255 255 0);
    box-shadow: 2px 3px 8px rgb(255 255 0);
    border-bottom-style: outset;
    border-top-style: outset;
    border-width: 3px;
    width: 95%;
    height: max-content;
    text-align: left;
}
#show_more_wii, #show_more_vwii, #showlessbtn1, #showlessbtn2 {
    display: none;
}
#showmorebtn1, #showmorebtn2, #showlessbtn1, #showlessbtn2 {
    background-color: black;
    color: rgb(255 255 230);
    margin: 0 auto;
    cursor: pointer;
    border-radius: 10px;
    border-top: 3px outset rgb(255 255 0);
    padding: 5px 10px;
    width: 10%;
    text-align: center;
}
#showmorebtn1:hover, #showmorebtn2:hover, #showlessbtn1:hover, #showlessbtn2:hover {
    background-color: rgb(53, 62, 67);
    border-top-color: rgb(255 255 0);
    box-shadow: 1px 1px 3px rgb(255 255 0);
}
#visitor_count, #wii_downloads, #vwii_downloads, #themecount, #uwii, #ewii, #jwii, #kwii, #uvwii, #evwii, #jvwii {
    float: right;
    margin-right: 10px;
    clear: both;
}
/* links tab */
#links_container {
    margin: 1.5% auto;
    padding: 15px;
    background-color: black;
    border-radius: 10px;
    border-color: rgb(157 0 255);
    box-shadow: 2px 3px 8px rgb(157, 0, 255);
    border-bottom-style: outset;
    border-top-style: outset;
    border-width: 3px;
    width: 95%;
    height: 90%;
    text-align: left;
}
#links_container  h3 {
    text-decoration: underline;
}
#links_container a {
    text-decoration: none;
    color: rgb(255 255 230);
}
#links_container a:hover {
    color: rgb(255 248 0);
}
#arrow {
    text-align: center;
}
/* mail tab */
#mail_img_container {
    margin: 10px auto; 
    width: 30%;
}
#mail_message {
    margin: 2% auto;
    padding: 15px;
    background-color: black;
    border-radius: 10px;
    border-top-color: rgb(255 0 0);
    border-bottom-color: rgb(255 0 0);
    border-bottom-style: outset;
    border-top-style: outset;
    border-width: 3px;
    width: 95%;
    height: 90%;
    text-align: center;
    box-shadow: 2px 3px 8px rgb(255 0 0);
}
#mail_message a{
    text-decoration: none;
    color: rgb(255 255 230);
}
#mail_message a:hover {
    text-decoration: underline;
    color: rgb(214, 67, 67);
}
/* footer */
#footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
#footer p {
    width: 30vw;
    margin: 0 auto;
    background-color: black;
    border-radius: 10px;
    border-color: rgb(0 255 0);
    border-bottom-style: outset;
    border-width: 2px;
    padding: 5px 0;
    text-align: center;
    height: max-content;
}

/* classes */
/* --------------------------------------------------------- */
/* element display */
.flexrow {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.flexcolumn {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
/* close button */
.closepreviewbtn {
    float:right;
    background-color: black;
    color: rgb(255 255 230);
    border: 2px solid rgb(255 255 240);
    border-radius: 10px;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 5;
}
.closepreviewbtn:hover {
    background-color: rgb(53, 62, 67);
}
/* links tab */
.links_page {
    width: 60%;
    margin: 10px auto;
}