body {
  margin:0;
  padding:0;
  overflow-x:hidden;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
}


.navbar-brand{
  margin-left: 35%;
}
.logo {
  width: 30vw;
  margin-top: 5%;
}
.navbar-collapse {
  margin-right: 10%;
  font-size: 40px;

}
.navbar-toggler {
  margin-right: 10%;
}


.nav-link {
  color: black;
}

.landing-image{
  width: 80%;
  margin-top: 3%;
}

.personalised-dolls {
  margin-top: 2%;
  font-size: 70px;
  margin-bottom: 2%;
}

.index-text-dolls {
  margin-right: 10%;
  padding: 0 5%;
  font-size: 30px;
}

.d-block {
  margin-left: 20%;
}


.index-text-resin {
  margin-left: 10%;
  padding: 0 5%;
  font-size: 30px;
}

.resin-home {
  margin-right: 20%;
  transition: 0.001s;
}


.home-products {
  margin-top: 10%;
  background-image: url(home-products.webp);
  background-size: cover;
  height: 400px;
  border: none;
}


/* Gallery */

.div-holder {
  display: flex;
  padding: 0 15%;
}

.column {
  flex: 49.5%;
  max-width: 49.5%;
  padding: 0 25%;

}

.first-div {
  background-image: url(images/personalised-dolls/9.jpg);
  background-size: cover;
  height: 550px;
  margin:auto;
  padding: 0;
}

.second-div {
  display:flex;
  flex-direction: column;
  margin:auto;
  padding: 0;
}

.nested-div1 {
  background-image: url(images/dolls/9-150.jpg);
  background-size: cover;
  height: 272.5px;
  margin-bottom: 1%;
}
.nested-div2 {
  background-image: url(images/resin/sold.jpg);
  background-size: cover;
  height: 272.5px;
}


.shop-button1 {
  position:relative;
  margin-top: 90%;
  font-size: 2rem;
  background-color: #f7cdd0;
  border: none;
}

.shop-button2 {
  position: relative;
  margin-top: 40%;
  font-size: 2rem;
  background-color: #f7cdd0;
  border: none;
}

.shop-button1:hover, .shop-button2:hover{
  color: #fff;
  background-color: #deb8bb;
}


.dolls, .resin, .personalised-characters {
  margin-top: 10%;
  display:flex;
  flex-wrap: wrap;
  padding: 2% 2%;
}

.column-shop {
  flex: 25%;
  max-width: 25%;
  padding: 2% 2%;
}

.column-shop img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}

.dolls-heading {
  font-size: 40px;
  padding: 0 5%;
}

.pricing {
  font-size: 20px;
}
.shop-titles {
  font-size: 50px;
}


/* Contact */

.contact-box {
  margin-top: 4%;
}

.contact-image{
  width: 100%;
}

.contact-text-heading {
  text-align: left;
  font-size: 60px;
  font-weight: bold;
  margin-left: 15%;
}

.contact-text {
  padding: 0 15%;
  text-align: left;
  font-size: 35px;
  font-weight: bold;
}
.contact-text-smaller {
  padding: 0 15%;
  font-size: 30px;
  font-weight: bold;
}

/* Buttons */

.myButton-home {
  box-shadow: inset 0 0 0 0 #f7cdd0;
  background: linear-gradient(to bottom, #f7cdd0 5%, #f7cdd0 100%);
  background-color: #f7cdd0;
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-weight: bold;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 25px;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0 0 0 #f7cdd0;
}

.myButton:hover {
  background: linear-gradient(to bottom, black 5%, black 100%);
  background-color: black;
  color: #fff;
}

a:hover {
  color: #fff;
}

.myButton:active {
  position: relative;
}

.myButton-home-products {
  margin-top: 10%;
  box-shadow: inset 0 0 0 0 #fff;
  background: linear-gradient(to bottom, #fff 5%, #fff 100%);
  background-color: #fff;
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-weight: bold;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 35px;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0 0 0 #fff;
}

.myButton-home-products:hover {
  background: linear-gradient(to bottom, #f7cdd0 5%, #f7cdd0 100%);
  background-color: #f7cdd0;
  color: black;
}


.myButton:active {
  position: relative;
}


/* Footer */
.bottom {
  background-color: black;
  padding-top: 20px;
  padding-bottom: 10px;
}

.footer-link {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 20px;
}

.copyright {
  color: #fff;
  margin-top: 10px;
  background-color: black;
  margin-bottom: 0;
}

.bottom-contact {
  background-color: black;
  padding-top: 20px;
  padding-bottom: 10px;
  margin-top: 2%;
}

/* Mobile compatibility */

@media screen and (min-width: 990px) and (max-width: 1100px) {
  .index-text-resin {
    padding: 1%;
    font-size: 20px;
  }
}

@media screen and (min-width: 1100px) and (max-width: 1300px) {
  .index-text-resin {
    padding: 1%;
    font-size: 25px;
  }
}




@media screen and (max-width: 990px) {
  .navbar-collapse {
    margin: 0;
  }
  .contact-text-heading {
    margin:0;
    margin-top: 10%;
    text-align: center;
  }
  .contact-text {
    text-align: center;
    font-size: 50px;
  }
  .contact-text-smaller {
    font-size: 35px;
  }
  .dolls-home {
    margin:0;
    text-align:center;
  }

  .index-text-dolls {
    margin:0;
    margin-top: 5%;
    font-size: 50px;
  }
  .index-text-resin {
    margin:0;
    font-size: 50px;
  }
  .myButton-home {
    margin-bottom: 4%;

  }
  .column-shop {
    flex: 50%;
    max-width: 50%;
    padding: 2% 2%;
  }
  .div-holder {
    padding: 1%;
  }
  .dolls-heading {
    font-size: 60px;
  }
  .shop-titles{
    font-size: 70px;
  }
  .pricing {
    font-size: 30px;
  }
  .bottom, .bottom-contact {
    font-size: 40px;
  }
  .shop-button1 {
    margin-top: 105%;
  }
  .shop-button2 {
    margin-top: 45%;
  }
  .contact-image {
    width: 50%;
    margin-top: 20%;
    margin-bottom: 30%;
  }
  .navbar-brand{
    margin-left: 0;
  }
  .logo{
    width: 70vw;
  }
  .svg-inline--fa.fa-w-14 {
    width: 5rem;
    height: 5rem;
  }
  .nav-link{
    font-size: 70px;
  }
  .d-block {
    margin-left: 12%;
  }
  .myButton-home {
    font-size: 50px;
  }
  .myButton-home-products {
    font-size: 50px;
    margin-top: 15%;
  }



}

@media screen and (max-width: 750px) {
  .shop-button1 {
    margin-top: 125%;
  }
  .shop-button2 {
    margin-top: 65%;
  }
}