:root {
  /*here I am defining my own colours and other variables so I can change them all in one go*/
  --myblack: #092834;         /*   var(--myblack)      */

  --squarebutton: 50px;       /*   var(--squarebutton) */
  --rectanglebutton: 35px;    /*   var(--rectanglebutton) */
  --eyebutton: 35px;          /*   var(--eyebutton) */
  --buttonsgap: 12px;         /*   var(--buttonsgap) */
  --boxpadding: 20px;         /*   var(--boxpadding) */
  --buttonsradius: 15px;      /*   var(--buttonsradius) */
  --furgrid: 4;               /*   var(--furgrid) */


  --cardradius: 22px;          /*   var(--cardradius)  */

}

.wholegame
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--boxpadding);
}

.stickybox
{
    position: sticky;
    top: 0;
    z-index: 5;

    width: 100%;
    flex-basis: 600px;
    flex-grow: 1;

    background-color: var(--mywhite);
    background: linear-gradient(180deg,var(--mywhite) 0%, var(--mywhite) 98%, rgba(228, 241, 246, 0) 100%);

    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    margin-top: calc(-1 * var(--boxpadding));
}

.layerbox
{
    position: relative;
    margin-top: var(--boxpadding);
    margin-bottom: var(--boxpadding);


    width: 100%;
    max-width: 600px;
    max-height: 400px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 40px;
}

        .layerboxcontent
        {
            position: absolute;
            top: 18.75%;
            left: 25%;
            width: 50%;
            height: 75%;
            background-size: 100%;
        }

        .layerboxbackground
        {
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
        }

.configzone
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap:  var(--boxpadding);

    width: 100%;
    flex-basis: calc(var(--squarebutton) * 4 + var(--buttonsgap) * 3 + 2 * var(--boxpadding));
    flex-grow: 1;
    max-height: none;
}

.configzonecol
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap:  var(--boxpadding);
}



    .multibox
    {
        display: flex;
        flex-direction: column;
        gap: var(--boxpadding);
    }

.sliderbox
{
    display: flex;
    flex-direction: column;
    gap: var(--boxpadding);
}

.slider
{
width: 100%;
}

/* C O N T R O L S */
/* controls - appearance*/
.customisationzone
{
    background-color: white;
    border-radius: 25px;
    padding: var(--boxpadding);
    max-width: calc(var(--squarebutton) * 4 + var(--buttonsgap) * 3);
}

.customisationheader
{
    display: flex;
}

.customisationheader > h2
{
    flex-grow: 1;
}

.customisationtitle
{
    color: var(--midtone);
}

.squarebuttonbox
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--buttonsgap);

}

.squarebutton
{
    /*width: calc(25% - 3 * var(--buttonsgap) / 4);*/
    min-width: 5px;
    flex-basis: calc(25% - 3 * var(--buttonsgap) / 4);
    aspect-ratio: 1 / 1;
    flex-shrink: 1;
    border-radius: var(--buttonsradius);
    cursor: pointer;
}

.customfurselectzone
{
    margin-top: var(--buttonsgap);
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 5px;
}

.customfurbutton
{
    width: var(--squarebutton);
    height: var(--squarebutton);
    border-radius: var(--buttonsradius);
    cursor: pointer;
    flex-grow: 1;
}

.markingbuttonbox
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--buttonsgap);
}

.backgroundbutton
{
    position: relative;
    min-width: 5px;
    flex-basis: calc(25% - 3 * var(--buttonsgap) / 4);
    aspect-ratio: 1 / 1;
    border-radius: var(--buttonsradius);
    cursor: pointer;
    background-position: right;
    background-size: cover;
    overflow: hidden;
}

.markingbutton
{
    position: relative;
    min-width: 5px;
    flex-basis: calc(25% - 3 * var(--buttonsgap) / 4);
    aspect-ratio: 1 / 1;
    border-radius: var(--buttonsradius);
    cursor: pointer;
    background-color: var(--mywhite);
    background-size: cover;
    overflow: hidden;
}

.markingbutton > img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.spotblazebutton
{
    position: relative;
    min-width: 5px;
    flex-basis: calc(25% - 3 * var(--buttonsgap) / 4);
    aspect-ratio: 1 / 1;
    border-radius: var(--buttonsradius);
    cursor: pointer;
    background-color: var(--mywhite);
    background-size: cover;
    overflow: hidden;
}

.spotblazebutton > img
{
    position: absolute;
    top: -5px;
    right: -3px;
    width: 170%;
    height: 170%;
}

.rattextbutton
{
    height: var(--rectanglebutton);
    border-radius: var(--buttonsradius);
    background-color: var(--midtone);
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--lighttone);
}

