@font-face{
    font-family: cedervillecursive;
    src: url('/cedarville-cursive.regular.ttf')
}
@font-face{
    font-family: filmotypehemlock;
    src: url('/filmotype-hemlock.ttf')
}

@font-face{
    font-family: caterinabold;
    src: url('/Caterina Bold Regular.ttf')
}

@font-face{
    font-family: honeyscriptbold;
    src: url('/HoneyScript-SemiBold.ttf')
}

.title {
    color: #7A8B40;
}

body{
    font-family: baskerville;
	font-size: 14px;
	color: black;
	background-color: #2596be;
    background: url(pets_img/kitten_puppy_wallpaper_tiled.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    background-size:800px;
 }
 
 p{
        font-size:20px;
    }

#main{
    display:grid;
    justify-content:center;
}

#main h1{
        font-family:honeyscriptbold;
        font-size:100px;
        margin: 30px 1px 1px;
        text-shadow: 2px 2px pink, 0 0 30px #93d6dd;
    }

.header{
    Display:flex;
    justify-content:center;
}

.petcontainer{
    display:grid;
    justify-content: left;
    grid-template-columns: 2;
    grid-template-rows:1;
    color:white;
    margin:10px;
}
.pet{
    display:flex;
    flex-direction:row;
}

.pet div{
    grid-column-start: 1;
        grid-column-end:1;
    width:300px;
    height:300px;
    max-width:910px;
    margin:5px;
    border:5px solid;
    border-color: pink;
    border-radius: 20px;
    background-color: #fdf0e0;
    box-sizing:border-box;
    overflow:hidden;
}
.pet div img{
    width:100%;
    height:100%;
    padding:0;
    object-fit: contain;

}
.description{
    grid-column-start: 2;
    grid-column-end:3;
    display:flex;
    flex-direction: column;
    align-items: right;
    border: solid 5px pink;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width:600px;
    min-height:max-content;
    background-color: #fdf0e0;
    color:black;
}
.description h2{
        font-size:33px;
        font-family:caterinabold;
        padding-bottom:5px;
        margin:5px;
    }
    
    h3{font-weight:bold;
        display:inline;
        font-size:18px;
    }
    
    ul{
        list-style-type: none;
        margin:0;
        padding: 1px 10px 10px;
        font-size: 18px;
        overflow:auto;
    }
    li{
        padding:1px 10px 1px;
    }

#footer{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    margin: 0 auto;
    width:200px;
    height: 45px;
    background-color: #fdf0e0;
    border-radius: 10px;
    border: solid;
    border-color: pink;
}