/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

: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)      */
  
  --muttcream: #f2ceae;      /*   var(--muttcream)    */
  --muttbrown: #9f7c5c;      /*   var(--muttbrown)    */
  --muttblush: #ff8c5c;      /*   var(--muttblush)    */
  
  --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) */

  --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');
}

#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 */

#headerlinks{
  font-weight: bold;
  margin: 0;
  padding: 0;
  color: var(--lighttone);
}

/* basic link */
#headerlinks a:link {
  color: var(--mywhite);
  text-decoration: none;
  padding: 4px 8px 6px 8px; /* top right bottom left */
  margin-left: 4px;
  margin-right: 4px;
}

/* visited link */
#headerlinks a:visited {
  /*color: var(--lighttone);*/
  color: var(--mywhite);
}

/* mouse over link */
#headerlinks a:hover {
  background-color: var(--darktone);
  border-radius: 16px;
  color: var(--mywhite);
}    


/* 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;
}

/* 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: 25px;
  color: var(--lighttone);
  margin-top: 28px;
  margin-bottom:16px;
  font-weight: bold;
  font-style: normal;
}

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

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

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

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

.nolinelink
{
text-decoration: none;
}

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

.linkback{
  text-align: left;
}

/*  LIST FORMATTING */

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

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

/* Image Styling */

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

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

.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;
}

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

.buttonicon
{
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;
}

.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;
}

.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;
}



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

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

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

.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: 250px){

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

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

                .button
                {
                  min-width: 38px;
                }

                .buttoncontents
                {
                    gap: 0;
                }
                }

/* F O N T S */

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

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

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

li{
    margin-top: 15px;
}

/* 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(--darktone);
}

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

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

/* selected link */
a:active {
  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);
}

.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.2s;
}

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

/* 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: 15px;
}

/* 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 */
                    }
*/