/* 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." */

body {
  background-image: url(https://files.catbox.moe/76jv2u.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: comic sans MS;
}

nav {
  text-align: center;
  color: #781803;
}

h1 {
  color: #e4ef65;
  font-family: Georgia, 'Times New Roman', Times, serif;
  -webkit-text-stroke:2px #781803;
  font-size:40px;
  margin: 10px 0;
}

h2 {
  color: #e4ef65;
  margin: 5px 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

p, ul {
  font-size: 14px;
  color: #e4ef65;
  margin: 10px 0;
}

strong {
  font-size: 14px;
  color: #e4ef65;
}

hr {
  color: #e4ef65;
  width: 100%;
  margin: 10px auto 20px;
}
      
a {
  color: #e4ef65;
}
      
a:hover {
  color: #E85FAB;
}

.main-container {
  max-width: 700px;
  background-color: #99244f;
  margin: 0 auto;
}

.shrimpoe-head {
  width: 500px;
  height: auto;
  margin: 0 auto;
}

.padding {
  padding: 10px 60px 30px;
}

.divflex {
  display:flex;
}

.divflex > .divtwo {
  width:49%;
  height:auto;
  flex-direction:row;
}

.divflex > .divthree {
  width:33.3%;
  height:auto;
  flex-direction:row;
}

.home {
  overflow:visible;
  width: 100%;
}
 
.home img {
  transition: all 0.5s;
  box-sizing: border-box;
  max-width: 100%;
}
 
.home:hover img {
  transform: scale(1.1);
  filter: blur(0);
}

div.gallery {
  padding: 0;
}

div.gallery:hover {
  border: 1px solid #e85fab;
}

div.gallery img {
  width: 100%;
  height: auto;
}

* {
  box-sizing:border-box;
}

.responsive {
  padding: 6px 6px;
  float: left;
  width: 19.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.homecenter {
  width:fit-content;
  margin: 0 auto;
}

/* index */

.about-flex {
  display: flex;
  margin:0 auto;
}

.about-flex > .abouttxt {
  padding: 10px;
  margin: auto;
}

.about-flex > .aboutimg {
  padding: 10px;
  margin: auto 0;
}

.updatescroll {
  width:auto;
  height:100px;
  line-height:1.5em;
  overflow:scroll;
  padding:0 20px;
  background-color: #551029;
}

.updateheader {
  margin: 0 auto;
  max-width:fit-content;
  padding: 5px 0 0;
}

.link-flex {
  display: flex;
  width: fit-content;
  margin: auto;
  padding: 0 0 20px;
}

.link-flex > div {
  padding: 0 15px;
}

.link1 {
  overflow: visible;
  margin: auto;
  min-width: 93px;
  max-width: 93px;
  width: 100%;
}
 
.link1 img {
  transition: all 0s;
  box-sizing: border-box;
  max-width: 100%;
}
 
.link1:hover img {
  transform: scale(1.2) rotate(-10deg);
}

.link2 {
  overflow: visible;
  margin: auto;
  min-width: 93px;
  max-width: 93px;
  width: 100%;
}
 
.link2 img {
  transition: all 0s;
  box-sizing: border-box;
  max-width: 100%;
}
 
.link2:hover img {
  transform: scale(1.2) rotate(10deg);
}

.gallery-flex {
  display: flex;
  padding: 10px 0;
}

.gallery-flex > .gallery-slideshow {
  width: 40%;
}

.gallery-flex > .gallery-info {
  width: 59%;
  padding: 0;
  margin: auto auto;
  text-align: left;
}

.gallerytitle {
  max-width: fit-content;
  margin: 0 0 0 auto;
}

.arrow {
  overflow: visible;
  width: 100%;
}
 
.arrow img {
  transition: all 0s;
  box-sizing: border-box;
  max-width: 100%;
}
 
.arrow:hover img {
  transform: scale(1.1);
}

.commad-div {
  width: 100%;
  height: auto;
  margin: 20px auto 0;
}

/* FOOTER */

.footerdiv {
  max-width: 700px;
  background-color: #551029;
  margin: 0 auto;
}

.footercenter {
  margin:auto;
  width: fit-content;
  padding: 15px 0 0;
}

.footertext {
  text-align: center;
  padding: 0 0 10px;
}

/* GALLERY */

.gallerycwdiv {
  width:75%;
  height:auto;
  text-align:center;
  background-color: #adb177;
  margin:0 auto;
  padding:0 0 5px 0;
}

.cwicon {
  width:25px;
  height:25px;
  margin:auto auto;
}

.galleryscroll {
  width:auto;
  height:220px;
  line-height:1.2em;
  overflow:scroll;
  background-color: #adb177;
  margin: 10px 0;
}

/* COMMISSION */

.commtext {
  margin: 0 20px;
}

.queueflex {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}

.queueflex > .queuediv {
  width: 23%;
  height:auto;
  background-color:#adb177;
  margin: 0 auto;
  text-align: center;
}

.willwontflex {
  display: flex;
  flex-direction: row;
}

.willwontflex > .willwontdiv {
  width: 45%;
  background-color: #adb177;
  padding:15px 0 5px;
  margin:0 auto;
}

.commhistoryscroll {
  width:auto;
  height:200px;
  line-height:1.2em;
  overflow:scroll;
  background-color: #adb177;
  margin: 10px 0;
}

/* PROJECTS */

.projectflex {
  display: flex;
  flex-direction: row;
}

.projectflex > .projectimg {
  width: fit-content;
  margin:auto 0;
}

.projectflex > .projecttxt {
  width: 59%;
  padding: 0 10px 0 0;
  margin: auto 0;
}

.divgreen {
  background-color:#adb177;
}

.cardimg {
  width: 180px;
  height: auto;
  margin: 0 auto;
  padding: 10px 0;
}

.projectscroll {
  width:auto;
  height:400px;
  line-height:1.2em;
  overflow:scroll;
  border: solid 1px #781803;
}

.blogscroll {
  width:auto;
  height:200px;
  line-height:1.2em;
  overflow:scroll;
  background-color: #adb177;
  padding:0 20px;
}

/* ABOUT */

.about-flex2 {
  display: flex;
}

.about-flex2 > .abtfleximg {
  padding: 0 10px;
  width: fit-content;
  margin: auto 0;
}

.about-flex2 > .abtflextxt {
  padding: 0 15px;
  width: 58%;
  margin: auto 0;
  text-align: left;
}

.faqscroll {
  width:100%;
  height:220px;
  line-height:1.2em;
  overflow:scroll;
  padding: 5px 10px;
  border: solid 1px #781803;
  margin: 0 auto;
  background-color: #adb177;
  position:relative;
}

.furshrimp {
  position:absolute;
  width:120px;
  height:auto;
  top:31em;
  left:24em;
  transform: rotate(10deg);
}

.fur {
  overflow: visible;
  margin: 0 0 0 auto;
  width: 100%;
}
 
.fur img {
  transition: all 0.0s;
  box-sizing: border-box;
  max-width: 100%;
}
 
.fur:hover img {
  transform: scale(1.0) rotate(-15deg);
}

.aboutartflex {
  display: flex;
}

.aboutartflex > img {
  width:32%;
  height:auto;
  margin:0 auto;
}