@media screen and (min-width: 300px) {
    .container-fluid {
        margin: unset !important;
        /* display: block; */
        width: 100%;
        border: 10px solid var(--accentcolor3);
        padding: 10px;
        overflow: auto;
        height: 100%;
        background-color: var(--maincolor);
    }
    

    :root {
        /* --maincolor: #ffd3ba;
        --secondarycolor: #9ebd6e;
        --accentcolor1: #169873;
        --accentcolor2: #805d93;
        --accentcolor3: #f49fbc; */
    
        /* --buttontextcolor: var(--maincolor);
        --titletextcolor: var(--accentcolor2);
        --poltycolor: var(--accentcolor1); */
    
        
        --darktextshadow: -0.5px -0.5px var(--accentcolor3), 0.5px -0.5px var(--accentcolor3), -0.5px 0.5px var(--accentcolor3), 0.5px 0.5px var(--accentcolor3);
        --lighttextshadow: -0.5px -0.5px var(--accentcolor2), 0.5px -0.5px var(--accentcolor2), -0.5px 0.5px var(--accentcolor2), 0.5px 0.5px var(--accentcolor2);
        --greenoutline: 3px solid var(--accentcolor1);
        --purpleoutline: 3px solid var(--accentcolor2);
    }
    
    .light {
        --maincolor: #ffd3ba;
        --secondarycolor: #9ebd6e;
        --accentcolor1: #169873;
        --accentcolor2: #805d93;
        --accentcolor3: #f49fbc;
    
        --buttontextcolor: var(--maincolor);
        --titletextcolor: var(--accentcolor2);
        --poltycolor: var(--accentcolor1);
    
    }
    
    .dark {
        --maincolor: #564e69;
        --secondarycolor: 	#424454;
        --accentcolor1: #2c2347;
        --accentcolor2: #171330;
        --accentcolor3: #A393BF;
    
        --buttontextcolor: var(--accentcolor3);
        --titletextcolor: var(--accentcolor2);
        --poltycolor: var(--secondarycolor);
    
    }  
    
    * {
        overflow: hidden;
        font-weight: bold;
        font-size: 1em;
        color: var(--titletextcolor);
        
        box-sizing: border-box;
    }
    
    
    /*Elements*/
    html {
        height: 90vh; 
        margin: auto;
        background-color: var(--secondarycolor) !important; 
        overflow: auto;
    }
    
    body {
        min-height: 90vh;
        background-color: var(--secondarycolor) !important;
        margin: auto;
        overflow:auto;
        padding: 0px;
        width: 100vw;
    }
    
    button {
        background-color: var(--accentcolor1);
        padding: 2%;
        color: var(--buttontextcolor) !important;
        font-weight: bold !important;
        border: 2px solid var(--secondarycolor);
    }
    
    button:focus {
        background-color: var(--accentcolor2) !important;
    }
    
    button i {
        color: var(--buttontextcolor)
    }
    
    select {
        background-color: var(--accentcolor1);
        padding: 2%;
        color: var(--maincolor) !important;
        font-weight: bold !important;
        border: 2px solid var(--secondarycolor);
    }
    
    a {
        color: var(--accentcolor1) !important;
    }
    
    b {
        text-shadow: var(--darktextshadow);
        font-weight: bolder;
    }
    
    img {
        object-fit: cover;
        align-self: center;
        display: block;
        width: 100%;
        height: 100%;
    }
    
    rect {
        stroke: transparent;
        stroke-width: 20%;
    }
    
    canvas {
        position: absolute;
        max-width:100%;
        max-height: 256px;
        width: 100%;
        border: 5px solid var(--accentcolor2) !important;
        align-self: flex-start;
    }
    
    
    
    
    /*classes*/
    
    .tos {
        margin: auto;
        width: 70%;
        left: 15%;
        opacity: 95%;
        display: block;
        z-index: 2;
        border: 10px solid var(--accentcolor3);
        padding: 10px;
        overflow: auto;
        position: absolute;
        top: 5%;
        height: 90%;
        background-color: var(--secondarycolor);
    }
    
    /* .tos ul {
        list-style-type: circle;
    } */
    
    .style-menu {
        position: absolute;
        margin: auto;
        /* height: 5px; */
        /* width: 5px; */
        z-index: 2;
        display: block;
        right: 5px;
        top: 5px;
    }
    
    .style-menu i {
        font-size: 2em;
        float: right;
    }
    
    .styles {
        border: 5px solid var(--accentcolor3);
        padding: 10px;
        background-color: var(--maincolor);
    }

    .row {
        background-color: var(--maincolor);
        height: 100%;
        position: relative;
    }
    
    .col-sm-6 {
        position: relative;
    }
    
    
    .menus {
        position:relative;
        margin-bottom: -5px;
        margin-left: 10px;
        height: 95vh;
        border: 5px solid var(--accentcolor2)
    }
    
    .cont {
        float: left;
        height: 100%;
        width: 75%;
    }
    
    .leftmenu {
        width: 100%;
        position: relative;
        background-color: var(--secondarycolor);
        height: 90%;
    }
    
    .activetab {
        width: 100%;
        height: 100%;
        /* padding: 3px; */
        background-color: var(--secondarycolor);
        position: absolute;
        border: var(--greenoutline);
        /* outline-offset: -3px; */
        border-left: 2px solid var(--accentcolor1);
        border-right: 2px solid var(--accentcolor1);
    }
    
    .menulabel {
        text-align: center;
        margin: auto;
        display: block;
        height: 10%;
        padding: 2%;
        line-height: 100%;
        width: 100%;
        /* border-left: 2px solid var(--accentcolor1); */
        /* border-right: 2px solid var(--accentcolor1);  */
    }
    
    .colormenu {
        width: 100%;
        z-index: 1;
        /* display: none; */
        position: absolute !important;
        bottom: 0 !important;
        height: 100%;
        align-items: stretch;
    }
    
    .selection {
        display: grid;
        width: 100% !important;
        align-self: stretch;
        align-items: stretch;
        height: 95%;
        /* grid-gap: 2px; */
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fit, 1fr);
        padding-top: 1px;
        bottom: 0;
        position: absolute;
        left: 0;
        /* grid-auto-flow: dense row; */
        align-content: stretch;
        background-color: var(--accentcolor1);
        grid-column-start: auto;
        justify-items: stretch;
        /* margin-right: -1px; */
    }
    
    .selection label {
        cursor: pointer;
        display: flex;
        width: 100% !important;
        align-items: flex-end;
        height: 100% !important;
        align-self: stretch;
        /* vertical-align: bottom; */
        /* padding: 2%; */
        border: 2px solid var(--accentcolor1);
        /* outline-offset: -1px; */
        background-color: var(--secondarycolor);
        /* margin: auto; */
        overflow: hidden;
    }
    
    .colorselect label {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        justify-content: center;
        position: relative;
        margin-top: -1px;
        object-fit: contain;
        padding: 5%;
        padding-right: 5.2%;
        padding-bottom: 5%;
        outline: var(--greenoutline);
        outline-offset: -3px;
    }
    
    .selection input[type=radio] {
        opacity: 0;
        position: absolute;
    }
    
    .selection input[type=radio]:checked+label{
        background-color: var(--accentcolor2);
    }
    
    .selection label:nth-of-type(3n+1) {
        border-left: 0px;
    }
    
    .selection label:nth-of-type(3n+3) {
        border-right: 0px;
    }
    
    .hidden {
        display: none;
    }
    
    .caption {
        position:relative;
        /* margin-top: -5%; */
        max-width: 100%;
        /* height: 30px; */
        max-height: 100%;
        /* padding-left: 10px; */
        width: 100%;
        align-self:flex-end;
        display: inline-block;
    }
    
    .dl {
        display: block;
        width: 100%;
        height: 10%;
        align-self:flex-end; 
    }
    
    .dl button {
        height: 100%;
        display: inline-block;
        line-height: 10%;
        /* position: absolute; */
    }
    
    .side {
        margin-left: 2%;
        max-height: 100%;
        border: var(--purpleoutline);
        width: 100%;
        margin: auto;
    }
    
    .columnSide {
        display: flex;
        position: relative;
        height: fit-content(85%);
        flex-flow: column;
    }
    
    .canvas {
        width: 100%;
        position: absolute;
        object-fit: contain;
    
    }
    
    .canvases {
        margin-bottom: 2%;
    }
    
    .canvases div {
        display: flex;
        max-width: 256px;
        object-fit: contain;
        margin: auto;
        height: 290px;
        position: relative;
    }    
    
    .tabs {
        display: grid;
        float: right;
        width: 25%;
        height: 90%;
        overflow: auto;
        border-right: var(--purpleoutline);
        border-left: var(--purpleoutline);
        position: relative;
        /* margin-left: 1px; */
    }
    
    .tabs button {
        background-color: var(--accentcolor1);
        display: block;
        border: 1px solid var(--accentcolor2);
    }
    
     .options {
        position: absolute;
        display:inline-block;
    }
    
    .hideoption {
        display:none;
    }
    
    
    .buttons {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 25%) !important;
        bottom: 0;
        align-content: stretch;
    }
    
    .buttons button {
        display: inline-block;
        height: 100%;
    }
    
    
    .colorbuttons {
        position: absolute;
        min-width: 100%;
        display: grid;
        overflow-x: auto;
        grid-template-columns: repeat(8, 12.5%);
        grid-auto-flow: column;
        border-right: var(--purpleoutline);
        border-top: var(--purpleoutline);
        bottom: 0;
        height: 10%;
    }
    
    .colorbuttons button {
        display: block;
        position: relative;
        background-color: var(--accentcolor1);
        border: 1px solid var(--accentcolor2);
        height: 100%;
    }
    
    
    .polty {
        color: var(--poltycolor)
    }
    
    .menu {
        /* display: none; */
        width: 100%;
        height: 100%;
        top: 0;
        /* padding: 3px; */
        /* margin: auto; */
        position: absolute;
    }
    
    .active {
        background-color: var(--accentcolor2) !important;
    }
    
    /* .caption span {
        display: inline-block;
        line-height: 30px;
    } */
    
    /* .dl select {
        height: 100%;
        display: inline-block;
        line-height: 10%;
        position: absolute;
    } */
    
    /* .dlOptions {
        display: none;
        position: absolute;
        background-color: var(--accentcolor1);
        color: var(--secondarycolor);
        z-index: 1;
    }
     */
    
     /* .showOptions {
        display: block;
    } */
    
    
    
    
    
    
    
    
    /* IDs */
    
    #instructions img {
        width: 88px;
        display: unset;
        height: 31px;
        margin: auto;
        object-fit: unset;
    }
    
    #credits {
        text-align: center;
        width: 100% !important;
        padding: 5px;
    }
    
    #credits h3{
        font-weight: bolder;
        text-shadow: var(--darktextshadow)
    
    }
    
    #menuside{
        height: 95vh;
    }
    
    #shirtselect, #jacketselect, #otherclothesselect {
        grid-template-columns: repeat(4, 25%);
    }
    
    #bhairselect, #thairselect {
        grid-template-columns: repeat(5, 20%);
    }
    /* #beardselect {
        grid-template-columns: rep;
    } */
    
    #hatselect {
        grid-template-columns: repeat(5, 20%);
    }
    
    #sleeveselect {
        grid-template-columns: repeat(4, 25%);
    }
    
    #markselect, #markselect2 {
        grid-template-columns: repeat(4, 25%);
    }
    
    #accselect, #accselect2 {
        grid-template-columns: repeat(5, 20%);
    }
    
    
    
    /* Classes */
    #download {
        width: 50%;
        left: 0;
        float: left;
    }
    
    #dlsmall {
        width: 50%;
        float: right;
    }
    
    /* #openDropdown {
        width: 25%;
        right: 0;
        float: right;
        padding: 2%;
    } */
    
    #openDropdown option {
        background-color: var(--secondarycolor);
        border-radius: 0%;
        text-align: center;
    }
    
    /* #dloption {
        position: absolute;
        display: inline-block;
    } */
    
    
    #thairselect label, #bhairselect label, #markselect label, #markselect2 label, #shirtselect label, #jacketselect label, #accselect label, #accselect2 label, #hatselect label, #otherclothesselect label, #sleeveselect label{
        border: 2px solid var(--accentcolor1);
    }
    
    
    #thairselect label:nth-of-type(5n+1), #bhairselect label:nth-of-type(5n+1), #markselect label:nth-of-type(4n+1), #markselect2 label:nth-of-type(4n+1), #shirtselect label:nth-of-type(4n+1), #jacketselect label:nth-of-type(4n+1), #accselect label:nth-of-type(5n+1), #accselect2 label:nth-of-type(5n+1), #hatselect label:nth-of-type(5n+1), #otherclothesselect label:nth-of-type(4n+1), #sleeveselect label:nth-of-type(4n+1) {
        border-left: 0px;
    }
    
    #thairselect label:nth-of-type(5n), #bhairselect label:nth-of-type(5n), #markselect label:nth-of-type(4n), #markselect2 label:nth-of-type(4n), #shirtselect label:nth-of-type(4n), #jacketselect label:nth-of-type(4n), #accselect label:nth-of-type(5n), #accselect2 label:nth-of-type(5n), #hatselect label:nth-of-type(5n), #otherclothesselect label:nth-of-type(4n), #sleeveselect label:nth-of-type(4n)  {
        border-right: 0px;
    }
    
    
    
    
}

