@import url('https://fonts.googleapis.com/css?family=Cookie');

        @import url('https://fonts.googleapis.com/css?family=Handlee');

        body,
        html {
            padding: 0px;
            margin: 0px;
            font-family: sans-serif;
            background: white;
            letter-spacing: 1.2px;
            text-align: center;
        }

        .logo a {
            float: left;
            text-align: center;
            text-decoration: none;
            color: white;
            text-shadow: none;
            background-color: rgb(255, 147, 198);
            padding: 5px 17px;
            font-family: 'Cookie', cursive;
            font-size: 35px;
        }

        .navBar {
            width: 100%;
            height: 70px;
            margin: 0;
            overflow: hidden;
            background-color: rgb(255, 147, 198);
        }

        li {
            float: right;
            list-style-type: none;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            text-decoration: none;
            text-shadow: none;
            background-color: rgb(255, 147, 198);
            padding: 5px 20px;
            font-family: 'Cookie', cursive;
            font-size: 30px;
        }

        .grow {
            transition: all .2s ease-in-out;
        }

        .grow:hover {
            transform: scale(1.3);
            outline: none;
        }

        img {
            width: 15.6%;
            padding: 7px 3px;
            border-radius: 15px;
        }

        .first {
            width: 100%;
            display: inline-block;
            vertical-align: top;
            text-align: center;
        }

        .abouttitle {
            font-family: 'Cookie', cursive;
            font-size: 28px;
        }

        .about {
            width: 99.7%;
            height: 225px;
            background-color: #78ff78;
            color: white;
            padding: 2px;
            font-family: 'Handlee', cursive;

        }

        .cupcakestitle {
            font-family: 'Cookie', cursive;
            font-size: 28px;
        }

        .cupcakes {
            background-color: #9ad7ea;
            width: 100%;
            height: 540px;
            color: white;
            display: inline-block;
        }

        .cupcakes1,
        .cupcakes2,
        .cupcakes3,
        .cupcakes4 {
            background-color: #9ad7ea;
            width: 24%;
            height: 370px;
            color: white;
            display: inline-block;
            font-family: 'Handlee', cursive;
        }

        .cupcakes1 img,
        .cupcakes2 img,
        .cupcakes3 img,
        .cupcakes4 img {
            width: 60%;
            height: 75%;
        }

        .contacttitle {
            font-family: 'Cookie', cursive;
            font-size: 28px;
        }

        .contact {
            width: 99.7%;
            height: 190px;
            background-color: #f08af0;
            color: white;
            padding: 2px;
            text-decoration: none;
            font-size: 23px;
            font-family: 'Handlee', cursive;
        }

        .contact a {
            color: white;
            text-decoration: none;
            text-shadow: none;
        }

        .contact a:hover {
            color: grey;
            text-decoration: none;
            text-shadow: none;
        }


        .buytitle {
            font-family: 'Cookie', cursive;
            font-size: 28px;
        }

        .buy1,
        .buy2,
        .buy3,
        .buy4 {
            background-color: rgba(235, 207, 134, 0);
            width: 24%;
            height: 150px;
            color: white;
            display: inline-block;
            vertical-align: top;
            font-size: 15px;
        }

        .buy {
            width: 99%;
            height: 500px;
            background-color: #ffdb7b;
            color: white;
            padding: 2px;
            text-decoration: none;
            font-size: 23px;
            font-family: 'Handlee', cursive;
        }

        .click_here {

            text-decoration: none;
            color: green;

        }

        .click_here a {
            color: white;
            text-decoration: none;
            text-shadow: none;
        }

        .click_here a:hover {
            color: #959595;
            text-decoration: none;
            text-shadow: none;
        }


        @media (max-width: 1100px) {
            .first {
                width: 100%
            }
            .first img {
                width: 15%
            }

        }

        @media (max-width: 700px) {
            .first img {
                width: 14%
			}
					.logo a {
                    font-size: 890px;
                }
                li a {

                    font-size: 81px;
                }
}
            @media (max-width: 500px) {
                .first img {
                    width: 13%;
				}
				
                
                .logo a {
                    font-size: 89%;
                }
                li a {

                    font-size: 81px;
                }

                .about {
                    height: 20%
                }

                .about {
                    font-size: 55%
                }

                .abouttitle {
                    font-size: 140%
                }

                .cupcakestitle,
                .cupcakes1,
                .cupcakes2,
                .cupcakes3,
                .cupcakes4 {
                    font-size: 75%;
                    


                }
                .cupcakes1,
                .cupcakes2,
                .cupcakes3,
                .cupcakes4 {
                    width: 35%;
                    height: 40%
                }
                .cupcakes{
                    height: 75%
                }
                .buy{
                    font-size: 80%
                }
                .buy{
                    height: 35%
                }
                .buytitle{font-size: 100%}
                
                .buy1,.buy2,.buy3,.buy4{font-size: 49%;
                height: 20%}
				
				.contacttitle{
					font-size: 20
				}
                
            }
			




			@media (max-width: 900px) {
				  .logo a {
                    font-size: 18px;
					  padding: 5px 13px;
    
                }
				
                li a {
	                font-size: 18px;
					padding: 5px 15px;
                }
					
					
			}

@media (max-width: 700px) {
    .cupcakes1,
                .cupcakes2,
                .cupcakes3,
                .cupcakes4 {
                    width: 30%;
                    height: 38%;
                }
    .cupcakes{height: 700px}
}