*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

body{
    font-family: 'Indie Flower', cursive;
    background-color: 	#FFFF33;
    height: 100vh;
    background-image: url('images/banana-2.svg');
  
    
}

.navbar{
    background-color:#1560bd;
    height: 15vh;
    text-align: center;
    font-size: 2rem;
}

.navbar .banana{
    color: yellow;
}

.navbar .image{
   
    margin-left: 0;
    margin-right: 100rem;
    
}
 
.minion{
    height: 15rem;
    width: 15rem;
    border-radius: 8px;
    margin-left: 33rem;
    margin-top: 2rem;
}



.area{
    height: 8rem;
    width: 40rem;
    border-color: black;
    margin-top: 2.5rem;
    margin-left: 19rem;
    
    background-color:#1560bd;

    
    
}

textarea{
    font-size:1.6rem;
    color:white;
}

::placeholder{
    text-align: center;
    font-size: 1.5rem;
    color: #FFFF33;
    font-weight: bold;
}

.button{
     margin-top: 2.5rem;
    display: inline-block;
    padding: 15px 32px;
    border-radius: 8px;
    margin-left: 33rem;
    height: 3.5rem;
    border: 2px solid #1560bd;
    color:black;
    font-size: 1.5rem;
}



footer p{
	font-size: 1.7rem;
	
	color:white;
    line-height:10px;
    
}

.para{
    font-size: 1.7rem;
    color: white;
}


footer{
	height:150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	top:10rem;
	background-color: #1560bd;
}
.social-icons a{
	width:40px;
	height:40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:yellow;
	margin:20px 10px;
	border-radius:50%;
}
.social-icons{
	display: flex;
	
}
.social-icons i,.social i{
	color:#1560bd;
}
.social-icons a:hover{
	background-color:#000000;
	box-shadow:2px 2px 12px rgba(0,0,0,0.2);
	transition:all ease 0.5s;
}
.social-icons a:hover i,
.social a:hover i{
	color:#FFFFFF;
	transition:all ease 0.5s;
}


@media(max-width:858px){
	

	
	
	nav {
		display: block;
	}
		
	.minion{
        margin-left: 4rem;
    }

    
	.area{
        height: 8rem;
        width: 20rem;
        border-color: black;
        margin-top: 2.5rem;
        margin-left: 1rem;  
        background-color:#1560bd;
        
    }

    .button{
        margin-top: 2.5rem;
        display: inline-block;
        padding: 15px 32px;
        border-radius: 8px;
        margin-left: 5rem;
        height: 3.5rem;
        border: 2px solid #1560bd;
        color:black;
        font-size: 1.5rem;
    }


	
	footer{
        display: block;
    }
	
    footer p{
        justify-content: center;
        align-items: center;
        margin-left: 5rem;
    }

    .para{
        margin-left: 5rem;
    }

    .social-icons{
        justify-content: center;
        align-items: center;
    }
	
	
}