.solobutton
{
    flex-basis: calc(var(--rectanglebutton)*2.5);
    flex-grow: 1;
    margin-bottom: 6px;
}

.earbuttonbox
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--buttonsgap);
}

.earbutton
{
    height: var(--rectanglebutton);
    border-radius: var(--buttonsradius);
    background-color: var(--midtone);
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--lighttone);
}


.eyesubgroups
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--boxpadding);
    flex-grow: 1;
}

.eyebuttonbox
{
    display: flex;
    flex-wrap: nowrap;
    gap: var(--buttonsgap);
    justify-content: center;
    align-items: center;
}

.eyelabel
{
    width:  calc(var(--eyebutton)*0.5);
    aspect-ratio: 1 / 1;
    margin: 0;
    text-align: center;
}

.eyebutton
{
    min-width: var(--eyebutton);
    aspect-ratio: 1 / 1;
    border-radius: var(--eyebutton);
    cursor: pointer;
}

.selectedbutton
{
    color: var(--mywhite);
    outline: solid 4px var(--lighttone);
}

/* S I L V E R M A N E   M E R L E   Z O N E */

.silvermerlezone
{
    margin-top: var(--boxpadding);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--boxpadding);
}

.silvermane
{
    opacity: 0%;
}

.merle
{
    position: absolute;
    top: 18.75%;
    right: 25%;
    background-size: 100%;
    width: calc(1300%/6); /* 1300 vs width 600 */
    height: 175%; /* 700 vs height 400 */
    opacity: 0;
}
/* E A R S */

.earstop
{
    background-image: url('ears_top.png');
}

.earsdumbo
{
    background-image: url('ears_dumbo.png');
}


/* M A R K I N G S here are all the markings */
.capped
{
    background-image: url('marking_capped.png');
}

.variegated
{
    background-image: url('marking_variegated.png');
}

/* C O L O U R S here all the colours of parts are defined */
/*https://codepen.io/sosuke/pen/Pjoqqp used to create filters for colours*/
/* E Y E S */
.eyebase
{
background-color: black;
}

.rubybase
{
background-color: #5f1621;
}

.pinkbase
{
background-color: #ab4949;
}

.cloudbase
{
background-color: #a7b6d5;
}

.eyeruby
{
filter: invert(7%) sepia(73%) saturate(3984%) hue-rotate(338deg) brightness(89%) contrast(90%);
}

.eyepink
{
filter: invert(35%) sepia(17%) saturate(2009%) hue-rotate(310deg) brightness(98%) contrast(90%);
}

.eyecloud
{
filter: invert(73%) sepia(41%) saturate(178%) hue-rotate(182deg) brightness(92%) contrast(90%);
}

/* F U R */

.furbase
{
background-color: #191919;
}


.pointburmese /* #5a3e28 */
{
opacity: 1;
filter: invert(20%) sepia(64%) saturate(415%) hue-rotate(345deg) brightness(96%) contrast(86%);
}

.pointsiamese /* #493729 */
{
opacity: 1;
filter: invert(16%) sepia(13%) saturate(1863%) hue-rotate(344deg) brightness(94%) contrast(79%);
}


.pointhimalayan /* #4f3129 */
{
opacity: 1;
filter: invert(17%) sepia(19%) saturate(1322%) hue-rotate(326deg) brightness(98%) contrast(86%);
}

/* H A I R L E S S */

.hairlessbase
{
    background-color: #ddae96;
}

.hairlesscolour
{
    opacity: 25%;
}

.hairlesswhite
{
filter: brightness(0) saturate(100%) invert(78%) sepia(24%) saturate(458%) hue-rotate(334deg) brightness(91%) contrast(90%);
}

.pointnone /*  */
{
opacity: 0;
}



                /* mobile formatting section */
                @media screen and (max-width: 480px){ /*with just making the screen wider and narrower, there will be a horizontal scroll bar appear if it's not about 20px wider cutoff than my header width*/
                .layerbox
                {
                border-radius: 8vw;
                }

                .customisationtitle
                {
                    font-size: 6vw;
                }

                .rattextbutton
                {
                    font-size: 4.5vw;
                }

                .squarebutton
                {
                    border-radius: 3vw;
                }

                .backgroundbutton
                {
                    border-radius: 3vw;
                }

                .markingbutton
                {
                    border-radius: 3vw;
                }

                .spotblazebutton
                {
                    border-radius: 3vw;
                }

                .eyelabel
                {
                    width: 2vw;
                    font-size: 4.5vw;
                }

                .eyebutton
                {
                    min-width: 8vw;
                    font-size: 3vw;
                }

                }/* this is the end of the narrow screen version of the config zone*/
.hidden
{
    visibility: hidden;
    display: none;
    width: 0;
    height: 0;
    margin: 0;
}