:root {
  /*here I am defining my own colours and other variables so I can change them all in one go*/
  --myblack: #092834;        /*   var(--myblack)      */
  --darktone: #1A3E4C;       /*   var(--darktone)     */
  --midtone: #347B98;        /*   var(--midtone)      */
  --lighttone: #67AFCB;      /*   var(--lighttone)    */
  --mywhite: #E4F1F6;        /*   var(--mywhite)      */
  --pptone: #ffd140;         /*   var(--pptone)      */
  
  --muttcream: #f2ceae;      /*   var(--muttcream)    */
  --muttbrown: #9f7c5c;      /*   var(--muttbrown)    */
  --muttblush: #ff8c5c;      /*   var(--muttblush)    */
  --mutttongue: #9f3e2b;      /*   var(--mutttongue)    */
  
  --aqua: #71a19b;           /*   var(--aqua)         */
  --mint: #82b29b;           /*   var(--mint)         */
  
  --berry: #712740;          /*   var(--berry)        */
  --red: #b54246;            /*   var(--red)          */
  --orange: #e97c5a;         /*   var(--orange)       */
  --gold: #d4976a;           /*   var(--gold)         */
  --yellow: #ffda93;         /*   var(--yellow)       */

  --imageradius: 8px;        /*   var(--imageradius)  */
  --flexgapvert: 6px;        /*   var(--flexgapvert)  */
  --flexgaphor: 6px;         /*   var(--flexgaphor)   */

  --buttonradius: 50px;      /*   var(--buttonradius) */

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

  --mobilewidth: 640px;      /*   var(--mobilewidth)  THIS DOES NOT SEEM TO BE ALLOWED */
}



/* H E A D E R - any property common to all kinds of header*/
.headerbg{
  background-color: var(--midtone);
}

.hug{
    background-image: url('craftys/hug.gif');
}

.jam{
    background-image: url('craftys/jam.gif');
}

.kappa{
    background-image: url('craftys/kappa.png');
}

.party{
    background-image: url('craftys/party.png');
}

.spook{
    background-image: url('craftys/spook.gif');
}

.wave{
    background-image: url('craftys/wave.png');
}

.sparkle{
    background-image: url('craftys/sparkle.gif');
}

.twitch{
    background-image: url('icon/twitch.png');
    background-size: cover;
}

.ravelry{
    background-image: url('icon/ravelry.png');
    background-size: cover;
}

.etsy{
    background-image: url('icon/etsy.png');
    background-size: cover;
}

.bsky{
    background-image: url('icon/bsky.png');
    background-size: cover;
}

#myheader{/*this is the general header's div background box format*/
  background-repeat: no-repeat;
}

#myheader h1 {
  margin: 0;
}

#bigtitle a:link {
  text-decoration: none;
}

#crafty{
  color: var(--lighttone);
}
#mutt{
  color: var(--darktone);
}

/* #myheader h2 is omitted here because it is only used for bigheader, so there are no overlapping properties */


/* the background behind everything else */
body {
  background-color: var(--lighttone);
  color: var(--darktone);
  font-family: Verdana;
  padding: 0;
  margin: 0;
}

/* A R E A   F O R   C O N T E N T  - any property common to all kinds of body */


.first{/*this will remove any extra margins above text that has the class since it's the first thing in the box*/
  margin-top: 0px;
}

.last{/*this will remove any extra margins below text that has the class since it's the last thing in the box*/
  margin-bottom: 0px;
}

/* T E X T   S T Y L E S */
h1{

  font-size: 34px;
  color: var(--midtone);
  margin-top: 28px;
  margin-bottom:16px;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  font-style: normal;
}

.major{
  color: var(--mywhite);
  background: var(--midtone);
  padding: 15px;
  border-radius: 40px;
  text-align: center;
}

h2{
  font-size: 28px;
  color: var(--lighttone);
  margin-top: 28px;
  margin-bottom:16px;
  font-weight: bold;
  font-style: normal;
}

h3{
  font-size: 24px;
  color: var(--midtone);
  margin-top: 22px;
  margin-bottom: 16px;
  font-weight: normal;
  font-style: normal;
}

h4{
  font-size: 24px;
  color: var(--lighttone);
  margin-top: 22px;
  margin-bottom: 16px;
  font-weight: normal;
  font-style: italic;
}

h5{
  font-size: 20px;
  color: var(--midtone);
  margin-top: 22px;
  margin-bottom: 16px;
  font-weight: bold;
  font-style: normal;
}

