/* CONTAINERS----------- */

body {
    box-sizing:border-box;
    font: arial, helvetica, sans-serif;
    font-size: 100%;
    background-color: #CCCCCC;
    overflow: hidden;
}
img{
    padding: .35em;
}
h1{
    text-align:center;
}
ul{
    list-style-type:none;
}
a:link{
    color:#000000;
}
a:visited {
    color:#000000;
}
a:hover{
    color:#8f1834;
}
.button{
    width:6em;
    height:1.5em;
    font-size:1em;
    font-family:"Times New Roman";
    border:  solid #000000;
    background-color: #DDDDDD;
    color: #000000;
}

@media only screen and (orientation:portrait){
    span.photo {
        display: flex;
        justify-content: center;
    }
    img{
        width:90%;
    }
    h1{
        font-size:3em;
    }
    ul{
        font-size:3.5em;
        text-align:center;
    }
    li{
        display:inline-block;
        padding: .5em 1em;
        width: 5em;
    }
}

/* Nexus 7 tablet */
@media only screen and (min-width:600px) and (min-height: 800px) and (orientation:portrait){
    body{
        overflow:visible;
    }
    h1{
        font-size:2.5em;
    }
    ul{
        font-size:2.5em;
    }
}

/* iPad Pro 12.9 */
@media only screen and (min-width:900px) and (min-height: 1366px) and (orientation:portrait){
    h1{
        font-size:2em;
    }
    ul{
        font-size:2em;
    }
}

@media only screen and (orientation:landscape){
    h1{
        font-size:2em;
    }
    ul{
        font-size:2em;
    }
}

/* iPhone X */
@media only screen and (min-width:800px) and (min-height: 375px) and (orientation:landscape){
    h1{
        font-size:1.75em;
    }
    ul{
        font-size:1.75em;
    }
}

/* Nexus 7 tablet */
@media only screen and (min-width:800px) and (min-height: 600px) and (orientation:landscape){
    body{
        overflow:visible;
    }
}