/*body*/
/*font*/
body {
  font-family: "Delius", monospace;
  font-style: normal;
  margin: 2%; 
  padding: 2%;
}

/*general styling*/
b.highlight{
    background-color:rgb(53, 26, 114);
    border-radius: 10px; 
    color: white; 
    padding: 2px; 
}

h1 {
    background-color:rgb(171, 142, 238); 
    border-radius: 10px; 
    margin: 10px; 
    padding: 10px; 
    border: 2px solid rgb(123, 80, 222);
    text-align: center; 

}

h2{ 
    color:rgb(53, 26, 114); 
    font-style: italic; 
}

h3 {
    color: rgb(229, 145, 159); 
}
p {
    max-width: 1000px; 
    min-width: 400px;
}



/*header*/

/*title images*/
img.titleImage{
    display: block; 
    margin: left;  
    max-width: 1000px; 
    min-width: 400px; 
    max-height: 700px; 
    border-radius: 10px; 
}

figcaption+img.titleImage{
    text-align: center;
}
/*nav*/

/*main nav*/
nav.navigation{
    min-width: 300px; 
    text-align: center;
    margin: auto; 
}
li.navigation{
    display: inline; 
    margin-right: 10px; 
}

li.navigation>a{
    text-decoration: none; 
    font-size: 20px; 
    text-align: center; 
    color: rgb(73, 72, 72); 
    border:5px, solid, rgb(73, 72, 72); 

}

li.navigation>a:hover{
    color:rgb(88, 50, 177); 
}

/*table of contents*/
nav.tableContent ul{
    list-style-type: none;

}

/*end of nav formatting*/

/*main related formatting*/

/*gallery/inspo formatting */

div.gallery {
    float: left; 
    width: 25%; 
    min-width: 200px; 
    margin: 0.1%;
    padding: 0.05%; 
}

div.gallery img{ 
    width: 100%; 
    height: 100%;
    border-radius: 10px; 
    display: block; 
    margin: auto; 
}

section#inspo{
    overflow: hidden;
}

/* end of gallery formatting */

/* gallery of patterns formatting */

div.card {
    float: left; 
    width: 25%; 
    min-width: 300px;
    background-color:rgb(188, 170, 231); 
    border: 3px solid rgb(101, 59, 198);
    border-radius: 10px; 
    margin: 1.5%; 
    padding: 1%; 

}
/* descendant selector for div with class card*/
div.card iframe{
    width: 95%; 
    display: block; 
    margin: auto; 
    border-radius: 10px; 
}

section#beginnerPatterns{
    overflow: hidden;
}


/* end of gallery patterns formatting */

/*form styling*/
fieldset{
    background-color:rgb(245, 229, 240); 
    border-radius: 10px; 
    margin: 10px; 
    padding: 10px; 
}

legend{
    background-color: rgb(254, 254, 244); 
    box-shadow: 3px 3px rgb(184, 184, 184);
    border-radius: 10px;
    margin: 10px; 
    padding: 10px;   

}



/*end of form styling*/

/* embeds styling */
iframe {
    width: 400px; 
    height: 200px; 
    border-radius: 10px;
}

/* maps */
iframe.maps {
    width: 600px; 
    height: 450px; 
    border-radius: 10px; 
    box-shadow: 5px 5px rgb(53, 26, 114); 
}
/*end of map formatting*/



/* table formatting */
table {
    width: 600px; 
    border: 2px solid black;
    background-color:rgb(232, 229, 238); 

}

th, td{
    padding: 5px 7px; 
    text-align: center; 
}

th{
    border-top: 2px solid gray; 
    border-bottom: 2px solid black; 
}

td{
    border-bottom: 1px solid gray;
    border-right: 1px solid rgb(207, 207, 207);
}

tr:hover{
    background-color:rgb(199, 188, 225)
}
/*end of table formatting*/



/*footer*/
/*selects href attribute with "top" in it*/
footer {
    background-color: rgb(215, 203, 245); 
    color: rgb(53, 26, 114);
    border-radius: 10px; 
    box-shadow: 5px 5px rgb(128, 93, 209); 
    padding: 10px;


}
a[href$="top"]{
    text-decoration: none; 
    background-color:rgb(88, 50, 177); 
    border: 5px solid rgb(88, 50, 177); 
    border-radius: 10px; 
    padding: 10px; 
    color:aliceblue; 
    text-align: center; 
}
/*end of footer formatting*/