h6{
  font-size: 20px;
  color: var(--darktone);
  margin-top: 22px;
  margin-bottom: 16px;
  font-weight: normal;
  font-style: italic;
}

p{
  color: var(--darktone);
  font-size: 16px;
    line-height: 1.5;
}


.strongtext
{
    font-weight: bold;
    color: var(--midtone);
}

.justbold
{
    font-weight: bold;
}

.justitalic
{
  font-style: italic;
}

.weaktext
{
    font-size: 14px;
    color: var(--midtone);
}

.centertext
{
text-align: center;
}

.whitetext
{
  color: white;
}

.lighttext
{
    color: var(--lighttone);
}

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

.darktext
{
    color: var(--darktone);
}

.text36pt
{
    font-size: 36px;
}


/* formatting links */
.linkforward{
  text-align: right;
}

.linkback{
  text-align: left;
}

.nolinelink
{
text-decoration: none;
}

.tooltiplink
{
    position: relative;
    display: inline-block;
}

                /* mobile formatting of fonts (mostly headers) section */
                @media screen and (max-width: 681px){
                h1{
                  font-size: 26px;
                }

                h2{
                  font-size: 24px;
                }

                h3{
                  font-size: 22px;
                }

                h4{
                  font-size: 22px;
                }

                h5{
                  font-size: 20px;
                }

                h6{
                  font-size: 20px;
                }

                /*p{
                  font-size: 14px;
                }*/

                }

.tooltiplink:hover .tooltip
{
    visibility: visible;
    display: inline;
    opacity: 1;
}

.tooltip
{
    visibility: hidden;
    display: none;
    background-color: #666;
    width: 200px;
    height: 150px;
    color: #fff;
    border-radius: 6px;
    padding: 5px;
    text-align: center;
    position: absolute;
    z-index: 1;
    opacity: 0.5;
    transition: opacity 0.3s;

    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    top: 100%;
    bottom: auto;
}

.tooltippic
{
    width: 200px;
    height: 150px;
    object-fit: cover;
}

                /* mobile formatting section */
                @media screen and (max-width: 681px){

                    .tooltip
                    {
                        width: 140px;
                        height: 105px;
                    }

                    .tooltippic
                    {
                        width: 140px;
                        height: 105px;
                    }

                }/* this is the end of the narrow screen version of the pattern cards


/*  LIST FORMATTING */

.level1
{
    list-style-type: disc;
}

.level2
{
list-style-type: circle;
}

/* pointer styling */
.pointyhand
{
cursor: pointer;
}

/* Image Styling */

.imagewide /* for an image that sits the full width */
{
    display: block;
    width: 100%;
    border-radius: var(--imageradius);
}

/*hot flexzone action*/
.flex1
{
flex-grow: 1;
}

.flexzone
{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--flexgaphor);
    margin-bottom: 12.5px;
}

.flexhorizontal
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--flexgaphor);
}

.lastflex
{
margin-bottom:0;
}

.twozone > div
{
    width: 49.3%;
    object-fit: cover;
    border-radius: var(--imageradius);
}

.threezone > div
{
    width: 32.5%;
    object-fit: cover;
    border-radius: var(--imageradius);
}

.fourzone > div
{
    width: 24%;
    object-fit: cover;
    border-radius: var(--imageradius);
}

.portrait > div
{
    aspect-ratio: 3/4;
}
.square > div
{
    aspect-ratio: 1/1;
}
.landscape > div
{
    aspect-ratio: 4/3;
}

.portraitpic
{
    aspect-ratio: 3/4;
}
.squarepic
{
    aspect-ratio: 1/1;
}
.landscapepic
{
    aspect-ratio: 4/3;
}


.flexpic
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--imageradius);
}

.flexjustright
{
justify-content: flex-end;
}

.flexjustcenter
{
justify-content: center;
}

.caption
{
margin-top: 2px;
text-align: center;
font-weight: bold;
font-style: italic;
  color: var(--midtone);
}

.picfloatright
{
    border-radius: var(--imageradius);
    float: right;
}

.piccenter
{
    display: block;
    margin: auto;
}

.round
{
    border-radius: 5000000000px;
}


.pic150
{
    width: 150px;
}

.invertimage
{
    filter: invert(100%);
}


/* flex box for displaying buttons in a horizontal or vertical orientation */

.buttonicon
{
display: block;
height: 25px;
}



.inactiveicon
{
filter: grayscale(100%);
}

.horizontalbuttons
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 10px;
}


