body {
border:0;
margin:0;
overflow-x: hidden;
background-color: #dbe7ca;
}
body p{
  font-family: "Comfortaa";
  font-size: 0.5rem;
}
.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.comfortaa uniquifier> {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;

}
#myButton {
  display: none; /* Initially hidden */}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid ;
  background-color: #9EB06A;
  position: fixed;
  margin-top: 3rem;
  bottom: 0;
  left:0;
  width: 100%;
  z-index: 200;
}

/* Style the buttons inside the tab */
.tab button {
  font-family: "Comfortaa";
  font-size: 1rem;
  font-weight: 700;
  background-color: inherit;
  width:33.3%;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  height: 4rem;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #9EB06A;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #546328;
  color: #ffffff;
  align-content:left;
}
h1{
  text-align:center;
  font-family: "Pacifico";
  color: black;
  font-weight: 90;
}
h2{
  text-align:center;
  font-family: "Pacifico";
  font-weight: 90;
  color: black;
}
#Homepage p{
  text-align:center;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  text-align: center;
  margin-bottom: 5rem;
}
.grid{
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
}
.desc-tut{
  display: block;
  margin: auto;
  text-align: left;
  width: 90%;
  align-content: center;
  grid-column: 1/ span 5;
}
.desc-pat{
  display: block;
  margin: auto;
  text-align: left;
  width: 90%;
  align-content: center;
  grid-column: 1/ span 5;
}
.imgH{
   width:90%;
  display: block;
  margin:auto;
  align-content: center;
  border-radius: 2rem;
  overflow: hidden;
}
.buttonList {
  align-content: left;
  grid-column: 1;
  grid-row: 2;
}
.buttonList button.active {
  background-color: #546328;
  color: #fff;
  align-content: left;
}
.buttonContent {
  display: none;
  margin: 0;
  margin-right: 2rem;
  grid-column: 2/ span 4;
  grid-row: 2;
  margin-bottom: 5rem;
}
.buttonContent p{
  line-height: 1.5rem;
  margin-top: 1rem;
  text-align: left;
}
.buttonList button{
  font-family: "Comfortaa";
  font-size: 0.5rem;
  font-weight: 700;
  display:block;
  border-radius: 1rem;
  padding: 1rem;
  background-color: #9EB06A;
  align-content: center;
  width: 70%;
  margin-top: 1rem;
  border:none;
}
.patternList{
  align-content: left;
  grid-column: 1;
  grid-row: 2;
  
}
.patternlist button{
  font-family: "Comfortaa";
  font-size: 0.5rem;
  font-weight: 700;
  display: block;
  color: black;
  border-radius: 1rem;
  background-color: #9EB06A;
  margin: auto;
  align-content: center;
  text-align: left;
  width: 80%;
  margin-bottom: 1rem;
  border: none;
  height: 5rem;
  padding: 1rem;
  margin-top: 1rem;
}
.patternContent{
  display: none;
  margin: 0;
  margin-right: 1rem;
  grid-column: 2/ span 4;
  grid-row: 2;
  margin-bottom: 5rem;
}
.patternContent p {
  line-height: 1.5rem;
  margin-top: 1rem;
  text-align: left;
}
.patternlinks{
  border-radius: 1rem;
  background-color: #dbe7ca;
  margin:auto;
  align-content: center;
  text-align: left;
  width: 80%;
  margin-bottom: 1rem;
  border:none;
  height: 5rem;
  padding: 1rem;
  margin-top: 1rem;
}
.patternlist button.active {
  background-color: #546328;
  color: #fff;
  display:block;
  border-radius: 1rem;
  margin:0 auto;
  align-content: center;
  text-align: left;
  width: 80%;
  margin-bottom: 1rem;
  border:none;
  height: 5rem;
  padding: 1rem;
  margin-top: 1rem;
  
}
#SingleST img{
  width: 45%;
  border-radius: 0.5rem;
}
#DoubleST img{
  width: 45%;
  border-radius: 0.5rem;
}
#SlipKnot img{
  width: 45%;
  border-radius: 0.5rem;
}
#MagicC img{
  width: 45%;
  border-radius: 0.5rem;
}
.patternContent ul{
  align-content: center;
  text-align-last: left;
}
.G-inst{
  text-align:left;
  margin-left: 1.5rem;
}
.Ball-inst{
  text-align:left;
  margin-left: 1.5rem; 
}
.Bean-inst{
  text-align:left;
  margin-left: 1.5rem;
}
.shawl-inst{
  text-align:left;
  margin-left: 1.5rem;
}
.patternContent img{
  width: 60%;
  border-radius: 0.5rem;
  overflow:hidden;
}
.completed {
  font-family: "Comfortaa";
  font-size: 0.5rem;
  font-weight: 700;
  display:block;
  color: #fff;
  border-radius: 1rem;
  background-color: #546328;
  text-align: center;
  width: 80%;
  border:none;
  padding: 1rem;
  margin-left: 1.3rem;
  margin-top: 1rem;
}
.completed:hover {
  background-color: #546328;
}
.completed-tutorial {
  color: #ffffff;
  border:  5px solid #345600;
  border-radius: 1.5rem;
}