html {
  height:100%;
}

body {
  background-color: #f3f3f3;
  color: #1e1e1e;
  font-family: "Gelasio", serif;
  font-weight:400;
  width:100%;
  margin:0;
  padding:0;
  min-height:100%;
  position:relative;
  padding-bottom:12rem;
}

b {
font-weight:700;
}

a {
  text-decoration: none;
  color:#54748f;
}

h1 {
  font-size:3em;
  text-transform:uppercase;
  font-family: "Playfair Display", serif;
  line-height:1;
  color:#6191BD;
}

h1::after {
  content: "";
  width: 33%;
  border-bottom: 5px solid #5D9CD7;
  display: block;
  margin-top: 1rem;
  margin-left:auto;
  margin-right:auto;
}

h3 {
  text-transform:uppercase;
  font-weight:500;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.1em;
  line-height:1;
}

.wrapper {
  width: 75%;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  margin:5em auto;
}

.fiftyfifty {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:row;
  margin-top:3em;
  margin-bottom:3em;
}

/*front gallery and info*/

.redoni {
  width:50%;
  display: flex;
  flex-direction:column;
  padding:2.5em;
  text-align:justify;
}

.redoni h1 {
  font-size:5em;
  text-transform:uppercase;
  font-family: "Playfair Display", serif;
  margin-top:0;
  color:#f3f3f3;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #5D9CD7;
}

.redoni h1:after {
  content: "";
  width: 33%;
  border-bottom: 5px solid #5D9CD7;
  display: block;
  margin-top: 1rem;
  margin-left:7rem;
}

.redoni .clickhere {
  width:66%;
  background-color:#5D9CD7;
  padding:0.75em 1.5em;
  text-transform:uppercase;
  font-weight:700;
  text-align:center;
  color:#f3f3f3;
  margin-top:1em;
  font-family: "Playfair Display", serif;
  transition:0.5s;
  letter-spacing: 0.1em;
  box-shadow: #bbd1f3 10px 10px;
  -webkit-box-shadow:#bbd1f3 10px 10px;
  -moz-box-shadow:#bbd1f3 10px 10px;
}

.redoni .clickhere:hover {
  letter-spacing: 0.25em;
  transition:0.5s;
}

.blueoni {
  width:50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:row;
  padding:1em;

}

.blueoni .mainpic {
  width:50%;
  height:fit-content;
}

