* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


body{
    margin:0 auto;
    background-color:rgb(165, 153, 165) ;
    opacity: 0.8;
    background-size: 26px 26px;
    background-image: repeating-linear-gradient(to right, #6fb41b, #6fb41b 1.3px, rgba(221, 160, 221, 0.411) 1.3px,rgba(221, 160, 221, 0.411) );      
    overflow-x: hidden;
    color:darkslategrey;
    font-family: "Antic Slab", serif;
    font-weight: 400;
}

#bg-graphic {
    background-image: url(rainbow.png);
    opacity: 0.3;
    background-size: cover;
    background-position: right;
    position: fixed;
    right: 0;
    bottom:0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    }

h2, h3, h4, h5{
    font-family: 'Coral Pixels', serif;
    letter-spacing: 0.7rem;
}

.container-lg{
  max-width:960px;
  position: absolute;
  display:flex;
  justify-content: center;
  align-content: center;
  left: 50%;
  transform: translateX(-50%);
}

.bed{
    z-index: -1;
    opacity:0.6;
}

.girl{
    position: absolute;
    overflow:hidden;
    z-index:10;
    top:15%;
    left:5%;
    width: 125%;
    transition: transform 0.5s ease;
}

.toy-pics{
  position: absolute;
  top:2%;
  left:0;
  width:55%;
}

.toy img{
  margin:2%;
  opacity: 0.5;
  display: flex;
  flex-direction: column;
}

.title {
  background: #b9c5af;
  background: radial-gradient(circle, #b9c5af 85%, rgba(250, 235, 215, 0) 100%);    
  padding:1%;
  font-family: 'Coral Pixels', serif;
  font-size: large;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.content{
    background-color: rgba(251, 251, 251, 0.7);
    height:fit-content;
}

.project-card h5{
    font-size: medium;
}

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

.project-img{
    width:100%;
  }

.project-text{
            width:100%;
  }

.project-text p{
        width:100%;
  }

button{
    border:none;
    background: transparent;
    text-align: left;
    font-family: 'Coral Pixels', serif;
    letter-spacing: 0.7rem;
  text-decoration-line: underline;
  text-decoration-color: blueviolet;
  text-decoration-style: solid;
  text-decoration-thickness: thin;
}


button.tech { text-decoration-color: #6647ad; }
button.design { text-decoration-color: #e962b5; }
button.studio { text-decoration-color: #daec88; }
button.interactive { text-decoration-color: #69905b; }
button.booklets { text-decoration-color: #fd7b23; }

.modal-backdrop{
    background-color: aliceblue;
    opacity:1;
}

.modal-dialog {
  width: auto;
  max-width: 960px;
}

.reality-gallery{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.reality-gallery img{
    margin:5px;
    display: inline-block;
    width:275px;
}

.container-grid{
  position: absolute;
  top:180%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:90%;
}

/* masonry grid styles */
.grid {
  max-width: 1200px;
  margin:0 auto;
}

/* reveal grid after images loaded */
.grid.are-images-unloaded {
  opacity: 0;
}

.grid__item,
.grid__col-sizer {
  width: 32%;
}

.grid__gutter-sizer { width: 2%; }

/* hide by default */
.grid.are-images-unloaded .image-grid__item {
  opacity: 0;
}

.grid__item {
  margin-bottom: 20px;
  float: left;
  padding:10px;
  border-radius: 5px;
  height: fit-content; 
  background: aliceblue;
}

.grid__item--width2 { width: 66%; }

.grid__item img {
  display: block;
  max-width: 100%;
  border-radius: 5px;
  opacity:0.7;
}

.grid__item img:hover {
  opacity:1;
  transition: opacity 0.2s ease;
}


.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}

/* media queries xsmall */

@media (max-width: 590px) {

  .container-grid{
  position: absolute;
  top:180%;
  }

  .grid__item,
.grid__col-sizer {
  width: 48%;
}

      .reality-gallery img{
    margin:5px;
    display: inline-block;
    width:175px;
}
}


/* tablet small */
@media (min-width: 576px) {

    .container-grid{
  position: absolute;
  top:150%;
  }

    .reality-gallery img{
    margin:5px;
    display: inline-block;
    width:200px;
}


}


/* tablet md */
@media (min-width: 768px) {

  .reality-gallery img{
    margin:5px;
    display: inline-block;
    width:250px;
}

    .container-grid{
  position: absolute;
  top:180%;
  }

}

/* desktop xxl */
@media (min-width: 992px) {

    body{
        max-width: 1280px;
    }

    .grid {
  max-width: 1280px;
  margin:0 auto;
}

.grid__item,
.grid__col-sizer {
  width: 23%;
}

    .container-grid{
  position: absolute;
  top:165%;
  }

}