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

h1{
    text-align: center;
    color: #F5C9B0;
    font-family: "Felipa", sans-serif;
    margin-bottom: 5%;
    font-size: 60px;
}

body{
    background-color: #1C352D;
    color: rgb(249, 236, 221);
    font-family: "Tinos", sans-serif;
    margin: 50px 150px;
    line-height: 1.5;
}

p{
    padding: 15px 0px;
}

nav{
    background-color: #F5C9B0;
    text-align: center;
}
nav:hover{
    background-color: #A6B28B;
    border: 5px solid #F9F6F3;
}

.tennis_nav{
   padding: 15px 0px;
}

.pictures_tennis{
    display: flex;
}

.pictures_tennis div{
    flex: auto;
    
}

section.pictures_tennis div:nth-child(1) figure{
    background-image: url(/cis195/images/tennis_2.jpg);
    height: 230px; width: 230px;
    border-radius: 50%;
    background-size: 160%;
    background-position: 60% 0%;
    border: 2px solid #A6B28B;
}

section.pictures_tennis div:nth-child(2) figure{
    background-image: url(/cis195/images/tennis_1.jpg);
    height: 230px; width: 230px;
    border-radius: 50%;
    background-size: 180%;
    background-position: -10% 0%;
    border: 2px solid #A6B28B;
}

section.pictures_tennis div:nth-child(3) figure{
    background-image: url(/cis195/images/tennis_3.jpg);
    height: 230px; width: 230px;
     border-radius: 50%;
     background-size: 150%;
     border: 2px solid #A6B28B;
}


section.pictures_tennis div:nth-child(4) figure{
    background-image: url(/cis195/images/tennis_4.jpg);
    height: 230px; width: 230px;
     border-radius: 50%;
     background-size: 100%;
     background-position: 0% 40%;
     border: 2px solid #A6B28B;
}

.photos{
    display: flex;
    padding: 20px 20px;
    justify-content: center;
    
}

.photos figure{
    flex: 0 0 auto;
    width: 300px;
    aspect-ratio: 1/1;
}

.photos figure:first-child{
    background-image: url(/cis195/images/federer.jpg);
    border: 2px solid #F9F6F3;
    position: right;
    background-size: cover;
    background-position: 25% center;
}

.photos figure:last-child{
    background-image: url(/cis195/images/oldtennis.jpg);
    border: 2px solid #F9F6F3;
    position: left;
    background-size: cover;
    background-position: center;
}

.photos figcaption{
    position: absolute;
    width: 100%;
    color: #F5C9B0;
    left: 16%
}
footer{
    background-color: #A6B28B;
    color: #1C352D;
    text-align: center;
    margin-top: 15px;
}