/*Overall container element*/
.top-right-nav {
  color: salmon;
  right: 0px;
  top: 0px;
  height:295px;
  width: 237px;
  position: fixed;
  z-index: 1;
  padding: 25 px;
  background-image: url("../img/chalkboard.jpg");
  font-family: 'Fredericka the Great';
  padding: 28px;
}

.top-right-nav h2 {
  font-size: 20px;

}

.top-left-nav li a {
  text-decoration: underline;
  color: salmon;
}

.phone {
  text-align: center;
  font-size: 25px;
  margin-bottom: -5px;
}

.top-right-nav p {
  font-size: 12 px;
}

.top-left-nav h2 {
  font-size: 25px;

}

.top-left-nav ul {
  margin-left: 10px;
}

.top-left-nav li {
  margin: 5px;

}

.coming-soon{
  text-decoration: underline;
}

.top-left-nav {
  color: salmon;
  left: 0px;
  top: 0px;
  height:295px;
  width: 255px;
  position: fixed;
  z-index: 1;
  padding: 25px;
  background-image: url("../img/chalkboard.jpg");
  font-family: 'Fredericka the Great'
}


body {
  background-image:url("../img/salmonbg.jpg");
  height:50%
  width: 50%;
  position: relative;
}

.wrap {
  z-index: 2;
  position: relative;
  margin: auto;
  width: 950px;
  justify-content: center;
  /*background-image: url("../img/chinook.jpg");*/
  /*background-color: black;*/
  opacity: 1;
}

header {
  background-color: #FFB5AA;
  justify-content: center;
  border: salmon 15px ridge

}

.titlefish {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.titlefish h1 {
  font-family: 'Kaushan Script', cursive;
  font-size: 40px;
  margin-top: -1px;
  color: #E8265B;
  margin: 10px;
}

.logofish {
  border-radius: 100%;
  height:75px;
  width: 75px;

}

.logo-image {
  text-align: center;

}

.salmon-logo{
  height: 50%;
  width: 50%;
  text-align: center;
  border-radius: 70%;
}

.logo-text {
  font-family: 'Kaushan Script', cursive;
  font-size: 20px;
  color: #E8265B;
  text-align: center;

}

.top-nav{
  width: 40%;
  margin-left: 30%;
  border-radius: 25%;
  background-color: salmon;

}

.top-nav ul{
  border-radius: 15%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-width: thick;
  border-color: #E8265B;
  border-style: solid;
  margin-bottom: 10px;

}

.top-nav ul li {
  padding: 4px;
  font-weight: bold;
  text-decoration: none;
  color: black;
}

.social-media-list {
  float: right;
  display: flex;
  flex-direction: row;
  margin-left: -30px;
  margin-top: 27px;
  margin-right: 30px;
}

.social-media-list li {
  padding: 1px;
}

.content-block {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: #FFB5AA;
  border: salmon 15px ridge;
}

.content-head {
  font-family: 'Chewy', cursive;
  font-size: 20px;
  text-align: center;
  width: 100%;
  color: maroon;
  /*background-color: #9348FF;*/
}
.content-head h1 {
  background-color: salmon;

}

.cookie-sale {
  float: left;
  width: 50%;
  justify-content: center;
  color: red;
  font-weight: bold;
  text-align: center;
  border-right: salmon solid 2.5px;
  font-family: impact;
  font-size: 25px;
}

.cookie-sale p {
  color: black;
  font-style: italic;
  font-size: 20px;
}

.cookie-pic {
  height: 250px;
  width: 300px;
}

.shirt-pic {
  height: 250px;
  width: 250px;
}

.shirt-sale {
  width: 50%;
  float: right;
  width: 50%;
  float: right;
  text-align: center;
  border-left: salmon solid 2.5px;
}

.shirt-sale p {
  color: black;
  font-style: italic;
  font-size: 20px;
}

.cookie-sale-pic{
  align-self: center;
}

.shirt-sale {
  color: red;
  font-weight: bold;
  font-family: impact;
  font-size: 25px;
}

li img {
  height: 20px;
  width: 20px;
}

.faq-picture {
  position: relative;
}

.about-content {
  position: relative;
  width: 40%
  margin-left: -10px;
}

.about-picture {
  width: 60%;
}

.about-picture img {
  margin-top: 30px;
  height: 300px;
  width: 480px;
  /*margin-right: -100px;
  margin-left: -50px;*/
}

.established {
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-50deg);
}

h1 span {
  font: 26px 'Anonymous Pro', MonoSpace;
  height: 200px;
  position: absolute;
  margin-left: 230px;
  margin-top: 100px;
  width: 20px;
  color: #darkgrey;
  transform-origin: bottom center;
}

.char1 {
  transform: rotate(6deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

.char13 {
  transform: rotate(78deg);
}

.char14 {
  transform: rotate(84deg);
}

.char15 {
  transform: rotate(90deg);
}

.char16 {
  transform: rotate(96deg);
}

.char17 {
  transform: rotate(102deg);
}

.char18 {
  transform: rotate(108deg);
}

.char19 {
  transform: rotate(114deg);
}

.char20 {
  transform: rotate(120deg);
}

.char21 {
  transform: rotate(126deg);
}

.char22 {
  transform: rotate(132deg);
}

.char23 {
  transform: rotate(138deg);
}

.char24 {
  transform: rotate(144deg);
}

footer {
  background-color: #FFB5AA;
  font-size: 12px;
  border: salmon 3px ridge;
  float: right;
  width: 100%;
  height: 35px;
}