body {
    background-color: #162D3B;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: azure;
}

h1 {
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 65%;
    font-size: 6em;
    border: 1px solid black;
    background-color: #284e66;
    text-shadow:
     3px  3px 0 #000,
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
     letter-spacing: -7px;
}

div {
    font-size: medium;
    max-width: 600px;
}

div.copyright {
    font-size: small;
    border: 1px solid black;
    background-color: #284e66;
    max-width: 100%;
}

a, a:link, a:visited, a:active {
    color: azure;
    text-decoration: underline overline;
    font-size: larger;
}
a:hover {
    text-decoration: none;
    font-size: larger;
}

td {
    border: none;
    vertical-align: top;
}

td.contact {
    border: none;
    vertical-align: middle;
}

table.vids {
    border: none;
    border-spacing: 10px;
}

td.vids {
    border: 1px solid black;
    border-spacing: 10px;
    padding: 2px;
    vertical-align: top;    
}

.biggie {
    font-size: xx-large;
}

.littlie {
    font-size: small;
}

p  {
    max-width: 600px;
}


.video-wrapper {
    position: relative;
    width: 363px;
    height: 204px;
}
.custom-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    background: url('images/play-button.png') no-repeat center center;
    background-size: contain;
    cursor: pointer;
    z-index: 10;
}


@media (max-width: 768px) {
iframe {
    width: 100%;
    height: auto;
}

.custom-thumbnail {
    width: 100%;
    height: auto;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: auto;
}
}