.horizontalbuttons > div
{
    flex-grow: 1;
    flex-basis: 0;
}

.horizontaliconbuttons
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 10px;
}

.headericonbuttons
{
    margin-right: 20px;
    padding-bottom: 5px;
}


.cart
{
    flex-grow: 1;
}

                /* extra narrow mobile formatting for button text */
                @media screen and (max-width: 320px){ /*was 388 */
                .cart
                {
                    flex-grow: 0;
                }
                .headericonbuttons
                {
                    margin-right: 0;
                    padding-bottom: 5px;
                }
                }


/*.tabs
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 2px;
}

.tabs > div
{
    flex-grow: 1;
    flex-basis: 0;
}

.tab
{
    margin: 0;
    border-top-left-radius: var(--imageradius);
    border-top-right-radius: var(--imageradius);
    height: 30px;
    width: 38px;
}

.tabcontents
{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* button text format */
/*    font-weight: normal;
    text-align: center;
}*/

.onebutton
{
    display: flex;
}

.onebutton > div
{
    flex-grow: 0;
}

/*.verticalbuttons
{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    width: 100%;
    margin-bottom: 16px;
}*/

.button
{
  /*button shape and size */
  border-radius: var(--buttonradius);
  /* flex settings for the flex behaviour of the button within its button box */
    margin: 0;
}


.textbutton
{
  flex-grow: 1;
  flex-basis: 0;
    min-height: 38px;
    min-width: 175px;
}

.iconbutton
{
flex-grow: 0;
height: 38px;
width: 38px;
}

.headerbuttonicon
{
height: 38px;
}

.filllink
{
    display:inline-block;
    width:100%;
    height:100%;
}

.buttonlink
{
    /* flex settings for the items within the button */
    display:inline-block;
    width:100%;
    height:100%;
    text-decoration-line: none;
}


/*.buttonlink > img
{
    height: 22px;
}*/

.buttoncontents
{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
/*    margin: 6px 18px 6px 18px;*/
    /* button text format */
/*    font-weight: normal;*/
    text-align: center;
}

.donatebuttonbox
{
    display: flex;
    justify-content: center;
}

/*.donatebuttonbox > div > div
{
    border-radius: 500px;
}*/

.donatebuttonbox > div > div > img
{
    border-radius: 45px;
    overflow: hidden;
    height: 45px;
    /*animation transition info*/
    transition-property: transform, box-shadow;
    transition-duration: 0.15s;
    box-shadow: 0 0 var(--midtone), 0 0 var(--aqua), 0 0 var(--mint), 0 0 var(--yellow), 0 0 var(--orange);
}


.donatebuttonbox > div > div > img:hover
{
  /*animation transition target state*/
  transform: translate(0, -15px);
  box-shadow: 0 2.5px var(--midtone), 0 5px var(--aqua), 0 7.5px var(--mint), 0 10px var(--yellow),  0 12.5px var(--orange);
}

.darkbg
{
  background: var(--darktone);
}

.midbg
{
  background: var(--midtone);
}

.lightbg
{
  background: var(--lighttone);
}

.mywhitebg
{
  background: var(--mywhite);
}

.whitebg
{
  background: white;
}

.tonguebg
{
  background: var(--mutttongue);
}

.ppbg
{
  background: var(--mywhite);
}

.nobg
{
    background: rgba(0,0,0,0);
}


.lightlabel
{
  color: var(--mywhite);
}

.darklabel
{
  color: var(--darktone);
}


.blacklabel
{
  color: black;
}

.maxilabel
{
  visibility: visible;
  width: auto;
  height: auto;
}
.minilabel
{
  visibility: hidden;
  width: 0;
  height: 0;
}

                /* extra narrow mobile formatting for button text */
                @media screen and (max-width: 500px){


                .horizontalbuttons > div
                {
                    flex-grow: 0;
                    flex-basis: auto;
                }

                .maxilabel
                {
                  visibility: hidden;
                  width: 0;
                  height: 0;
                }

                .minilabel
                {
                  visibility: visible;
                  width: auto;
                  height: auto;
                }

                .button
                {
                  min-width: 38px;
                }

                .buttoncontents
                {
                    gap: 0;
                }
                .tabcontents
                {
                    gap: 0;
                }
                }


.cartbutton
{
  flex-grow: 1;
  flex-basis: 0;
    min-height: 38px;
    min-width: 175px;
    border-radius: var(--buttonradius);
}

.cartmaxilabel
{
  visibility: visible;
  width: auto;
  height: auto;
}

