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

/* ====== Mobile Styles and Larger ======*/

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

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

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

p{
    padding: 12px 0px;
}

.pictures_tennis{
    display: flex;
    flex-flow: row wrap;
}

.pictures_tennis div{
    flex: auto;
}

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

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

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


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

.note{
    font-size: 11pt;
}

.player_table{ 
    background-color: #A6B28B;
    margin: 4px auto;
}

.player_table th, tr{
    min-width: 100px;
    padding: 4px 0px;
}

.player_table td{
    background-color: #A6B28B;
    text-align: center;
    font-weight: bold;
    color: #F9F6F3;
}

#special{
    box-shadow: 0px 0px 8px#e03a8f;
}

.player_table th{
    color: #1C352D;
}

.opens_table{
    margin: 12px auto;
    border-collapse: collapse;
}

.opens_table th, tr{
    min-width: 100px;
    padding: 4px 4px;
}

.opens_table td{
    text-align: center;
    padding: 6px;
    border-bottom: 3px solid #F9F6F3;
}

.opens_table th{
    background-color: #F5C9B0;
    color: #333;
}

footer{
    background-color: #A6B28B;
    color: #1C352D;
    text-align: center;
    margin-top: 15px;
}

/* ======= Landscape Tablet and Larger ====== */
@media screen and (min-width: 1020px){

body{
    margin: 0px 150px;
    font-size: 14pt;
}

h1{
    font-size: 60px;
    margin-top: 40px;
}

section.pictures_tennis div:nth-child(1) figure{
    height: 230px; width: 230px;
}

section.pictures_tennis div:nth-child(2) figure{
    height: 230px; width: 230px;
}

section.pictures_tennis div:nth-child(3) figure{
    height: 230px; width: 230px;
}

section.pictures_tennis div:nth-child(4) figure{
    height: 230px; width: 230px;
}

.player_table th, tr{
    min-width: 150px;
    padding: 4px 0px;
}

footer{
    margin-bottom: 25px;
}

}