/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     display: block;
}
 body {
     line-height: 1.5;
}
 ol, ul {
     list-style: none;
}
 blockquote, q {
     quotes: none;
}
 blockquote:before, blockquote:after, q:before, q:after {
     content: '';
     content: none;
}
 table {
     border-collapse: collapse;
     border-spacing: 0;
}
/*end of resest*/
 body, html {
     margin: 0;
     padding: 0;
     height: 100%;
    /* overflow: hidden;
    */
}
 body {
     font-family: "Josefin Sans";
    background-image: url("gradient.png");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100%;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
     overflow-x: hidden; 
}
 #main-navigation {
     overflow: hidden;
     background-color: #fff;
     border: 1px solid rgb(10 59 0 / 50%);
}
 #main-navigation a {
     float: right;
     color: #000000;
     background: #fff;
     text-decoration: none;
     padding: 12px 30px;
     border-left: 1px solid rgb(10 59 0 / 50%);
     transition: background 250ms ease-in-out;
     font-weight: 600;
}
 #main-navigation a:hover, #main-navigation a:focus {
     background: lightblue;
}
 .animate-charcter {
     background-image: linear-gradient(-225deg, #011C61 0%,#4e47cb 30%, #3F0061 65%, #011C61 100%);
     background-size: auto auto;
     background-clip: border-box;
     background-size: 200% auto;
     color: #fff;
     background-clip: text;
    /* text-fill-color: transparent;
    */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: textclip 2s linear infinite;
     font-size: 5em;
     font-family: "Abril Fatface";
     position: relative;
    /* top: 10%;
     */
     margin: 0;
}
 @keyframes textclip {
     to {
         background-position: 200% center;
    }
}
 #wrapper {
     display: flex;
     flex-direction: column;
     height: 100%;
/*     overflow-y: scroll;*/
}
 .gridsecondary {
     padding: 0% 8% 14% 8%;
    /* display: collapse;
    */
     grid-template-columns: 1fr;
     grid-gap: .75em;
     grid-template-rows: auto;
}
 .gridsecondary img {
     display: block;
     width: 100%;
     height: auto;
     opacity: 1;
     transition: .5s ease;
}
 section {
     height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
}
 #blackbirdvh {
     border: 9px solid white;
     background-color: rgb(177 254 255 / 40%);
}
 #donkeyvh {
     border: 9px solid white;
     background-color: rgb(244 93 214 / 40%);
}
 #multivh {
     border: 9px solid white;
     background-color: rgb(166 145 255 / 40%);
     padding-bottom: 1%;
}
#daisiesvh {
     border: 9px solid white;
     background-color: rgb(133 255 217 / 53%);
     padding-bottom: 1%;
}
 #blackbirdvh, #donkeyvh, #multivh, #daisiesvh {
     height: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: left;
}
 p {
     font-size: 1.5em;
}
 h1 {
     font-size: 5em;
     font-family: "Abril Fatface";
     position: relative;
    /* top: 10%;
     */
     margin: 0;
     color: #1f3a93;
     text-align: center;
     margin-top: 6%;
     margin-bottom: 2%;
}
 h3 {
     font-size: 2.1em;
     margin: 0 auto;
     margin-top: 2%;
}
 header {
     width: 100%;
}
 #about {
     font-family: "Josefin Sans";
     font-weight: 600;
     width: 90%;
    /* margin: auto;
    */
     margin-bottom: 4%;
     font-size: 1.2em;
     page-break-after: always;
}
 footer {
     color: #000;
     text-align: center;
     padding: 10px;
     width: 100%;
}
/*Contact form*/
/*h3 color variations*/
 h3 {
     font-family: 'Source Code Pro', monospace;
     font-weight: 700;
     font-size: 2em;
     text-align: center;
     margin-top: 4%;
}
 #purp {
     color: #0b0d80;
}
 #blue {
     color: #57095c;
}
 #red {
     color: #430675;
}
#daisies {
     color: #0f5b26;
}
 #fcf-form {
     display:block;
}
 .fcf-body {
    margin: auto;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #edfff2;
    padding: 2%;
    padding-bottom: 10px;
    border: 21px solid #92b1d0;
    border-radius: 0.25rem;
    max-width: 100%;
    display: block;
    width: 75%;
    margin-top: 2%;
}
 .fcf-form-group {
     margin-bottom: 1rem;
}
 .fcf-input-group {
     position: relative;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -ms-flex-align: stretch;
     align-items: stretch;
     width: 100%;
}
 .fcf-form-control {
     display: block;
     width: 100%;
     height: calc(1.5em + 0.75rem + 2px);
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: #495057;
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #ced4da;
     outline: none;
     border-radius: 0.25rem;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
 .fcf-form-control:focus {
     border: 1px solid #313131;
}
 select.fcf-form-control[size], select.fcf-form-control[multiple] {
     height: auto;
}
 textarea.fcf-form-control {
     font-family: -apple-system, Arial, sans-serif;
     height: auto;
}
 label.fcf-label {
     display: inline-block;
     margin-bottom: 0.5rem;
}
 .fcf-credit {
     padding-top: 10px;
     font-size: 0.9rem;
     color: #545b62;
}
 .fcf-credit a {
     color: #545b62;
     text-decoration: underline;
}
 .fcf-credit a:hover {
     color: #0056b3;
     text-decoration: underline;
}
 .fcf-btn {
     display: inline-block;
     font-weight: 400;
     color: #212529;
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     background-color: transparent;
     border: 1px solid transparent;
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     line-height: 1.5;
     border-radius: 0.25rem;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
 @media (prefers-reduced-motion: reduce) {
     .fcf-btn {
         transition: none;
    }
}
 .fcf-btn:hover {
     color: #212529;
     text-decoration: none;
}
 .fcf-btn:focus, .fcf-btn.focus {
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
 .fcf-btn-primary {
     color: #fff;
     background-color: #5381b2;
     border-color: #5381b2;
}
 .fcf-btn-primary:hover {
     color: #fff;
     background-color: #0069d9;
     border-color: #0062cc;
}
 .fcf-btn-primary:focus, .fcf-btn-primary.focus {
     color: #fff;
     background-color: #0069d9;
     border-color: #0062cc;
     box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
 .fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
     padding: 0.5rem 1rem;
     font-size: 1.25rem;
     line-height: 1.5;
     border-radius: 0.3rem;
}
 .fcf-btn-block {
     display: block;
     width: 100%;
}
 .fcf-btn-block+.fcf-btn-block {
     margin-top: 0.5rem;
}
 input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
     width: 100%;
}
 @media only screen and (min-width: 600px) {
    /* Styles for tablets */
     #about {
         width: 70%;
    }
     h1 {
         font-size: 5em;
         font-family: "Abril Fatface";
         position: relative;
        /* top: 10%;
         */
         margin: 0;
         color: #1f3a93;
         text-align: center;
         margin-top: 3%;
         margin-bottom: 2%;
    }
}
 @media only screen and (min-width: 851px) {
    /* Styles for desktop */
     #about {
         width: 50%;
         font-size: 1.4em;
    }
     h3 {
         font-size: 2.1em;
         margin: 0 auto;
         margin-top: 4%;
    }
     h1 {
         font-size: 7em;
         font-family: "Abril Fatface";
         position: relative;
        /* top: 10%;
         */
         margin: 0;
         color: #1f3a93;
         text-align: center;
         margin-top: 3%;
         margin-bottom: 2%;
    }
     #down {
         position: absolute;
         text-align: right;
         right: 20%;
         top: 83.5%;
         width: 8%;
    }
     .left {
         grid-area: left;
    }
     .right {
         grid-area: right;
         padding-left: 2%;
    }
     .gridsecondary {
         padding: 3% 0 3% 0;
         display: grid;
         margin: 0 10% 0 10%;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr;
         grid-gap: 1.25em;
         grid-template-areas: "left right";
    }
     p {
         line-height: 2;
         margin: 0;
    }
     .animate-charcter{
         font-size: 9em;
    }
}