* {
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    
}

body {
    text-align: center;
  background-color: #646b78;
    margin: 0;
    font-family: 'EB Garamond', serif;


}

main{
    background-color: #eae8ec;

}

footer p{

  
margin-bottom: 10vh;

}



h1{
font-size: 8vh;
text-align: center;
}

p {
    font-size: 3vh;
    text-align: center;
}

#myname {
    font-weight: bold;
    color: #000e5e;
    

}



#Earbutton:hover, #Eyebutton:hover, #Neckbutton:hover, #Tailbutton:hover, 
#Color1:hover, #Color2:hover, #Color3:hover, #Color4:hover, p.random {
    transition: 0.2s;
    transform: translateY(5px);

}

#Earbutton, #Eyebutton, #Neckbutton, #Tailbutton,
#Color1, #Color2, #Color3, #Color4 {
  
    cursor: pointer;
    transition: 0.3s;
}

#Ear1, #Ear2, #Earins, #Tail2, #Tail1, #Neck1, #Neck2{
    display: none; 

}

#Ear3, #Ear3in {
    display: inline;
}