:root {
    --exhibition: #ff4d40;
}

html {
    font-family: 'Libre Baskerville', serif;
    font-size: 17px;
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
}

p {
    font-size: 1.0rem;
    line-height: 1.6;
}

h1 {
    font-size: 1.0rem;
    font-weight: bold;
}

a {
    color: black;
}

a.logo {
    text-decoration: none;
}

a:link {
    text-decoration: underline;
    text-decoration-color: var(--exhibition);
}

a:visited{
    text-decoration: underline;
    text-decoration-color: var(--exhibition);
}


a:hover{
    background-color: var(--exhibition);
}

section {
    width: 100%;
    height: 100%;
    margin-top: 3%;
    margin-bottom: 3%;
}

img.logo {
    display: block;
    margin-left: auto;
    margin-right: auto }

img.vert {
    overflow: hidden;
}

.imgcaption {
    color: #808080;
}

li {
    line-height: 1.6;
    margin-bottom: 5%;
}

address {
    font-style:normal;
}

.menu{
    padding-left: 3%;
}

.gradient{
    background: rgb(255,255,0);
    background: linear-gradient(90deg, rgba(255,255,0,1) 0%, rgba(93,222,17,1) 15%, rgba(37,207,171,1) 30%, rgba(0,211,255,1) 45%, rgba(64,127,207,1) 60%, rgba(171,17,217,1) 75%, rgba(231,77,0,1) 90%, rgba(255,196,14,1) 100%);
    width: 100%;
    height: auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff; 
    font-size: 24px; 
    text-decoration: none;
    text-align: center;
}

.description{
    padding-left: 20%;
    padding-right: 20%;
    margin-top: 4%;
    margin-bottom: 8%;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

/* Fundraiser 2020 Button  */
.fundraiser {
    position: fixed;
    bottom: 2%;
    right: 2%;
    width: 250px;
    height: 250px;
    background-color: transparent;
    object-fit: contain;
    border: none;
    text-decoration: none;
    border: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -webkit-box-shadow: none;
}

img.fundraiser {
    -webkit-animation: rotation 12s infinite linear;
    animation: rotation 12s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}



@media (max-width:728px)  {
    .description {padding-left: 3%; padding-right: 3%}/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
    .hours {position:relative; padding-left: 3%}
    .vert {max-width: 90vw}
    
    .fundraiser {
        position: relative;
        size: 90vw;
        margin: auto;
        bottom: auto;
        right: auto;
        width: 75vw;
        height: 75vw;
        background-color: transparent;
        object-fit: contain;
        border: none;    /* possible bug in brackets shows thin grey box around img container with trasnform */
        text-decoration: none;
        border: none;
        box-shadow: none;
        -moz-box-shadow: none;
        -o-box-shadow: none;
        -webkit-box-shadow: none;
    }
}

@media (min-width:729px)  {
    .description {padding-left: 15%; padding-right: 15%}/* tablet, landscape iPad, lo-res laptops ands desktops */ 
    .hours {position: fixed; top:0; right: 3%;}
    .vert {max-height: 150vh; padding-right: 3%}
}
@media (min-width:1025px) {
    .description {padding-left:20%; padding-right: 42%}/* big landscape tablets, laptops, and desktops */ }
    .vert {max-height: 100vh}

@media (min-width:1281px) {
    .description {padding-left: 20%; padding-right: 42%;}/* hi-res laptops and desktops */ }
    .vert {max-height: 100vh}