@media (min-width:1082px) {
    html {
    height: 100%;
}
body {
    padding: 3%;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:whitesmoke;
    background-image: url("stray2.JPG");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

h1 {
    color: #e6b4cf;
    font-size: 36pt;
    font-style: bold;
}
h2 {
    color: #e6b4cf;
    font-size: 30pt;
    font-style: italic;
    text-align: left;
    width: 28%;
}
p {
    width: 28%;
    font-size: 1.5rem;
    text-align: left;
    line-height: 1.5;
    color: #a51461;
    mix-blend-mode:darken;
}
a  {
    width: 28%;
    font-size: 1.5rem;
    font-style: oblique;
    text-align: left;
    line-height: 1.5;
    color: #f03599;
    transition: color 500ms;
}
a:hover  {
    width: 28%;
    font-size: 1.5rem;
    font-style: oblique;
    text-align: left;
    line-height: 1.5;
    color: #7e4bf4;
}
.logo{
    width: 28%;
    transition: width 500ms, filter 500ms;
}
.logo:hover{
    width: 28%;
    filter: drop-shadow(3px 3px 4px #9a1960);
}

div.scroll-container {
    width: 80%;
    height: 50%;
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
background-color: #ffffff;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding-top: 0;
padding-bottom: 0;
}

div.scroll-container img {
padding: 0px;
height:100%;
}
}

@media (max-width:1081px) {
    html {
        height: 100%;
    }
    body {
        padding: 3%;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        color:whitesmoke;
        background-image: url("stray2.JPG");
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    
    h1 {
        color: #e6b4cf;
        font-size: 36pt;
        font-style: bold;
    }
    h2 {
        color: #e6b4cf;
        font-size: 30pt;
        font-style: italic;
        text-align: left;
        width: 28%;
    }
    p {
        width: 60%;
        font-size: 1.5rem;
        text-align: left;
        line-height: 1.5;
        color: #a51461;
    }
    a  {
        width: 28%;
        font-size: 1.5rem;
        font-style: oblique;
        text-align: left;
        line-height: 1.5;
        color: #e6b4cf;
        transition: color 500ms;
    }
    a:hover  {
        width: 28%;
        font-size: 1.5rem;
        font-style: oblique;
        text-align: left;
        line-height: 1.5;
        color: #7e4bf4;
    }
    .logo{
        width: 60%;
        mix-blend-mode: multiply;
        transition: width 500ms, filter 500ms;
    }
    .logo:hover{
        width: 30%;
        filter: drop-shadow(3px 3px 4px #9a1960);
    
    }
    
    div.scroll-container {
        width: 80%;
        height: 50%;
        display:block;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
    background-color: #ffffff;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    }
    
    div.scroll-container img {
    padding: 0px;
    height:100%;
    }
    
    }