@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Cabin+Sketch|Fredericka+the+Great|Gruppo|Londrina+Outline|Marcellus+SC|Megrim|Nixie+One|Poiret+One');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

html {
    background-color: white;
    color: rgba(0, 0, 0, .8);
    font-family: 'Montserrat', sans-serif;
    padding: 0px;
    margin: 0px;
    transition: all 0.3s ease;
    min-width: 100%;
    min-width: 100vw;
    min-height: 100vw;
    padding: 0px;
    margin: 0px;
    }

    body{
        min-width: 100%;
        text-align: center;
        position: relative;
        min-height: 100%;
        padding: 0px;
        margin: 0px;
        padding: 0px;
        max-width: 100%;
                    }

            		img {
            			width: 80%;
            			margin-top: 1%;
                 pointer-events: none;
            			}
                      article img {
                 box-shadow: 10px 10px 15px;
             }
             form img {
                box-shadow: none;
             }


            		.flex {
            			display: flex;
            			flex-wrap: wrap;
            			justify-content: center;
            			align-items: center;
            			flex: 12;
						align-content: space-between;
            			}

                 nav {
                    position: sticky;

                    font-family: 'Amatic SC', cursive;
                  font-size: 7vw;
                    font-kerning: 2vw;
                    margin: 0%;
                      overflow: hidden;
                    padding: 2%;
                    float: top;
                    background-color: rgba(0, 0, 0, .7);
                              }
                    nav a {
                         padding: 1%;
                         margin: 2%;
                          text-align: center;
                          float: left;
                          border-radius: 30px;
                          border: 1px;
                          border: pink solid;
                          text-decoration: none;
                          color: pink;
                            display: inline-block;
                    }

                        nav a:hover {
                            color: yellow;
                            background-color: rgba(0, 0, 0, .8);
                        }

                        nav a:active {
                            color: white;
                            background-color: rgba(0, 0, 0, .99);
                        }


                /* Pricing Guide */
                        ul {
                            margin: 0px;
                        }
                        ul li{
                            display: block;
                            min-width: 70%;
                            margin: 2%;
                        }
                        /* $ */



                /*  ArtWork Content */

                    section {
                        min-width: 98%;
                        margin-bottom: 30%;
                    }

                    article {
                        max-width: 94%;
                        margin-bottom: 6%;
                        padding-bottom: 3%; 
                    }


                    article form, button {
                        display: inline-block;
                    }






        /* TYPEOGRAPHY */

                    h1 {
                               text-align: center;
                        font-weight: bolder;
                        font-family: 'Poiret One', cursive;
                             text-shadow: 8px 6px 20px black;
                        color: white;
                        font-size: 15vw;
                        padding-top: 30%;
                        z-index: -1;
                    }

                    h2{
                        font-size: 7vw;
                         margin-top: 2%;                 
                        text-align: center;
                        font-family: 'Playfair Display', serif;
                    }

                    h3 {
                        font-size: 6vw;
                        margin: 0px;
                        padding-bottom: 2%; 
                                         text-align: center;
                            font-family: 'Amatic SC', sans-serif;
                            color: rgba(0, 0, 0, .85);
                                               text-shadow: 8px 6px 25px pink;
                            line-height: 2px;
                            font-kerning: 3rem;
                            margin-bottom: 5%;

                    }


       		 /* SEARCH BAR */

              input {
        margin-top: 15%;
        margin-bottom: 15%;
        padding: 1%;
        line-height: 2rem;
        font-family: 'Amatic SC', cursive;
        font-size: 3rem;
        border-radius: 20px;
             text-align: center;
            align-self: center;

        }
              input[type=text] { 
                  width: 30%; 
                  -webkit-transition: width 0.15s ease-in-out; 
                  transition: width 0.15s ease-in-out; 
               } 
             
               /* When the input field gets focus, 
                    change its width to 100% */
              input[type=text]:focus { 
                 width: 70%; 
                 } 

                option {
                    font-family: Century Gothic, sans-serif;
                    text-align: center;
                    align-self: center;
                    padding: 1%;

                    }