/* see interactable area for the hover versions of the cart label actions */


/* lists */

ul{
  color: var(--darktone);
  font-size: 16px;
  list-style-type: circle;
}

ol{
  color: var(--darktone);
  font-size: 16px;
}

li{
    margin-top: 15px;
}

.smallprint {
  font-size: 10px;
  color: var(--lighttone);
  }

.fliphoriz
{
    transform: scale(-1, 1);
}

/* L I N K S */

/*how I want links on the rest of my page e.g. in regular text to look*/

a:link {
  color: var(--midtone);
}

.darktext:link{
  color: var(--darktone);
}




/* visited link */
a:visited {
  color: var(--mutttongue);
}

/* mouse over link */
a:hover {
  color: var(--darktone);
}

/* selected link */
a:active {
  color: var(--midtone);
}

/* header specific link colour behaviours */
h1 a:link {
  color: inherit;
}
h1 a:visited {
  color: inherit;
}
h1 a:hover {
  color: var(--darktone);
}

h2 a:link {
  color: inherit;
}
h2 a:visited {
  color: inherit;
}
h2 a:hover {
  color: var(--midtone);
}

h3 a:link {
  color: inherit;
}
h3 a:visited {
  color: inherit;
}
h3 a:hover {
  color: var(--lighttone);
}

h4 a:link {
  color: inherit;
}
h4 a:visited {
  color: inherit;
}
h4 a:hover {
  color: var(--midtone);
}

h5 a:link {
  color: inherit;
}
h5 a:visited {
  color: inherit;
}
h5 a:hover {
  color: var(--darktone);
}

h6 a:link {
  color: inherit;
}
h6 a:visited {
  color: inherit;
}
h6 a:hover {
  color: var(--midtone);
}


/* R E A C T I V E   C O N T E N T  -  things that move around when you hover, etc */

.hover-border{
  /*basic visuals i.e. colour, size, including for things that are only visible after the animation has happened*/
  background-color: var(--mywhite);
  display: inline-block;
  border-style: solid;
  border-color: var(--midtone);
  border-radius: 5px;
  padding: 4px;
  
  /*data about the animation*/
  transition-property: border, margin;
  transition-duration: 0.08s;
  
  /*defining the pre-animated state specifically i.e. no border, leaving a margin on the side (to leave space for the animation to move into)*/
  border-width: 0;
  margin: 10px 10px 10px 10px;
}

.hover-border:hover{
  /*defines the post-animated state that occurs on mouse hover*/
  border-width: 0 0 4px 4px;
  margin: 6px 6px 10px 10px;
}

/* apply class hovergetbig to anything I want to get a bit bigger when I hover over it */
.hovergetbig{
  /*animation transition info*/
  transition-property: transform;
  transition-duration: 0.15s;
}

.hovergetbig:hover{
  /*animation transition target state*/
  transform: scale(1.07, 1.07);
}


.hoverget12{
  /*animation transition info*/
  transition-property: transform;
  transition-duration: 0.15s;
}

.hoverget12:hover{
  /*animation transition target state*/
  transform: scale(1.12, 1.12);
}

.hoverborder{
  /*animation transition info*/
  outline: solid 0px var(--lighttone);
  transition-property: outline;
  transition-duration: 0.05s;
}

.hoverborder:hover{
  /*animation transition target state*/
  outline-width:2px;
}

.hoversolid{
    /*animation transition info*/
    opacity: 0.65;
    transition-property: opacity;
    transition-duration: 0.2s;
}

.hoversolid:hover{
    /*animation transition target state*/
    opacity: 1;
}



.maxihoverget12{
  /*animation transition info*/
  transition-property: transform;
  transition-duration: 0.15s;
}

.maxihoverget12:hover{
  /*animation transition target state*/
  transform: scale(1.12, 1.12);
}

.minihoverget12{
  /*animation transition info*/
  transition-property: none;
  transition-duration: 0s;
}

.minihoverget12:hover{
  /*animation transition target state*/
  transform: scale(1, 1);
}



                /* cart button shrinks when it gets close to the other buttons */
                @media screen and (max-width: 570px){
                .cartmaxilabel
                {
                    visibility: hidden;
                    display: none;
                    width: 0;
                    height: 0;
                    margin: 0;
                }

                .cartbutton
                {
                  min-width: 38px;
                }

                .cartbuttoncontents
                {
                    gap: 0;
                }


                .maxihoverget12{
                  /*animation transition info*/
                  transition-property: none;
                  transition-duration: 0s;
                }

                .maxihoverget12:hover{
                  /*animation transition target state*/
                  transform: scale(1, 1);
                }

                .minihoverget12{
                  /*animation transition info*/
                transition-property: transform;
                transition-duration: 0.15s;
                }

                .minihoverget12:hover{
                  /*animation transition target state*/
                  transform: scale(1.12, 1.12);
                }

                }

