body{
    display: flex;
    background-image: linear-gradient(black, rgb(109, 207, 109), white, rgb(109, 207, 109), black);
    background-repeat: no-repeat;
    background-attachment: fixed;
    justify-content: center;

    
    
}
.transparent{
    background-color: rgba(137, 134, 134, 0.5);
    margin: 10px;
    width: 1100px;
    height: 900px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px;
    border: solid 2px black;
   
    
    
}
.transparent1{
    background-color: rgba(137, 134, 134, 0.5);
    margin: 10px;
    width: 1100px;
    height: 1300px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px;
    border: solid 2px black;
   
    
    
}
.transparent2{
    background-color: rgba(137, 134, 134, 0.5);
    margin: 10px;
    width: 1100px;
    height: 350px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px;
    border: solid 2px black;
   
    
    
}
#logo{
    margin: 20px;

}
.line{
    justify-self: center;
    margin: -20px;
    background-color: black;
    height: 3px;
    color: transparent;
    width: 900px;

}
.tabs{
    display: flex;
    margin: 40px;
    justify-content: center;
    column-gap: 110px;
    
}
button{
    height: 60px;
    border: none;
    text-align: center;
    font-family: mogra;
    font-size: 30px;
    background-color: transparent;
    transition: color 1s ease, -webkit-text-stroke 1s ease, font-size 0.5s ease, color 0.3s ease-out
}
button:hover{
    color: rgb(109, 207, 109);
    -webkit-text-stroke: 1.3px black;
    font-size: 34px;
}
#containerWhyGroom{
    justify-self: center;
    background-color: rgba(24, 24, 24, 0.5);
    height: 485px; width: 1000px;
    border-radius: 10px;
}
#question{
    text-align: center;
    font-size: 40px;
    font-family: mogra;
    padding: 8px;
}
#whyContainer{
    display: flex;
}
#information{
    display: flex;
}
#yorkie{
    height: 300px;
    margin: 10px;
    border-radius: 8%;
    border: solid 2px;
    box-shadow: 0px 0px 5px rgb(0, 0, 0);
    transition: all 1s ease;
}
#yorkie:hover{
    box-shadow: 0px 0px 5px rgb(255, 255, 255);
}
#reasons{
    font-family: Comic Relief;

}
.reasonHead{
    font-size: 35px;
    border-radius: 8px;
    text-indent:5px;
}
#rHealth{
    font-family: mogra;
    transition: color 1s ease, -webkit-text-stroke 1s ease, font-size 0.5s ease, color 0.3s ease-out;
    padding: 10px;
    
}
#rHealth:hover{
    color: rgb(109, 207, 109);
    -webkit-text-stroke: 1.3px black;
    
}
#rSkin{
    font-family: mogra;
    transition: color 1s ease, -webkit-text-stroke 1s ease, font-size 0.5s ease, color 0.3s ease-out;
    padding: 10px;
}
#rSkin:hover{
    color: rgb(109, 207, 109);
    -webkit-text-stroke: 1.3px black;
    
}
#rBonding{
    font-family: mogra;
    transition: color 1s ease, -webkit-text-stroke 1s ease, font-size 0.5s ease, color 0.3s ease-out;
    padding: 10px;
}
#rBonding:hover{
    color: rgb(109, 207, 109);
    -webkit-text-stroke: 1.3px black;
    
}
#rHygiene{
    font-family: mogra;
    transition: color 1s ease, -webkit-text-stroke 1s ease, font-size 0.5s ease, color 0.3s ease-out;
    padding: 10px;
}
#rHygiene:hover{
    color: rgb(109, 207, 109);
    -webkit-text-stroke: 1.3px black;
    
}
#rAesthetic{
    font-family: mogra;
    transition: color 1s ease, -webkit-text-stroke 1s ease, font-size 0.5s ease, color 0.3s ease-out;
    padding: 10px;
    
}
#rAesthetic:hover{
    color: rgb(109, 207, 109);
    -webkit-text-stroke: 1.3px black;
    
}
#footerContainer{
    display: flex;
    justify-self: center;
    margin: 10px;
    font-family: Comic Relief
}
#established{
    text-align: center;
}