:root{
  /*defining my button dimensions so they I don't have to do mental maths every time I want to change something*/
  /* I N P U T S - I update these */
  --button_image_width: 250px;
  --button_image_height: 200px;
  --button_grid_width: 300px;
  --button_max_columns: 3;
  --button_border: 4px;
  --button_padding: 10px;
  /* O U T P U T S - the webpage needs these calculating to display the buttons as I have described above*/
  --button_actual_width: calc(var(--button_image_width) - 2* var(--button_padding));
  --button_actual_height: calc(var(--button_image_height) - 2* var(--button_padding));
  --button_actual_margin: calc((var(--button_grid_width) - var(--button_image_width) - 2* var( --button_border)) / 2);
  --button_grid_max: calc(var(--button_grid_width) * var(--button_max_columns));
}

/* how I want to format various kinds of text in my header, such as h1 /*, h2, p, and links*/

#myheader{/*this is the general header's div background box format*/
  background-size: 200px;
  background-position: 0 100%;
  width: 940px;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 15px;
}

#myheader h1 {
  text-align: center;
  font-size: 80px;
  margin-bottom: 30px;
}

/*#myheader h2 {
  color: var(--mywhite);
  text-align: center;
  font-size: 35px;
  margin: 0;
  margin-bottom: 30px;
  font-weight: normal;
}

#myheader p {
  text-align: center;
  font-size: 20px;
}

#headerlinks{
  display: flex;
  flex-direction: row;  
  justify-content: center;
  align-items: center;
}
*/
                
.mybody{
  width: 80%;
  max-width: var(--button_grid_max);
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*h2{
  font-size: 25px;
  color: var(--midtone);
  text-align: center;
}*/

.buttonbox{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--button_actual_margin);
}

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

.bigbutton{
  background-color: white;
  /*background-size: cover;*/
  background-position: center;
  background-repeat: no-repeat;
  margin: var(--button_actual_margin);
  border: var(--button_border) solid white;
  border-radius: 30px;
  padding: var(--button_padding);
  width: var(--button_actual_width);
  height: var(--button_actual_height);
  display: flex;
  align-items: center;
  justify-content: center;
}

#knit{
  background-image: url('button images/bigbutton_knit.png');
}

#crochet{
  background-image: url('button images/bigbutton_octopus.png');
}

#tutorials{
  background-image: url('button images/bigbutton_tutorials.png');
}

#freeicons{
  background-image: url('button images/bigbutton_icons.png');
}

#threed{
  background-image: url('button images/bigbutton_pigeon.gif');
}

#freepatterns{
  background-image: url('button images/bigbutton_crafts.png');
}

#rats{
  background-image: url('button images/bigbutton_rats.png');
}

/* my four position options for the text on the buttons, so I just add this class to each button instead of adding these lines separately every time I make a new #button id*/
.bigbutton.tl{ /*top left text*/
  align-items: flex-start;
  justify-content: left;
}

.bigbutton.tr{ /*top right text*/
  align-items: flex-start;
  justify-content: right;
}

.bigbutton.bl{ /*bottom left text*/
  align-items: flex-end;
  justify-content: left;
}

.bigbutton.br{ /*bottom right text*/
  align-items: flex-end;
  justify-content: right;
}
  
.bigbuttontext{
    color: var(--mywhite);
    background-color: var(--darktone);
    font-weight: bold;
    font-size: 20px;
    border-radius: 18px;
    padding: 7px 12px 8px 12px; /* top right bottom left */
    margin: 0;
}

.notfound{
  background-color: var(--mywhite);
  margin: 20px;
  margin-top: 40px;
  padding: 30px 40px 30px 40px;
  width: fit-content;
  max-width: 800px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*#gohome a:link{
  text-decoration: none;
}

#gohome a:visited{
  color: var(--mywhite);
}

#gohome a:hover{
  color: var(--lighttone);
}
*/
.footer{
  margin-top: 15px;
}


/* My big header has a minimum width of 940px, suitable for half a 1080p screen, so if the screen is zoomed, or extra narrow, we need to display it a little differently */
/*                @media screen and (max-width: 960px){ /*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*/
                  
/*                  #myheader{/*this is the general header's div background box format*/
/*                  background-size: 21.2%;   /*was 200px*/
/*                  width: 100%;
/*                  padding-top: 4%;          /*was 40px*/
/*                  padding-bottom: 1%;       /*was 40px*/
/*                }
/*
                  #myheader h1 {
                  font-size: 8.3vw;         /*was 80px*/
/*                  margin-bottom: 3%;        /*was 30px*/
/*                }
                
                #myheader h2 {
                  font-size: 3.6vw;         /*was 35px*/
/*                  margin-bottom: 1.5%;        /*was 30px*/
/*                }
                
/*                #myheader p {
                  font-size: 2vw;           /*was 20px*/
/*                }
                

                
                }/* this is the end of the narrow screen version of the header*/
                
                @media screen and (max-width: 955px){ /*another extra narrow version, for actual mobile screens, the text needs to be bigger and the crafty smaller for readability*/
                  
                  #myheader{/*this is the general header's div background box format*/
                    background-size: 17vw;       /*was 200px*/
                    width: 100%;
                    padding-top: 3%;              /*was 40px*/
/*                    padding-bottom: 1%;           /*was 40px*/
                  }                
                
                  #myheader h1 {
                    font-size: 14vw;             /*was 80px*/
                    margin-bottom: 10vw;           /*was 30px*/
                  }
                
/*                  #myheader h2 {
/*                    font-size: 5vw;             /*was 35px*/
/*                    margin-bottom: 1.5%;          /*was 30px*/
/*                  }
                  
/*                  #myheader p {
                    font-size: 3vw;             /*was 20px*/
/*                  }
                  
                  #gohome{
                    font-size: 3vw;  
                  }
                  
                  h2{
                    font-size: 4.5vw;
                  }
                  

                  
                  }/* this is the end of the narrow screen version of the header*/