body {
    font-family: Arial, sans-serif;
    background-color: white;
    margin: 0;
    padding: 0;
    text-align: center;
}

header {
      background: linear-gradient(green ,#F9D423 );
    
    padding: 1rem;
}

nav {
    margin: 1rem;
}

nav a {
    margin: 0 1rem;
    text-decoration: none;
   background: linear-gradient (white,red);

    font-weight: bold;
}

h3 {
   color:red;
    text align:center;
padding: 1rem;
font-family: Arial
 margin: 1rem;

}

.btn{
background:linear-gradient(red ,#F9D423 );
    border-radius: 50px;
}

.bt{
background:linear-gradient(#F9D423  ,#4681f4 )
border-radius: 50px;

}

.btn:hover{
color var(red);
transform : scale(1.5) rotate(-3deg);
background:linear-gradient( #A2DED0 ,#F9D423 );
border-radius: 50px;
}


.bt:hover{
transform : translatex(60px);
transform : scale(1.3) rotate(3deg);
background:linear-gradient(#4681f4 ,#F9D423 );
    border-radius: 50px;
}

h1 {
color: yellow
 text-shadow: 1px 1px 2px black, 0 0 25px green, 0 0 5px darkblue;

}

P {
  background-color: #4CAF50;
    color: WHITE;
    MARGIN: 2REM;
    padding: 4rem;
 border-radius: 50px;
text-shadow: 1px 1px 2px BLUE, 0 0 25px green, 0 0 5px YELLOW;
ALIGN="LEFT";
}

p:hover{

transform : scale(1.002) rotate(-1deg);
background:linear-gradient(#4681f4 ,#F9D423 );

}
@media only screen and (max-width: 415px){
.a{

width: 70%;
height: 85%;

}


}

@media only screen and (max-width: 350px){
.a{

width: 70%;
height: 30%;

}


}