.hoverslideur{
  /*animation transition info*/
  transition-property: transform, box-shadow;
  transition-duration: 0.15s;
  box-shadow: 0 0 var(--midtone), 0 0 var(--aqua), 0 0 var(--mint), 0 0 var(--yellow), 0 0 var(--orange);
  }

.hoverslideur:hover{
  /*animation transition target state*/
  transform: translate(15px, -15px);
  box-shadow: -3px 3px var(--midtone), -6px 6px var(--aqua), -9px 9px var(--mint), -12px 12px var(--yellow),  -15px 15px var(--orange);
}

.hoverlift{  
  /*animation transition info*/
  transition-property: transform;
  transition-duration: 0.15s;
}

.hoverlift:hover{
  /*animation transition target state*/
  transform: scale(1.10, 1.10) translate(0, -5px);
}

/* moving content that hides/unhides */
.hidden
{
    visibility: hidden;
    display: none;
    width: 0;
    height: 0;
    margin: 0;
}

/* C U R S O R   B E H A V I O U R - defines changes to the default cursor on hover */

.goingoutside
{
cursor: alias;
}

.zoomable
{
cursor: zoom-in;
}


/* B A S I C   C L A S S E S  -  basic properties I can add or remove to a class to consistantly format something*/

.pconly{
  display: block;
}
.mobileonly{
  display: none;
}

.visible{
  display: block;
}

.invisible{
  display: none;
}

.right{
  text-align: right;
}

.center{
  text-align: center;
}

.nomargin{
  margin: 0;
}

/* V I D E O   P L A Y E R  -  how I want video players to get formatted*/

.videotrim{
  margin-bottom: 20px;
}

.videobuttons_above{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
}

.videobox{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.videobutton{
  background-color: var(--lighttone);
  padding: 10px;
  border-radius: 20px;
}


.symbols{
  font-size: 32px;
}

.videoiframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: none;
}

/* universal footer stuff */
#footer p {
  text-align: center;
  color: var(--midtone);
  margin: 0;
  margin-bottom: 10px;
}

.copyright{
  text-align: center;
  color: var(--midtone);
  font-size: 12px;
  margin-bottom: 15px;
}

/*                @media screen and (max-width: var(--mobilewidth)){
                    .button
                    {
                      /*button padding reduce */
/*                    }*/

/* C A R D S as used in the pattern and shop pages */

.cardbox
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: calc(var(--gridspacing)*-0.5);
    margin-right: calc(var(--gridspacing)*-0.5);
}

.patterncard
{
    border-radius: var(--cardradius);
    overflow: hidden;
    position: relative;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin-left: calc(var(--gridspacing)*0.5);
    margin-right: calc(var(--gridspacing)*0.5);
    margin-bottom: var(--gridspacing);
    width: calc(50% - var(--gridspacing));
}


.cardlink
{
flex-grow: 1;
display: flex;
flex-direction: column;
}

.cardpic
{
    width: 100%;
    height: 100%;
    object-fit: cover;
/*    border-top-left-radius:  var(--cardradius);
    border-top-right-radius:  var(--cardradius);*/
}

.cardtexts
{
padding-left: 20px;
padding-right: 20px;
/*min-height: 120px;*/
display: flex;
flex-direction: column;
align-content: flex-end;
flex-grow: 1;
}

.cardtitle
{
  margin-top: 12px;
/*  margin-left: 20px;
  margin-right: 20px;*/
  text-align: center;
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: bold;
  color: var(--midtone);

}

.cardsubtitle
{
font-size: 14px;
color: var(--lighttone);
margin: 0;

  margin-bottom: 8px;
  text-align: center;
  flex-grow: 1;
}

.priceinfo
{
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.cardprice
{
  margin: 0;
  width: 95px;
  flex-shrink: 3;
  flex-basis: content;
  font-size: 35px;
  text-align: right;
  color: var(--midtone);
}

                /* mobile formatting section */
                @media screen and (max-width: 681px){ /*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*/

                    .patterncard
                    {
                        width: 100%;
                    }

                }/* this is the end of the narrow screen version of the pattern cards*/