@import url("https://fonts.googleapis.com/css?family=Faster+One|Lato:300");body {background-color: #b967ff;}* {margin: 0;padding: 0;}*,:after,:before {-webkit-box-sizing: border-box;box-sizing: border-box;}:focus {outline: none;}.page {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.container__header {display: -webkit-box;display: -ms-flexbox;display: flex;}.main__href {text-decoration: none;display: -webkit-box;display: -ms-flexbox;display: flex;margin-left: auto;}.page__header {background: url("../images/skyline.jpg");background-position: top;background-repeat: no-repeat;background-size: cover;width: 100%;}.header-title {font-family: "Lato",sans-serif;font-size: 48px;color: #ff71ce;padding: 10px;margin-top: 80px;margin-left: auto;text-shadow: 2px 2px 0px #01cdfe;line-height: 120px;}.fantasy-dog {background: url("../images/gifrainbowgavedog.gif");background-position: center;background-repeat: no-repeat;background-size: cover;height: 200px;width: 200px;border: 5px solid #ff71ce;border-radius: 50%;margin-left: auto;margin-top: 40px;margin-bottom: 140px;margin-right: 40px;}.card {background-color: #fffb96;border: 5px black solid;border-radius: 20px;width: 80%;height: 60%;margin: auto;text-align: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: space-evenly;-ms-flex-pack: space-evenly;justify-content: space-evenly;-ms-flex-line-pack: center;align-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-top: 80px;}.title--intro {font-family: "Lato",sans-serif;font-size: 48px;color: #ff71ce;padding: 10px;}.title {font-family: "Lato",sans-serif;font-size: 48px;color: #ff71ce;padding: 10px;margin-left: 50px;margin-right: 50px;margin-top: 60px;margin-bottom: 20px;}.img {border: 5px solid #b967ff;border-radius: 20px;max-width: 80%;max-height: 60%;margin-bottom: 60px;}.video {border: 5px solid #b967ff;border-radius: 20px;max-width: 80%;max-height: 60%;margin-bottom: 60px;}.btn-container {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.btn {font-family: "Faster One",cursive;font-size: 29px;color: #b967ff;overflow: visible;border: 0;padding: 0;margin: 1.8rem;display: inline-block;letter-spacing: 8px;position: relative;font-size: 1.45rem;transition: opacity .3s, z-index .3s step-end, -webkit-transform .3s;-webkit-transition: opacity .3s, z-index .3s step-end, -webkit-transform .3s;transition: opacity .3s, z-index .3s step-end, transform .3s;transition: opacity .3s, z-index .3s step-end, transform .3s, -webkit-transform .3s;z-index: 1;background-color: transparent;cursor: pointer;width: 155px;height: 48px;line-height: 38px;}.btn span {display: block;position: relative;z-index: 2;border: 6px solid;border-color: #01cdfe;background: #ff71ce;color: #fffb96;}button.btn.striped-shadow:after,button.btn.striped-shadow:before {background-image: linear-gradient(135deg, transparent 0, transparent 9px, #01cdfe 9px, #01cdfe 16px, transparent 16px);content: '';display: block;position: absolute;z-index: 1;transition: max-height .3s, width .3s, -webkit-transform .3s;-webkit-transition: max-height .3s, width .3s, -webkit-transform .3s;transition: transform .3s, max-height .3s, width .3s;transition: transform .3s, max-height .3s, width .3s, -webkit-transform .3s;}button.btn.striped-shadow:hover:before {max-height: calc(100% - 10px);}button.btn.striped-shadow:after {width: calc(100% - 4px);height: 8px;left: -10px;bottom: -9px;background-size: 15px 8px;background-repeat: repeat-x;}.btn.striped-shadow:hover {-webkit-transform: translate(-12px, 12px);transform: translate(-12px, 12px);z-index: 3;}button.btn.striped-shadow:hover:after,button.btn.striped-shadow:hover:before {-webkit-transform: translate(12px, -12px);transform: translate(12px, -12px);}button.btn.striped-shadow:before {width: 8px;max-height: calc(100% - 5px);height: 100%;left: -12px;bottom: -5px;background-size: 8px 15px;background-repeat: repeat-y;background-position: 0 100%;}