.blueoni .mainpic img {
  max-width: 100%;
  height: auto;
  transition:0.5s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.blueoni .mainpic img:hover {
  transform: scale(1.2);
  transition:0.5s;
}

.blueoni .sidepics {
  display:flex;
  flex-direction:column;
  width:50%;
}

.blueoni .frontrow {
  width:90%;
  display:flex;
  flex-direction:row;
  padding:0 0.5em;
}

.blueoni .frontrow img {
  max-width: 100%;
  height: auto;
  transition:0.5s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.blueoni .frontrow img:hover {
  transform: scale(1.2);
  transition:0.5s;
}

.blueoni .frontpic {
  padding:0 0.25em;
}

.blueoni .backrow {
  width:88%;
  display:flex;
  flex-direction:row;
  padding:0.33em 0.75em;
}

.blueoni .backrow img {
  max-width: 100%;
  height: auto;
  transition:0.5s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.blueoni .backrow img:hover {
  transform: scale(1.2);
  transition:0.5s;
}

.cardstack {
  padding: 0 4px;
  flex-direction:row;
  display:flex;
  align-items: center;
  justify-content: center;
  margin-top: 2em;
}

.card {
  width:20%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  margin:1.5em;
  display: block;
}

.card img {
  display: block;
}

.carddesc {
  padding:1em;
  background-color:#f3f3f3;
}

.carddesc b {
  font-family: "Poppins", sans-serif;
  font-weight:500;
  text-transform:uppercase;
  font-size:0.75rem;
  color:#5D9CD7;
}

/*about*/

.quote {
  width:100%;
  position:relative;
}

.quoted {
  font-style:italic;
  font-size:2rem;
  color:#1e1e1e;
  font-family: "Playfair Display", serif;
  font-weight:400;
  text-align:center;
  z-index:9;
  position:relative;
}

.quoted b {
  font-weight:400;
  color:#5D9CD7;
}

.quoted u {
  text-decoration:underline;
  text-decoration-color:#5D9CD7;
}

.quotedby {
  text-transform:uppercase;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.1em;
  margin-top:1em;
  font-weight:600;
  z-index:9;
  position:relative;
  font-size:1rem;
  font-style:normal;
}

.quotedbg {
  margin-left:235px;
  margin-top:-50px;
  font-size:10rem;
  color:#BFCCD5;
  position:absolute;
  z-index:0;
  rotate:-30deg;
}

.facenotfound {
  width:50%;
  display: flex;
  flex-direction:column;
  text-align:center;
  background: linear-gradient(0deg,rgba(242, 249, 252, 1) 0%, rgba(187, 209, 243, 1) 100%);
  color:#f3f3f3;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #5D9CD7;
  text-transform:uppercase;
  font-family: "Poppins", sans-serif;
  font-weight:800;
  font-size:4rem;
  padding:1em;
}

.bio {
  width:50%;
  display: flex;
  flex-direction:column;
  text-align:justify;
  padding:2.5em;
}

.bio .hello {
  font-family: "Playfair Display", serif;
  font-size:3rem;
  font-weight:400;
  font-style:italic;
  line-height:1;
}

.bio .hello b {
  color:#5D9CD7;
  font-weight:700;
}

/* dolls*/

.dollminipf {
  width:75%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

.dollminipf .pic {
  width:100%;
  margin:0;
  z-index:9;
}

.dollminipf .pic img {
  max-width: 100%;
  height: auto;
  transition:0.5s;
}

.dollminipf .pic img:hover {
  transform: scale(1.5);
  transition:0.5s;
}

.dollminipf .nametag {
  padding:1rem;
  background:linear-gradient(37deg, rgba(242, 249, 252, 1) 0%, rgba(187, 209, 243, 1) 100%);
  margin-top:-0.5rem;
  font-family: "Poppins", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing: 0.1rem;
  font-size:0.75rem;
  color:#1e1e1e;
  z-index:999;
}

.dollminipf .namecont {
  z-index:99;
  position:relative;
}

.dollminipf .namebg {
  color:#f3f3f3;
  font-family: "Playfair Display", serif;
  font-size:4rem;
  position:absolute;
  text-transform:uppercase;
  font-weight:700;
  margin-top:-2rem;
  margin-left:1rem;
  z-index:9;
  opacity:0.5;
}

.dollminipf .nametag h1 {
  text-transform:uppercase;
  font-family: "Playfair Display", serif;
  line-height:0;
  margin-top:0.5em;
  margin-bottom:0.5em;
  letter-spacing: 0rem;
}

.dollminipf .nametag h1::after {
  content:none;
}

/* doll profiles*/

.dollyvisual {
  width:33.3%;
  display: flex;
  flex-direction:column;
  margin-top:3em;
  margin-bottom:3em;
  padding:1rem;
}

.dollyvisual .picle {
  width:100%;
  margin:0;
  z-index:9;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: block;
}

.dollyvisual .picle img {
  max-width: 100%;
  height: auto;
  display: block;
}

.dollyvisual .colors {
  display: flex;
  flex-direction:row;
  margin-top:1rem;
}

.dollyvisual .palette {
  width:100%;
  display:flex;
  flex-direction:row;
}

.dollyvisual .palette div {
  width:12.5%;
  height:2rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border: solid #f3f3f3 7px;
  margin-left:0.5rem;
  margin-right:0.5rem
}

.dollyvisual .aesthetic {
  padding:0.5rem;
  text-align:center;
  margin-top:1rem;
}

.dollyvisual .aesthetic aes {
  background: linear-gradient(37deg, rgba(242, 249, 252, 1) 0%, rgba(187, 209, 243, 1) 100%);
  text-transform:uppercase;
  font-weight:500;
  font-family: "Poppins", sans-serif;
  padding: 0rem 0.25rem;
  display:inline-block;
  border-radius:10px;
  color:#54748f;
}

.dollyvisual .aesthetic aes::before {
  content: "#";
  color:#5D9CD7;
}

.dollyinfo {
  width:66.6%;
  display: flex;
  flex-direction:column;
  margin-top:3em;
  margin-bottom:0em;
  text-align:justify;
  padding:1rem;
}

.dollyinfo .infofill {
  padding: 0rem 0.5rem 1.25rem 0.5rem;
  height: 4rem;
  width:20rem;
  text-align:justify;
  margin:0em;
  border-bottom:1px solid #5D9CD7;
  font-family: "Poppins", sans-serif;
  text-transform:uppercase;
  font-size:0.85rem;
}

.dollyinfo .infofill b {
  background: linear-gradient(0deg, #5D9CD7 25%, transparent 0%);
  font-family: "Poppins", sans-serif;
  text-transform:uppercase;
  font-weight:600;
  font-size:1.25rem;
}

.dollyinfo .info {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

.dollyinfo .notes { 
  text-align:justify;
  width:90%;
  padding-left:3rem;
  }
  
.dollyinfo .notes:first-letter {
  font-size:5rem;
  font-family: "Playfair Display", serif;
  font-weight:700;
  float:left;
  line-height: 0.6;
  margin-right:7px;
  margin-top:3px;
  color:#5D9CD7;
}

.dollyinfo h1 {
  text-transform:uppercase;
  font-family: "Playfair Display", serif;
  font-size:5rem;
  color:#f3f3f3;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #5D9CD7;
  line-height:0;
  margin-bottom:0;
  margin-left:2rem;
}

.dollyinfo h1::after {
  content: "";
  width: 5%;
  border-bottom: 5px solid #5D9CD7;
  margin-top: 2.5rem;
  display:block;
  margin-left:0.15rem;
}

.dollyinfo h2 {
  text-transform:uppercase;
  font-family: "Playfair Display", serif;
  font-size:2.5rem;
  color:#5D9CD7;
  line-height:0;
}

.dollyinfo h3 {
  text-transform:uppercase;
  font-family: "Poppins", sans-serif;
  font-weight:400;
  letter-spacing: 0.55rem;
  line-height:1;
  margin-left:2rem;
  margin-bottom:2rem;
}

/* mobile settings*/

@media only screen and (max-width: 1024px) {
  
/*dolls*/

.dollminipf {
  width:10rem;
  margin:1rem;
}

.dollminipf .namebg {
  font-size:2rem;
  margin-top:-1rem;
  margin-left:0rem;
}

.dollminipf .nametag h1 {
  font-size:1rem;
}

.dollminipf .nametag {
  font-size:0.33rem;
}

/*doll profiles*/

.dollyvisual {
  width:100%;
  margin-top:0em;
  margin-bottom:0em;
}

.dollyinfo .infofill {
  width:15rem;
}

.dollyinfo .info {
  grid-template-columns: repeat(1, 1fr);
}

.dollyinfo {
  width:100%;
  margin-top:0em;
  margin-bottom:0em;
}

.dollyinfo a {
  margin:0;
}

.dollminipf .nametag {
  width:100%;
}

.dollyinfo h1 {
  margin-bottom:2rem;
}

.dollyinfo h1::after {
  content: none;
}

.dollyinfo h3 {
  text-align:center;
}

}

@media only screen and (max-width: 768px) {
  
h1 {
  font-size:2em;
}
h3 {
  text-align:center;
}
.wrapper {
margin:5em auto;
margin-top:2em;
}

/*front gallery and info*/

.fiftyfifty {
  display: flex;
  flex-direction:column;
}

.redoni {
  width:100%;
}

.redoni h1 {
  font-size:3.25em;
}

.redoni .clickhere {
  width:85%;
}

.blueoni {
  width:100%;
  flex-direction:column;
}

.blueoni .mainpic {
  width:100%;
}

.blueoni .sidepics {
  width:100%;
}

.blueoni .frontrow {
  width:100%;
  flex-direction:column;
  padding:0em 0em;
}

.blueoni .frontrow img {
  padding:0.25em 0em;
}

.blueoni .backrow {
  width:100%;
  flex-direction:column;
  padding:0em 0em;
}

.blueoni .backrow img {
  padding:0.25em 0em;
}

/*about*/

.facenotfound {
  width:100%;
}

.bio {
  width:100%;
}

.quotedby {
  text-transform:uppercase;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.1em;
  margin-top:1em;
  font-weight:600;
  margin-bottom:3.5em;
}

.quotedbg {
  margin-left:5px;
}

.bio .hello {
  font-size:2rem;
}

.cardstack {
  flex-direction:column;
  margin-top: 0em;
}

.card {
  width:100%;
}

.redoni h1:after {
margin-top: 1rem;
margin-left:6rem;
}

/*dolls*/

.dollminipf {
  width:100%;
  margin-left:0rem;
}

.dollminipf .namebg {
  font-size:3rem;
  margin-top:-1.5rem;
  margin-left:2rem;
}

.dollminipf .namecont {
  z-index:99;
  position:relative;
  padding:0.25rem
}

.dollminipf .nametag h1 {
  font-size:2rem;
}

.dollminipf .nametag {
  font-size:0.75rem;
}

/*doll profiles*/

.dollyvisual {
  width:100%;
  margin-top:0em;
  margin-bottom:0em;
}

.dollyinfo .infofill {
  width:15rem;
}

.dollyinfo .info {
  grid-template-columns: repeat(1, 1fr);
}

.dollyinfo {
  width:100%;
  margin-top:0em;
  margin-bottom:0em;
}

.dollyinfo a {
  margin:0;
}

.dollminipf .nametag {
  width:100%;
}

.dollyinfo h1 {
  margin-bottom:2rem;
  text-align:center;
  font-size:5rem;
  margin-left:0;
}

.dollyinfo h1::after {
  content: none;
}

.dollyinfo h3 {
  text-align:center;
  margin-left:0;
}

.dollyinfo .notes { 
  width:100%;
  padding-left:0rem;
  }
  
}