@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');
@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wdth,wght@0,5..1200,87.5..112.5,300..900;1,5..1200,87.5..112.5,300..900&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%;
                    }

p { text-align: left;
    margin: 8%;
    max-width: 75%;
  }

            		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;
            			}

 a {
	text-decoration: none;
	color: pink;
	}

	a:hover {
		color: yellow;
		}


	 span, small {
	    font-family: 'Amatic SC', cursive;
		}

	span {
		font-size: 2rem;
	    max-height: 3em;
	    display: inline-flex;
		}





/*  NAVIGATION */

 nav {
 	z-index: 1;
	font-family: 'Megrim', cursive;
	font-size: 1.5rem;
	margin: auto;
	position: fixed;
	text-align: center;
	transition: all 0.4s ease;
    min-width: 98%;
    margin-top: -5px;
    padding-top: 0px;
     margin-right: 5%;
     margin-left: 4%;
	}

	nav hr {
		display: none;
		}

	nav a {
		margin: auto;
		padding: 1%;
		background-color: rgba(0, 0, 0, .6);
		display: inline-block;
		border-radius: 40px;
		text-align: center;
	    transition: all 0.3s ease;
	    max-height: 3em;
	    position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 2;
		}

		nav a:link{
		display: inline;
		}
		nav a:hover{
			color: yellow;
			background-color: rgba(0, 0, 0, .8);
			font-size: 2.2rem;
			padding: 2%;
			border-radius: 60px;
			text-align: center;
			}

		nav a:active{
			color: pink;
			}

		nav a:visited{
			color: dodgerblue;
			}

		#navigation{
		  position:absolute;
		  bottom: 2%;
			}

		#navigation.fixed{
		  position:fixed;
		  bottom: 90%;
			}



                /* 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', 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%;

                    }