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

body{
    display: flex;
    flex-direction: column;
    background-color: lightgoldenrodyellow;
    width: 100%;
    
}

.cabeçalho{
    width: 100%;
    height: 100px;
    display: flex;
    background: linear-gradient(90deg, rgba(91,86,86,1) 14%, rgba(250,250,210,1) 46%, rgba(250,250,211,1) 64%, rgba(250,250,209,1) 73%, rgba(250,250,209,1) 75%);
    justify-content: space-between;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
}

#t a:hover{
    color: lightgoldenrodyellow; 
    font-size: 60px;
    
}

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

.sobre{
    width: 50%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: lightgoldenrodyellow;
}

.sobre a:hover{
    color: grey;
    text-decoration: underline;
    font-size: 40px;
}

.pets{
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}

h1 {
    text-align: center;
}

.pets li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin:0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 1px solid #000000;
    border-radius: 50px;
}

.pets li:hover {
    border-color: #ffd900;
}

.pets li:active {
    border-color: green;
}

.pets img{
    border-radius: 50px
}

.descrição{
    font-size: 20px;
}

@media (max-width:700px){
 
    .cabeçalho{
        display: block;
        
  }
    .pets{
        display: flex;
        flex-direction: column;    
    }
}

footer{
    width: 100%;
    height: 150px;
   
}

footer p{
    text-align: center;
}

.copy{
    background: linear-gradient(90deg, rgba(91,86,86,1) 0%, rgba(250,250,209,1) 43%, rgba(250,250,210,1) 46%, rgba(250,250,211,1) 58%, rgba(107,102,99,1) 100%, rgba(115,110,105,1) 100%, rgba(91,86,86,1) 100%, rgba(91,86,86,1) 100%);
    font-size: 20px;
    margin:  20px 0 0px;
    padding: 20px;
    height: 100px;
}