html, body {
   background:#57607f;
   color:#FFF;
   background-image:url("../img/background.webp");
   background-repeat:no-repeat;
   background-position:top center;
   font-family: Calibri, sans-serif;
}

#kat-diaz {
   max-width:100%;
   width:140px;
}
#kat-diaz img {
   width:100%;
   max-width:100%;
}
#kat-diaz p.h3 {
   font-size:1.2rem;
   text-shadow:2px 2px 2px rgba(0,0,0,0.5);
   font-weight:bold;
   letter-spacing:3.5px;
}

a {
   color:#FFF;
   transition-property:color;
   transition-duration:.15s;
}
a:hover {
   color:#d3d6e8;
   text-decoration:none;
}

nav ul {
   font-size:16px;
   list-style:none;
   padding:0;
   margin:0;
   font-weight:bold;
   letter-spacing:1.5px;
   text-align:right;
   text-shadow:2px 2px 2px rgba(0,0,0,0.5);
}
nav ul li {
   display:block;
}
nav ul li img {
   vertical-align:bottom;
}
nav ul li:last-child .glitter {
   display:initial;
}

nav ul li .glitter {
   margin-right:-12px;
   max-height:28px;
}

#about {
   margin-top:700px;
}

#making_of {
   margin-top:40px;
}

#about h3,
#connect h3,
#making_of h3 {
   font-size:3rem;
   font-weight:bold;
   text-shadow:2px 2px 2px rgba(0,0,0,0.5);
   letter-spacing:5px;
   text-align:right;
   white-space:nowrap;
}
#connect h3,
#making_of h3 {
   font-size:2.2rem;
}

#connect {
   margin-top:40px;
   margin-bottom:25px;
}
#connect h5 {
   color:#cad3e1;
   text-shadow:2px 2px 2px rgba(0,0,0,0.5);
   font-size:28px;
   font-weight:bold;
   margin-bottom:0px;
}

.single-block {
   display:none;
}
.single-block-alt {
   display:block;
}
.single-block-alt h2,
.single-block-alt p {
   font-size:40px;
}

.heading {
   display:flex;
   align-items:center;
   flex-direction:column;
}

#making_of .heading {
   flex-direction:column-reverse;
   align-items:start;
}
#making_of .heading hr {
   margin-top:40px;
}

#about .heading hr {
   margin-top:10px;
}

#about .heading,
#connect .heading {
   align-items:start;
}

.love-and-glitter-text {
   text-align:right;
   margin-top:-70px;
}
.love-and-glitter-text img {
   max-width:100%;
}

.single-block h2 {
   font-size:51.35px;
   text-shadow:2px 2px 2px rgba(0,0,0,0.5);
   font-weight:bold;
   letter-spacing:5px;
   text-align:right;
   margin-top:-4px;
}

.ig-post {
   position:relative;
   border:1px solid #7a81a1;
   border-radius:6px;
   background:#7a81a1;
   text-shadow:1px 1px 3px rgba(0,0,0,0.5);
   box-shadow:2px 2px 0px rgba(0,0,0,0.15);
   transition-property:all;
   transition-duration:.2s;
}
#making_of a {
   display:block;
   margin:12px 0;
}
.ig-post:hover {
   background:#313c63;
   border:1px solid #313c63;
}
.ig-post .header {
   display:flex;
   flex-direction:row;
   color:#FFF;
   font-weight:bold;
   font-size:22px;
   text-transform:uppercase;
   padding:0 6px;
   justify-content:space-between;
   align-items:center;
}
.ig-post img {
   display:block;
   max-width:100%;
   border-radius:6px;
   overflow:hidden;
   padding:1px;
}
.ig-post h6,
.ig-post p {
   margin-bottom:0;
}
.ig-post h6 {
   font-size:18px;
   padding:3px;
   text-transform: uppercase;
   font-style: italic;
   text-align: left;
   padding-left: 8px;
}
.ig-post .header p {
   font-size:18px;
   font-weight:normal;
   padding:3px 0;
   text-align:center;
   margin:auto;
}
/*
.ig-post p {
   position:absolute;
   bottom:0;
   right:0;

   margin-bottom: 0;
   background: #313C63;
   border-top-left-radius: 1200px;
   text-align: right;
   padding: 5px;
   width: 50%;
   margin-left: auto;
   border: 2px solid #FFF;
}
*/


@media (min-width: 576px){

}


@media (min-width: 768px){
   .container {
      max-width:800px;
   }

   #kat-diaz {
      width:180px;
   }
   .single-block h2 {
      font-size:43px;
   }

   #making_of .heading hr {
      margin-top:1rem;
   }

   #making_of .heading,
   .heading {
      flex-direction:row;
   }

   #about .heading hr {
      margin-top:1rem;
   }

   .ig-post .header {
      flex-direction:column;
   }

   .love-and-glitter-text {
      margin-top:-20px;
   }

   #about .heading,
   #connect .heading {
      align-items:center;
   }
   #making_of .heading {
      align-items:center;
   }
}


@media (min-width: 992px){
   .container {
      max-width:960px;
   }

   #kat-diaz {
      width:200px;
   }

   nav ul {
      font-size:20px;
   }
   nav ul li {
      display:inline-block;
   }
   nav ul li:last-child .glitter {
      display:none;
   }
   nav ul li .glitter {
      margin-right:0;
   }

   .single-block {
      display:flex;
      flex-direction:column;
   }
   .single-block-alt {
      display:none;
   }

   #about h3,
   #making_of h3 {
      font-size:4.25rem;
   }

   #kat-diaz p.h3 {
      font-size:1.75rem;
   }

   #about {
      margin-top:880px;
   }

   #making_of {
      margin-top:50px;
   }

   #connect {
      margin-top:40px;
   }
   #connect h3,
   #making_of h3 {
      font-size:68px;
   }
}


@media (min-width: 1200px){
   .container {
      max-width:1140px;
   }

   #kat-diaz {
      width:auto;
   }

   nav ul {
      font-size:22px;
   }

   .single-block h2 {
      font-size:47px;
      text-shadow:2px 2px 2px rgba(0,0,0,0.5);
      font-weight:bold;
      letter-spacing:5px;
      text-align:right;
      margin-top:-4px;
   }

}