@media screen and (min-width: 1200px) {
    .container-fluid {
        margin: auto 100px;
        display: block;
        width: 100%;
        border: 10px solid var(--accentcolor3);
        padding: 10px;
        overflow: auto;
        height: 100%;
        background-color: var(--maincolor);
    }

    :root {
        /* --maincolor: #ffd3ba;
        --secondarycolor: #9ebd6e;
        --accentcolor1: #169873;
        --accentcolor2: #805d93;
        --accentcolor3: #f49fbc; */
    
        /* --buttontextcolor: var(--maincolor);
        --titletextcolor: var(--accentcolor2);
        --poltycolor: var(--accentcolor1); */
    
        
        --darktextshadow: -0.5px -0.5px var(--accentcolor3), 0.5px -0.5px var(--accentcolor3), -0.5px 0.5px var(--accentcolor3), 0.5px 0.5px var(--accentcolor3);
        --lighttextshadow: -0.5px -0.5px var(--accentcolor2), 0.5px -0.5px var(--accentcolor2), -0.5px 0.5px var(--accentcolor2), 0.5px 0.5px var(--accentcolor2);
        --greenoutline: 3px solid var(--accentcolor1);
        --purpleoutline: 3px solid var(--accentcolor2);
    }
    
    .light {
        --maincolor: #ffd3ba;
        --secondarycolor: #9ebd6e;
        --accentcolor1: #169873;
        --accentcolor2: #805d93;
        --accentcolor3: #f49fbc;
    
        --buttontextcolor: var(--maincolor);
        --titletextcolor: var(--accentcolor2);
        --poltycolor: var(--accentcolor1);
    
    }
    
    .dark {
        --maincolor: #564e69;
        --secondarycolor: 	#424454;
        --accentcolor1: #2c2347;
        --accentcolor2: #171330;
        --accentcolor3: #A393BF;
    
        --buttontextcolor: var(--accentcolor3);
        --titletextcolor: var(--accentcolor2);
        --poltycolor: var(--secondarycolor);
    
    } 
    
    * {
        overflow: hidden;
        font-weight: bold;
        font-size: 1em;
        color: var(--titletextcolor);
        
        box-sizing: border-box;
    }
    
    
    /*Elements*/
    html {
        height: 90vh; 
        margin: auto;
        background-color: var(--secondarycolor) !important; 
        overflow: auto;
    }
    
    body {
        min-height: 90vh;
        background-color: var(--secondarycolor) !important;
        margin: auto;
        overflow:auto;
        padding: 0px 200px;
        width: 100vw;
    }
    
    button {
        background-color: var(--accentcolor1);
        padding: 2%;
        color: var(--buttontextcolor) !important;
        font-weight: bold !important;
        border: 2px solid var(--secondarycolor);
    }
    
    button:focus {
        background-color: var(--accentcolor2) !important;
    }
    
    button i {
        color: var(--buttontextcolor)
    }
    
    select {
        background-color: var(--accentcolor1);
        padding: 2%;
        color: var(--maincolor) !important;
        font-weight: bold !important;
        border: 2px solid var(--secondarycolor);
    }
    
    a {
        color: var(--accentcolor1) !important;
    }
    
    b {
        text-shadow: var(--darktextshadow);
        font-weight: bolder;
    }
    
    img {
        object-fit: cover;
        align-self: center;
        display: block;
        width: 100%;
        height: 100%;
    }
    
    rect {
        stroke: transparent;
        stroke-width: 20%;
    }
    
    canvas {
        position: absolute;
        max-width:100%;
        max-height: 256px;
        width: 100%;
        border: 5px solid var(--accentcolor2) !important;
        align-self: flex-start;
    }
    
    
    
    
    /*classes*/
    
    .tos {
        margin: auto;
        width: 70%;
        left: 15%;
        opacity: 95%;
        display: block;
        z-index: 2;
        border: 10px solid var(--accentcolor3);
        padding: 10px;
        overflow: auto;
        position: absolute;
        top: 5%;
        height: 90%;
        background-color: var(--secondarycolor);
    }
    
    /* .tos ul {
        list-style-type: circle;
    } */
    
    .style-menu {
        position: absolute;
        margin: auto;
        /* height: 5px; */
        /* width: 5px; */
        z-index: 2;
        display: block;
        right: 5px;
        top: 5px;
    }
    
    .style-menu i {
        font-size: 2em;
        float: right;
    }
    
    .styles {
        border: 5px solid var(--accentcolor3);
        padding: 10px;
        background-color: var(--maincolor);
    }

    .row {
        background-color: var(--maincolor);
        height: 100%;
        position: relative;
    }
    
    .col-sm-6 {
        position: relative;
    }
    
    
    .menus {
        position:relative;
        margin-bottom: -5px;
        margin-left: 10px;
        height: 95vh;
        border: 5px solid var(--accentcolor2)
    }
    
    .cont {
        float: left;
        height: 100%;
        width: 75%;
    }
    
    .leftmenu {
        width: 100%;
        position: relative;
        background-color: var(--secondarycolor);
        height: 90%;
    }
    
    .activetab {
        width: 100%;
        height: 100%;
        /* padding: 3px; */
        background-color: var(--secondarycolor);
        position: absolute;
        border: var(--greenoutline);
        /* outline-offset: -3px; */
        border-left: 2px solid var(--accentcolor1);
        border-right: 2px solid var(--accentcolor1);
    }
    
    .menulabel {
        text-align: center;
        margin: auto;
        display: block;
        height: 10%;
        padding: 2%;
        line-height: 100%;
        width: 100%;
        /* border-left: 2px solid var(--accentcolor1); */
        /* border-right: 2px solid var(--accentcolor1);  */
    }
    
    .colormenu {
        width: 100%;
        z-index: 1;
        /* display: none; */
        position: absolute !important;
        bottom: 0 !important;
        height: 100%;
        align-items: stretch;
    }
    
    .selection {
        display: grid;
        width: 100% !important;
        align-self: stretch;
        align-items: stretch;
        height: 95%;
        /* grid-gap: 2px; */
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fit, 1fr);
        padding-top: 1px;
        bottom: 0;
        position: absolute;
        left: 0;
        /* grid-auto-flow: dense row; */
        align-content: stretch;
        background-color: var(--accentcolor1);
        grid-column-start: auto;
        justify-items: stretch;
        /* margin-right: -1px; */
    }
    
    .selection label {
        cursor: pointer;
        display: flex;
        width: 100% !important;
        align-items: flex-end;
        height: 100% !important;
        align-self: stretch;
        /* vertical-align: bottom; */
        /* padding: 2%; */
        border: 2px solid var(--accentcolor1);
        /* outline-offset: -1px; */
        background-color: var(--secondarycolor);
        /* margin: auto; */
        overflow: hidden;
    }
    
    .colorselect label {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        justify-content: center;
        position: relative;
        margin-top: -1px;
        object-fit: contain;
        padding: 5%;
        padding-right: 5.2%;
        padding-bottom: 5%;
        outline: var(--greenoutline);
        outline-offset: -3px;
    }
    
    .selection input[type=radio] {
        opacity: 0;
        position: absolute;
    }
    
    .selection input[type=radio]:checked+label{
        background-color: var(--accentcolor2);
    }
    
    .selection label:nth-of-type(3n+1) {
        border-left: 0px;
    }
    
    .selection label:nth-of-type(3n+3) {
        border-right: 0px;
    }
    
    .hidden {
        display: none;
    }
    
    .caption {
        position:relative;
        /* margin-top: -5%; */
        max-width: 100%;
        /* height: 30px; */
        max-height: 100%;
        /* padding-left: 10px; */
        width: 100%;
        align-self:flex-end;
        display: inline-block;
    }
    
    .dl {
        display: block;
        width: 100%;
        height: 10%;
        align-self:flex-end; 
    }
    
    .dl button {
        height: 100%;
        display: inline-block;
        line-height: 10%;
        /* position: absolute; */
    }
    
    .side {
        margin-left: 2%;
        max-height: 100%;
        border: var(--purpleoutline);
        width: 100%;
        margin: auto;
    }
    
    .columnSide {
        display: flex;
        position: relative;
        height: fit-content(85%);
        flex-flow: column;
    }
    
    .canvas {
        width: 100%;
        position: absolute;
        object-fit: contain;
    
    }
    
    .canvases {
        margin-bottom: 2%;
    }
    
    .canvases div {
        display: flex;
        max-width: 256px;
        object-fit: contain;
        margin: auto;
        height: 290px;
        position: relative;
    }    
    
    .tabs {
        display: grid;
        float: right;
        width: 25%;
        height: 90%;
        overflow: auto;
        border-right: var(--purpleoutline);
        border-left: var(--purpleoutline);
        position: relative;
        /* margin-left: 1px; */
    }
    
    .tabs button {
        background-color: var(--accentcolor1);
        display: block;
        border: 1px solid var(--accentcolor2);
    }
    
     .options {
        position: absolute;
        display:inline-block;
    }
    
    .hideoption {
        display:none;
    }
    
    
    .buttons {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 25%) !important;        
        bottom: 0;
        align-content: stretch;
    }
    
    .buttons button {
        display: inline-block;
        height: 100%;
    }
    
    
    .colorbuttons {
        position: absolute;
        min-width: 100%;
        display: grid;
        overflow-x: auto;
        grid-template-columns: repeat(8, 12.5%);
        grid-auto-flow: column;
        border-right: var(--purpleoutline);
        border-top: var(--purpleoutline);
        bottom: 0;
        height: 10%;
    }
    
    .colorbuttons button {
        display: block;
        position: relative;
        background-color: var(--accentcolor1);
        border: 1px solid var(--accentcolor2);
        height: 100%;
    }
    
    
    .polty {
        color: var(--poltycolor)
    }
    
    .menu {
        /* display: none; */
        width: 100%;
        height: 100%;
        top: 0;
        /* padding: 3px; */
        /* margin: auto; */
        position: absolute;
    }
    
    .active {
        background-color: var(--accentcolor2) !important;
    }
    
    /* .caption span {
        display: inline-block;
        line-height: 30px;
    } */
    
    /* .dl select {
        height: 100%;
        display: inline-block;
        line-height: 10%;
        position: absolute;
    } */
    
    /* .dlOptions {
        display: none;
        position: absolute;
        background-color: var(--accentcolor1);
        color: var(--secondarycolor);
        z-index: 1;
    }
     */
    
     /* .showOptions {
        display: block;
    } */
    
    
    
    
    
    
    
    
    /* IDs */
    
    #instructions img {
        width: 88px;
        display: unset;
        height: 31px;
        margin: auto;
        object-fit: unset;
    }
    
    #credits {
        text-align: center;
        width: 100% !important;
        padding: 5px;
    }
    
    #credits h3{
        font-weight: bolder;
        text-shadow: var(--darktextshadow)
    
    }
    
    #menuside{
        height: 95vh;
    }
    
    #shirtselect, #jacketselect, #otherclothesselect {
        grid-template-columns: repeat(4, 25%);
    }
    
    #bhairselect, #thairselect {
        grid-template-columns: repeat(5, 20%);
    }
    /* #beardselect {
        grid-template-columns: rep;
    } */
    
    #hatselect {
        grid-template-columns: repeat(5, 20%);
    }
    
    #sleeveselect {
        grid-template-columns: repeat(4, 25%);
    }
    
    #markselect, #markselect2 {
        grid-template-columns: repeat(4, 25%);
    }
    
    #accselect, #accselect2 {
        grid-template-columns: repeat(5, 20%);
    }
    
    
    
    /* Classes */
    #download {
        width: 50%;
        left: 0;
        float: left;
    }
    
    #dlsmall {
        width: 50%;
        float: right;
    }
    
    /* #openDropdown {
        width: 25%;
        right: 0;
        float: right;
        padding: 2%;
    } */
    
    #openDropdown option {
        background-color: var(--secondarycolor);
        border-radius: 0%;
        text-align: center;
    }
    
    /* #dloption {
        position: absolute;
        display: inline-block;
    } */
    
    
    #thairselect label, #bhairselect label, #markselect label, #markselect2 label, #shirtselect label, #jacketselect label, #accselect label, #accselect2 label, #hatselect label, #otherclothesselect label, #sleeveselect label{
        border: 2px solid var(--accentcolor1);
    }
    
    
    #thairselect label:nth-of-type(5n+1), #bhairselect label:nth-of-type(5n+1), #markselect label:nth-of-type(4n+1), #markselect2 label:nth-of-type(4n+1), #shirtselect label:nth-of-type(4n+1), #jacketselect label:nth-of-type(4n+1), #accselect label:nth-of-type(5n+1), #accselect2 label:nth-of-type(5n+1), #hatselect label:nth-of-type(5n+1), #otherclothesselect label:nth-of-type(4n+1), #sleeveselect label:nth-of-type(4n+1) {
        border-left: 0px;
    }
    
    #thairselect label:nth-of-type(5n), #bhairselect label:nth-of-type(5n), #markselect label:nth-of-type(4n), #markselect2 label:nth-of-type(4n), #shirtselect label:nth-of-type(4n), #jacketselect label:nth-of-type(4n), #accselect label:nth-of-type(5n), #accselect2 label:nth-of-type(5n), #hatselect label:nth-of-type(5n), #otherclothesselect label:nth-of-type(4n), #sleeveselect label:nth-of-type(4n)  {
        border-right: 0px;
    }
    
    
    
    
    
}