* {box-sizing: border-box; color: white; position: relative;}
html {background: linear-gradient(to bottom, #9be2fe 0%,#67d1fb 100%); overflow-x: hidden; background-image: url('assets/yard-bg-sky.webp'); background-size: cover; background-position: center 100%; background-repeat: no-repeat;  background-attachment: fixed;}
body { margin: 0;  top: 0;  box-sizing: border-box; }

/* fonts */
h1 {font-size: 2vw;}
h2 {font-size: 28px;}
a {text-decoration: none;}
a:hover {text-decoration: underline; cursor: pointer}
strong {color: inherit}

.text-shadow {text-shadow: 1px 1px 0px black;}
.shadow {-webkit-filter: drop-shadow(-2px -3px 5px rgba(0, 0, 0, 0.6) );filter: drop-shadow(-2px -3px 5px rgba(0, 0, 0, 0.6));}

@media only screen and (max-height: 750px) {
    h3 {font-size: 16px!important; line-height: 20px!important; margin-top: -15px;}
    h4 {font-size: 14px!important; line-height: 20px!important; }
    p {font-size: 14px!important;}
    .plaque {margin-top: -75px;}
    #patio {margin-top: -10vh!important;}
}

@media only screen and (max-width: 900px) {
    .introduction {background-size: 180% 90%!important;}
    #structure {flex-wrap: wrap;  background-image: url('assets/house-texture.webp')!important; background-size: 100% 100%!important;}
    #structure > div  {width: 100%!important; height: 100%;  }
    
    html {background-image: url('assets/house-texture.webp')}
    #right-window {order: -1!important;}
    #patio {margin-top: -10vh!important;}
    svg {height: 15vh!important;}
}


/* Top Section - Sky & Hey Altoona / Johnstown Message */
.introduction {background-image: url('assets/roof-trimmed.webp'); min-height: 185px; background-position: center bottom; background-repeat: no-repeat; background-size: 100% 75%; margin-top: -15px; }
.greeting {font: bold 36px 'calder-dark-grit', sans-serif; line-height: 28px; text-align: center;  }
#message {margin: -25px 50px 0px 50px;}
#message p {background-color: rgba(255, 255, 255, 0.85); padding: 10px; border-radius: 5px; font-family: 'calder-lc-grit', sans-serif;  text-align: center;   }
.logo-container {margin-top: -25px; margin-bottom: -25px; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: center;}



/* structure */
#structure {display: flex; align-items: flex-start; margin-top: -2px; justify-content: space-between;  width: 100%; height: 60vh; min-height: 500px;   background-image: url('assets/house-texture.webp'); background-position: center center; background-repeat: no-repeat; background-size: 150% 105%;}
.window {width: 100%; height: 100%;  min-width: 300px;}
#left-window {background-image: url('assets/left-window-bg.webp')!important; background-size: 85% 80%!important; background-position: center center; background-repeat: no-repeat;}
#right-window {background-image: url('assets/right-window-bg.webp')!important; background-size: 85% 80% !important; background-position: center center; background-repeat: no-repeat;}

.awning {height: 75px; width: 100%; z-index: 2; display: flex; align-items: flex-end; justify-content: center; background-image: url('assets/new-awning.webp'); background-position: center center; background-repeat: no-repeat; background-size: 105% 100%;}
.awning-text {display: flex; align-items: center; justify-content: center; width: 100%; height: 40px;}
.window-pane {height: 100%; margin-top: -100px; width: 100%; position: absolute; background-image: url('assets/new-window.webp'); height: 100%; background-position: center center; background-repeat: no-repeat; background-size: 105% 90%;}
.window-pane-content {margin: 100px 50px; height: 60%; text-align: center; padding: 2vh 2vw;  }
.shelf {width: 85%; height: 50vh; margin: 0% 7.5% 0% 7.5%; position: absolute; display: flex; align-items: flex-end; bottom: 18%; background-color:rgba(0, 0, 0, 0.9)}

.painted-letters {color: tan; text-shadow: 1px 1px 0px white; line-height: 0px; letter-spacing: 2px; -webkit-text-stroke: 0.25px white; opacity: 0.8; line-height: 20px!important; text-align: center;  font-family: "scrapbooker-little",sans-serif; }
svg { height: 10vh;}

.ornament-container {width: 100%; display: flex; align-items: center; justify-content: center; height: 7vh; margin-top: -6vh; margin-bottom: 20px;}
.ornament-container img {height: 100%;  }
.window-text-block-center {font-family: "big-caslon-fb", sans-serif; line-height: 26px;  }
.gold-text-shadow {text-shadow: 0 0 1px black, 0.5px 0.5px 1px #5D3621, 0px 0.75px 0.75px #FDB846, 0px 1px 1px #DFBD75, 0px 0px 1px rgba(0,0,0,0.94); }
.window-text-block-bottom {font-family: calder-dark-grit-shadow, sans-serif;  line-height: 22px;}

/* doorway */
.doorway {width: 30%; min-width: 300px; height: 100%; cursor: pointer; background-image: url('assets/doorframe-with-clocks.webp')!important; height: 100%; background-position: center bottom; background-repeat: no-repeat; background-size: 100% 99%; display: flex; align-items: center; justify-content: center;}
.door { width: 80%; height: 90%; margin-top: 8%; background-image: url('assets/new-door.webp');  background-position: center 8%; background-repeat: no-repeat; background-size: 100% 100%; }
.door-content {width: 100%; height: 100%;}
.doorway:hover .door {transform: perspective(550px) rotateY(-45deg) scale(0.80) translateY(-5px) translateX(45px); }
.open-sign-container {margin: 25px 50px 25px 50px;  width: calc(100% - 75px); display: flex; justify-content: center; }
.open-sign-content {width: 100%; max-height: 225px; }
.open-sign-content p {font-size: 11px; text-align: center; color: black; font-family: calder-dark-grit, sans-serif}
.plaque { padding: 15px 2vw 10px;  text-align: center; transform: scale(0.85); background-image: url('assets/plaque.webp'); background-size: 100% 100%; background-position: center center;}
#door-sign-message {color:black !important; font-size: 14px; line-height: 16px; font-weight: 700; font-family: calder-lc-grit, sans-serif; padding: 10px;}

#patio {width: 100%; height: 12vh; margin-top: -5vh; text-align: center; display: flex; align-items: center;  justify-content: center; background-image: url('assets/flowers_2.webp'); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;}
#patio a {background-color: rgba(255, 255, 255, 0.75); padding: 10px 10px; margin: 0px 50px; border-radius: 3px; font-family: 'calder-lc-grit', sans-serif; color: black; font-size: 16px; line-height: 20px; text-align: center;}
#patio a:hover {transform: scale(1.05); cursor: pointer; text-decoration: none; }

/* Animations */

.pulsate-bck{-webkit-animation:pulsate-bck .5s ease-in-out 5s both;animation:pulsate-bck .5s ease-in-out 5s both}
 @-webkit-keyframes pulsate-bck{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulsate-bck{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}

 .sway {
    animation: sway1 20s infinite;
    transform-origin: top center;
}
@keyframes sway1 {
    0%, 100%{ transform: rotate(-6deg);}
    50%{ transform: rotate(4deg); }
}

/*
  --color-primary: #5192ED;
  #F0544F: #F0544F;
  --color-tertiary: ##F4807C;
  --color-quaternary: #F7A4A1;
  --color-quinary: #FCDBD9;
  */

  .text_shadows {
    text-shadow: 3px 3px 0 #F0544F, 6px 6px 0 #F4807C,
      9px 9px #F7A4A1, 12px 12px 0 #FCDBD9;
    
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;

    color: white;

    animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
    letter-spacing: 0.4rem;
  }

  .bright-text {
    font-weight: 900;
    font-size: 22px!important;
    color: #F0544F;
    text-shadow: 1px 1px 0 white;
  }

@keyframes shadows {
    0% {
      text-shadow: none;
    }
    10% {
      text-shadow: 3px 3px 0 #F0544F;
    }
    20% {
      text-shadow: 3px 3px 0 #F0544F,
        6px 6px 0 #F0544F;
    }
    30% {
      text-shadow: 3px 3px 0 #F0544F,
        6px 6px 0 #F0544F, 9px 9px #F7A4A1;
    }
    40% {
      text-shadow: 3px 3px 0 #F0544F,
        6px 6px 0 #F0544F, 9px 9px #F7A4A1,
        12px 12px 0 #FCDBD9;
    }
    50% {
      text-shadow: 3px 3px 0 #F0544F,
        6px 6px 0 #F0544F, 9px 9px #F7A4A1,
        12px 12px 0 #FCDBD9;
    }
    60% {
      text-shadow: 3px 3px 0 #F0544F,
        6px 6px 0 #F0544F, 9px 9px #F7A4A1,
        12px 12px 0 #FCDBD9;
    }
    70% {
      text-shadow: 3px 3px 0 #F0544F,
        6px 6px 0 #F0544F, 9px 9px #F7A4A1;
    }
    80% {
      text-shadow: 3px 3px 0 #F0544F,
        6px 6px 0 #F0544F;
    }
    90% {
      text-shadow: 3px 3px 0 #F0544F;
    }
    100% {
      text-shadow: none;
    }
  }
  
  @keyframes move {
    0% {
      transform: translate(0px, 0px);
    }
    40% {
      transform: translate(-12px, -12px);
    }
    50% {
      transform: translate(-12px, -12px);
    }
    60% {
      transform: translate(-12px, -12px);
    }
    100% {
      transform: translate(0px, 0px);
    }
  }