@font-face {
    font-family: 'WestCarabao';
    src: url('/fonts/WestCarabao-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: "Arimo", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    /*background: brown url(/images/pam-canyon-buddy.jpg) center center no-repeat;*/
    background-size: cover;
}
header {
    background: url(/images/sw-border.jpg) top left repeat-x;
}
.sancreek-regular {
  font-family: "Sancreek", serif;
  font-weight: 400;
  font-style: normal;
}
.west-carabao {
    font-family: "WestCarabao", sans-serif;
}

h1 {
    font-size:5rem;
}

h2#sub-head {
    margin:0;
    padding:0;
    font-size:2.25rem;
}

h3#contact {
    text-align:center;
    margin-top:0;
    padding-top:0;
    margin-bottom:30px;
    font-size:1.4rem;
}

#about-pamela p {
    padding:5px 0 0;
}

.center {
    text-align:center;
}

ul#photo-set {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    gap:3px;
    margin-left: 0;
    padding-left: 0;
}

#photo-set li {
    height: 52vh;
    flex: 1 1 auto;
}

#photo-set li:last-child {
  flex-grow: 10;
}

#photo-set img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 9 / 16;
}

#border {
    background: url(/images/border-2.png) center left repeat;
    height:50px;
    background-size: contain;
}

div#main-content {
    width:83%;
    margin-left:20px;
}

div#hero-left {
    width:29%;
}

img#hero-right {
    float:right;
    padding-left:20px;
    width:20%;
}
div#main-page {
    display:flex;
    margin-top:30px;
    padding:0 20px
}

/* Standard phone breakpoint */
@media (max-width: 393px) {
  /* iPhone 16 and modern standard phones */

    h1 {font-size:4rem;}
    h2#sub-head {font-size:2rem;}
    h3#contact {font-size:1.2rem;margin:10px 0 10px;}

    div#hero-left {
        width:100%;
    }

    img#hero-right {
        float:none;
        padding-left:0;
        width:100%;
    }

    div#main-page {
        display:block;
        margin-top:10px;
        padding:0 5px
    }

    div#main-content {
        width:100%;
        margin-left:0;
    }
}

/* Larger Plus/Max or small tablet adjustments */
@media (max-width: 440px) {
  /* iPhone 16 Plus / Pro Max wider logical widths */
    
    h1 {font-size:4rem;}
    h2#sub-head {font-size:2rem;}
    h3#contact {font-size:1.2rem;margin:10px 0 10px;}
    
    div#hero-left {
        width:100%;
    }

    img#hero-right {
        float:none;
        padding-left:0;
        width:100%;
    }

    div#main-page {
        display:block;
        margin-top:10px;
        padding:0 5px
    }

    div#main-content {
        width:100%;
        margin-left:0;
    }
}