/*main content with grid background*/
.main {
  width: 100%;
  height: 100%;
  margin-top: 50px;
  border-radius: 5px;
  background-image: url('/img/shrines/splatoon/better/grid-pattern-bg.jpg');
  background-size: cover;
  text-align: center;
}

/*tape on top left of main*/
.main-tape {
  width: 400px;
  height: 36px;
  padding: 12px 0;
  transform: rotate(-7deg);
  top: 0px;
  left: -30px;
  position: relative;
  font-size: 2.2em;
  font-weight: bold;
}

.idols {
  background-image: url('/img/shrines/splatoon/better/characters/Ribbon-Pink.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.agents {
  background-image: url('/img/shrines/splatoon/better/characters/Ribbon-Yellow.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.other {
  background-image: url('/img/shrines/splatoon/better/characters/Ribbon-Blue.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/*aligns things in the main*/
#main-align {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

/*paper behind polaroids*/
.paper {
  min-width: 500px;
  margin: 20px auto;
  padding: 10px;
  border-radius: 10px;
  display: grid;
}

.SS {
  background-color: #E373FF;
}

.OtH {
  background-color: #99FFCA;
}

.DC {
  background-color: #FFA3C5;
}

.One {
  background-color: #4F54E1;
}

.Two {
  background-color: #8B60E1;
}

.Three {
  background-color: #D9CE54;
}

.Cap {
  background-color: #687EDE;
}

.DJ {
  background-color: #9B54DE;
}

/*aligns tape on paper*/
#tape-align {
  width: 100%;
  height: 25px;
}

.tape {
  width: 150px;
  height: 40px;
  margin: 0 auto;
  position: relative;
  top: -30px;
  left: 0;
}

/*aligns polaroids on paper*/
#polaroid-align {
  width: 100%;
  height: 100%;
  display: flex;
}

.polaroid {
  max-width: 250px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  transition: transform calc(1 * .3s) cubic-bezier(0.21,0.12,0.35,1.43);
}

.polaroid:hover {
  transform: rotate(8deg) scale(1.02);
  background-color: transparent;
}


/*stylized text boxes*/
#text-body {
  width: 50%;
  margin: auto;
  display: block;
}

#decor-body {
  height: 50px;
  display: flex;
}

.decor-fill {
  width: 50%;
  background-color: #1a1a1a;
}

.l{
  border-radius: 30px 0 0 0;
}

.r{
  border-radius: 0 30px 0 0;
}

#decor-img {
  width: 150px;
  margin: 0 auto;
}

.text {
  padding: 10px 20px;
  border-top: 4px dashed #808080;
  border-radius: 0 0 30px 30px;
  background-color: #1a1a1a;
  color: white;
  position: relative;
}

/*gallery box horizontal images*/
#gallery-body-horizontal {
  width: 80%;
  margin: 20px auto;
  padding: 10px;
  display: grid;
  border-radius: 10px;
  background-color: #1a1a1a;
}

#gallery-align-horizontal {
  display: inline-flex;
  background-color: transparent;
}

/*gallery box vertical images*/
#gallery-body-vertical {
  width: 80%;
  margin: 20px auto;
  padding: 10px;
  display: flex;
  border-radius: 10px;
  background-color: #1a1a1a;
}

#gallery-align-vertical {
  display: grid;
  background-color: transparent;
}


/*aligns polaroids on paper*/
.gallery-square {
  width: 40%;
  margin: auto 10px;
  padding: 10px 10px 2px 10px;
  border-radius: 10px;
  background-color: green;
}

/*aligns polaroids on paper*/
.gallery-rectangle {
  margin: 10px;
  padding: 10px 10px 2px 10px;
  border-radius: 10px;
  background-color: green;
}

.vertical {
  width: 50%;
  margin: auto 25%;
  padding: 10px 10px 0 10px;
}

.cube {
  margin: 10px auto;
}

.tall {
  margin: auto 10px; 
}

.auto {
  margin: auto; 
}


/*make individual ones for the idols but be careful*/
.Callie {
  background-color: pink;
}

.Marie {
  background-color: green;
}

.Pearl {
  background-color: pink;
}

.Marina {
  background-color: teal;
}

.Shiver {
  background-color: blue;
}

.Frye {
  background-color: yellow;
}

.Big-Man {
  background-color: red;
}

.Captain {
  background-color: orange;
}

.Agent4 {
  background-color: yellow;
}

.Agent8 {
  background-color: pink;
}

.Agent3 {
  background-color: yellow;
}

.Cuttlefish {
  background-color: orange;
}

.Octavio {
  background-color: pink;
}