@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;700&family=Roboto:ital,wght@0,100;1,100&display=swap');
:root {
  --mainBase: 22, 62, 140;
  --mainColor: rgba(var(--mainBase), 1);
  --mainColor90: rgba(var(--mainBase), .9);
  --mainColor80: rgba(var(--mainBase), .8);
  --mainColor50: rgba(var(--mainBase), .5);
  --accentBase: 191, 21, 35;
  --accentColor: rgba(var(--accentBase), 1);
  --accentColor90: rgba(var(--accentBase), .9);
  --accentColor80: rgba(var(--accentBase), .8);
  --accentColor50: rgba(var(--accentBase), .5);
  --medLight:#f2f2f2;
  --actionBase: 0, 119, 191;
  --actionItem: rgba(var(--actionBase), 1);
  --actionItem90: rgba(var(--actionBase), .9);
  --actionItem80: rgba(var(--actionBase), .8);
  --actionItem50: rgba(var(--actionBase), .5);
  --gradientDark:var(--mainColor90);
  --gradientLight:rgba(22, 62, 140,.3);
  --darkBase: 20, 51, 115;
  --darkest:rgba(var(--darkBase), 1);
  --darkest90:rgba(var(--darkBase), .9);	
  --darkest80:rgba(var(--darkBase), .8);	
  --darkest50: rgba(var(--darkBase), .5);
  --blackBase: 0, 0, 0;
  --black: rgba(var(--blackBase), 1);
  --black90: rgba(var(--blackBase), .9);
  --black80: rgba(var(--blackBase), .8);
  --black50: rgba(var(--blackBase), .5);
  --black20: rgba(var(--blackBase), .2);
  --lightest:#fff;
  --lightTrans: rgb(255 255 255 / 75%);
  --darkTrans: rgb(2 82 144 / 75%);
} 
html, body {overflow-x: hidden;}
html {scroll-behavior: smooth;}
body{font-family: Oswald,"Helvetica Neue", Helvetica, Arial, Gotham, "sans-serif";margin:0;padding:0;background: var(--darkest);width: 100%;position:relative;}
#dark-brown.intro, 
#brown.intro, 
#light-brown.intro,
#dark-hair.intro,
#blonde.intro, 
#brown.intro, 
#red.intro, 
#olive.intro
{opacity:0;}
#loader {position: fixed;bottom: 0;left: 0;width: 100%;height: 100vh;transition: all 2s ease-in;margin:0 auto;background:  var(--darkest) url(../images/thin-logo-alt.png) center center no-repeat;z-index:9999;background-size: 80%;}
#loader img {text-align: center;}
#dark-brown #loader, 
#brown #loader, 
#light-brown #loader,
#dark-hair #loader,
#blonde #loader, 
#brown #loader, 
#red #loader, 
#olive #loader 
{transition:all 1s ease-in;}
.overlay {transition: all 6s ease-in;}
.overlay .gallery.grid div {background: color:var(--lightTrans);padding: 2em;b}
.overlay h1, .overlay h2, .overlay h3 {color:#fff; text-align:center;}
.overlay .site-description {font-size: 1.4rem;text-transform: uppercase;}
.overlay button {background: var(--darkTrans);border: none;box-shadow: 2px 0px 9px var(--black50);padding: 20px;cursor:pointer;border:2px solid transparent;}
.overlay button:hover {background: var(--darkest50);border:2px solid var(--accentColor);}
.overlay button img {max-width: 100%;}
a, a:visited {color:var(--lightest);text-decoration:none;font-weight:bold;border-bottom:2px solid transparent;transition:border .3s ease-in;}
a:hover {color:var(--actionItem);}
header{width:100%;height:75px;z-index: 10;margin:0 auto 40px;top:0px;}
header.fixed-header {position:fixed;background:var(--mainColor80);top:0;left:0;height: 75px;margin-bottom:0;}
header h1.logo {margin:0;padding:1rem 0 0 1rem;}
#dark-brown header .logo a  {background:url(../images/logo-dark-brown.png) no-repeat 0 0;display:block;position: absolute;max-width: 50%; width:250px; height: 110px; background-size: 100%;}
#brown header .logo a {background:url(../images/logo-brown.png) no-repeat 0 0;display:block;position: absolute;max-width: 50%; width:250px; height: 110px; background-size: 100%;}
#light-brown header .logo a {background:url(../images/logo-light-brown.png) no-repeat 0 0;display:block;position: absolute;max-width: 50%; width:250px; height: 110px; background-size: 100%;}
#dark-hair header .logo a {background:url(../images/logo-dark-hair.png) no-repeat 0 0;display:block;position: absolute;max-width: 50%; width:250px; height: 110px; background-size: 100%;}
#blonde header .logo a {background:url(../images/logo-blonde.png) no-repeat 0 0;display:block;position: absolute;max-width: 50%; width:250px; height: 110px; background-size: 100%;}
#brown-hair header .logo a {background:url(../images/logo-brown-hair.png) no-repeat 0 0;display:block;position: absolute;max-width: 50%; width:250px; height: 110px; background-size: 100%;}
#red header .logo a {background:url(../images/logo-red-hair.png) no-repeat 0 0;display:block;position: absolute;max-width: 50%; width:250px; height: 110px; background-size: 100%;}
#olive header .logo a {background:url(../images/logo-olive.png) no-repeat 0 0;display:block;position: absolute;max-width: 50%; width:250px; height: 110px; background-size: 100%;}

header .logo a span {display:none;}
header h2.tagline {display:none;}
header .site-description {text-align:center; color:var(--lightest);font-size: 1.4rem;font-weight: normal;text-transform:uppercase;position: absolute;right: 20px;top: 75px;display:inline-block;}
header.fixed-header .site-description {display:none;}
header.fixed-header .logo a,
#dark-brown header.fixed-header .logo a, 
#brown header.fixed-header .logo a, 
#light-brown header.fixed-header .logo a,
#dark-hair header.fixed-header .logo a,
#blonde header.fixed-header .logo a, 
#brown header.fixed-header .logo a, 
#red header.fixed-header .logo a, 
#olive header.fixed-header .logo a 
{background:url("../images/thin-logo-alt.png") no-repeat 0 5px;height:45px;background-size: 100%;}
header nav .fa-solid {display: block;color: var(--lightest);position: absolute;height: 30px;width: 30px;right:1rem;}
header nav #open {font-size:2rem;}
header nav #close {display:none;font-size:2rem;}
header nav ul {list-style:none;margin: 0;padding: 0;height:0;}
header nav ul {display:none;}
header nav ul li:after {content: "|";color: var(--lightest);font-weight: bold;font-size: 1.5rem;padding: 0 0.5rem;}
header nav ul li:last-child:after {display:none;}
header nav ul li a, header nav ul li a:visited{font-family: Oswald,"Helvetica Neue", Helvetica, Arial, Gotham, "sans-serif";color:var(--lightest);}
header nav ul li a:hover, header nav ul li a.active {border-bottom:2px solid var(--actionItem);}
header #icons {display:none;}
header #icons a span {display:none;}
header nav.expanded {background: var(--mainColor);position: fixed;z-index: 1;display: block;width: 100%;height: 100vh;top: 0;left: 0;padding-top: 1rem;}
header nav.expanded #open {display:none;}
header nav.expanded #close {display:block;}
header nav.expanded ul {display: block;padding: 2rem;}
header nav.expanded ul li a {font-size: 4rem;font-weight:normal;}
header nav.expanded ul li:after {display: none;}
header #icons.expanded {display: flex;position: fixed;bottom: 10px;z-index: 9;width: 100%;justify-content: space-around;font-size: 2rem;}
h1{font-size: 2rem;font-weight: normal;}
h2{font-size: 1.5rem;font-weight: normal;color:var(--lightest);}
h3{font-size: 1.4rem;font-weight: normal;color:var(--lightest);}
h4{font-size: 1.3rem;font-weight: normal;color:var(--lightest);}
h5{font-size: 1.2rem;font-weight: normal;color:var(--lightest);text-align:right;margin-right: 2%;}
main {display:block;width:auto;;height:auto;margin:0 auto;}
main .top a:link, main .top a:visited {color:var(--lightest); font-weight:normal;border-bottom: 2px solid var(--medLight);font-size:1.3rem;font-family: 'Oswald';}
main .top a:hover, main.top a:active {border-bottom:var(--lightest);}
main .top h2.tagline {display:none;}

main .top ul {padding-left:1rem;}
main .top button {padding: 1rem;border: 2px solid var(--actionItem);background: var(--darkest);color: var(--lightest);font-weight: bold;text-transform: uppercase;cursor:pointer;margin: 0 auto 1rem;display: block;}
main .top button:hover {background:var(--lightest);border: 2px solid var(--lightest);color:var(--darkest);}
main .top .more button {border-radius: 50%;width: 40px;height: 40px;text-align: center;position: absolute;left: 1rem;padding:0;font-size:1.2rem;}
main .top .more button span {display:none;}

main .top .definition {padding: 1rem;}
main .top .definition p, main .top .definition li {font-size:1.4rem;color:var(--lightest);}
main .top .flexWrap div {position:relative;}
main .top .flexWrap div h3 {font-weight: bold;}
main .top .flexWrap div a, main .top .flexWrap div a:visited {color:var(--lightest);text-decoration:none;font-weight:normal;border-bottom:2px dotted var(--lightest);transition:border .3s ease-in;}
main .top .flexWrap div a:hover {color:var(--medLight);border-bottom:2px solid var(--darkest);}
span + p.more {width:100%;text-align:right;font-size:1.3rem;font-family: 'Oswald';}
blockquote + p.more {width:100%;text-align:right;font-size:1.3rem;font-family: 'Oswald';}
main .top .flexWrap .jokes a:hover {border-bottom:2px solid var(--actionItem);}
main .top .flexWrap .definition a:hover {border-bottom:2px solid var(--actionItem);}
main .top .definition .stash {display:none;}
main .jokes {display:block;width:auto;;height:auto;padding:1em;margin: 0 auto;background:var(--darkest50);}	
main .jokes img {width: 50px;position: absolute;right: 1.5rem;top: 1rem;}
main .quotes {display:block;width:auto;;height:auto;padding:1em;margin: 0 auto;background:var(--actionItem50);}	
main .quotes blockquote {position: relative; text-align: center;padding: 1rem 1.2rem;width: 80%;  margin: 1rem auto 2rem;background:linear-gradient(to right, var(--lightest) 4px, transparent 4px) 0 100%,linear-gradient(to left, var(--lightest) 4px, transparent 4px) 100% 0,linear-gradient(to bottom, var(--lightest) 4px, transparent 4px) 100% 0,linear-gradient(to top, var(--lightest) 4px, transparent 4px) 0 100%;background-repeat: no-repeat;background-size: 20px 20px;}
main .quotes blockquote:before,
main .quotes blockquote:after{font-family: FontAwesome;position: absolute;color: var(--lightest);font-size: 2.5rem;}
main .quotes blockquote:before{content: "\f10d";top: -12px;margin-right: -20px;right: 100%;}
main .quotes blockquote:after{content: "\f10e";margin-left: -20px;left: 100%;  top: auto;bottom: -20px;}
main .quotes cite {color:var(--lightest);}
main .top .arrow {display:none;}

main #rescues {color:var(--lightest);background:var(--actionItem);width:auto;padding-bottom: 2%;}

#background-video {width: 100vw;height: 100vh;object-fit: cover;position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: -1;opacity:.25;}

main #rescues h2 {padding: 2% 5%;}
main #rescues .videoWrapper {max-width: 320px; width:100%;height:auto;margin:0 auto; }
main #rescues .videoWrapper iframe {max-width: 320px; width:100%;height: 100%;border:none;margin:0 auto; padding:0;}	

main #rescues .grid {display:grid ;width: 98%;max-width: 980px;margin: 0 auto;align-content: stretch;justify-content: space-evenly;align-items: baseline;justify-items: center;}
main #rescues .grid iframe {border:none;}
main #rescues .more {text-align:right;font-size:1.3rem;font-family: 'Oswald';margin-right:5%;}
main #rescues .more a:link, main #rescues .more a:visited {color:var(--lightest);text-decoration:none;font-weight:normal;border-bottom:2px dotted var(--lightest);transition:border .3s ease-in;}
main #rescues .more a:hover, main #rescues .more a:active {border-bottom:2px solid var(--lightest);}

main .sub {color:var(--lightest);width:auto;padding-bottom: 2%;margin:10% 0 5%;}
main .sub h2 {text-align:center;}
main .sub #quoteslist {display: flex;justify-content: space-evenly;align-content: center;align-items: stretch;flex-wrap: wrap;flex-direction: column;}
main .sub #quoteslist div {flex-basis:20%;margin: 0;padding: 0 1rem;background:var(--darkest) url(../images/bowtie.png) no-repeat 98% 2%;background-size:80px;}
main .sub #quoteslist div:nth-child(even){background: var(--actionItem) url(../images/shoes.png) no-repeat 2% 98%;background-size:80px;}
main .sub #quoteslist div:nth-child(3n){background-color: var(--accentColor);}
main .sub blockquote {position: relative; text-align: center;padding: 1rem 1.2rem;width: 80%;  margin: 1rem auto 2rem;background:linear-gradient(to right, var(--lightest) 4px, transparent 4px) 0 100%,linear-gradient(to left, transparent 4px, transparent 4px) 100% 0,linear-gradient(to bottom, transparent 4px, transparent 4px) 100% 0,linear-gradient(to top, var(--lightest) 4px, transparent 4px) 0 100%;background-repeat: no-repeat;background-size: 20px 20px;}
main .sub #quoteslist div:nth-child(even) blockquote {background:linear-gradient(to right, transparent 4px, transparent 4px) 0 100%,linear-gradient(to left, var(--lightest) 4px, transparent 4px) 100% 0,linear-gradient(to bottom, var(--lightest) 4px, transparent 4px) 100% 0,linear-gradient(to top, transparent 4px, transparent 4px) 0 100%;background-repeat: no-repeat;background-size: 20px 20px;}

main .sub blockquote:before,
main .sub blockquote:after{font-family: FontAwesome;position: absolute;color: var(--lightest);font-size: 2.5rem;}
main .sub blockquote:before{content: "\f10d";top: -12px;margin-right: -20px;right: 100%;}
main .sub blockquote:after{content: "\f10e";margin-left: -20px;left: 100%;  top: auto;bottom: -20px;}
main .sub cite {color:var(--lightest);}

main .sub #quoteslist h3 {font-size: 1.6rem;line-height: 1.2;}
main .sub #quoteslist p {font-size: 1.4rem;}
main .sub #jokeslist {display: flex;justify-content: space-evenly;align-content: center;align-items: stretch;flex-wrap: wrap;flex-direction: column;}
main .sub #jokeslist div {flex-basis:20%;border-bottom: 2px solid var(--actionItem);margin: 1% 0;padding: 0 1rem;background:var(--darkest);}
main .sub #jokeslist h3 {font-size: 1.6rem;line-height: 1.2;}
main .sub #jokeslist p {font-size: 1.3rem;}
main .sub #jokeslist img {width:50px;margin-bottom: 1rem;}
.overlay .grid, main .sub .grid {display: flex;flex-wrap:wrap;width: auto;margin: 0 auto;grid-template-columns:1fr 1fr; grid-gap:1rem;justify-items: center;}
main .sub .grid iframe {border:none;}

main .contact form {width:400px;margin:0 auto;max-width:96%;}
main .contact label {font-size: 1.5rem;}
main .contact input,
main .contact button
{padding: 1rem 1.2rem;border: none;margin-top: 0.5rem;width:90%;font-size:1.2rem;}
main .contact input[type=submit],
main .contact button 
{background:var(--actionItem);color:var(--lightest);font-weight:bold;padding: 1rem;cursor:pointer;width:unset;text-transform: uppercase;margin-top: 1rem;display: block;}
main .contact button:hover {background:var(--actionItem50);}
main .contact input[type=radio] {width:auto;display:inline;}
main .contact input[type=radio] + span {font-size:1.5rem;}
main .contact textarea {padding: 0.5rem;border: none;margin-top: 0.5rem;width: 96%;font-size:1.2rem;}
main .contact .hint{display:none;color:red}
main .contact .hidden{display:none;}
main .contact #thanks {display:none;width:100%;height: 100vh; position:fixed; z-index: 0; background: var(--black80);top: 0;left: 0;opacity:0;}
main .contact #thanks div {display:flex;width:50%;height: 400px; position:fixed; z-index: 9999; background: var(--actionItem);color: var(--lightest);top: 160px;left: calc(100% - 75%);align-content: center;justify-content: center;align-items: stretch;flex-direction: column;}
main .contact #thanks div h4 {text-align: center;display: flex;justify-content: center;align-content: center;}
#joke{padding: 15px;background-color: var(--accentColor);color:var(--lightest)}
#joke input {width:90%;}
#quote{padding: 15px;background-color: var(--black50);color:var(--lightest)}
#quote input {width:90%;}
.overlay .gallery, main .gallery {color:var(--lightest);}
main .static {font-size: 1.4rem;width: 700px;max-width: 90%;margin: 0 auto;}
main .static p {font-family:"Oswald";}

p, li {font-family: Roboto;}
fieldset {width: max-content;}
#overlay {background: var(--mainColor80);z-index: 99;width:100%;height:100%;position:fixed;top:0;left:0;}
#overlay .overlay-wrap {position: absolute;top: calc(50% - 82px);left: 5%;width: calc(100% - 25%);padding: 1rem;background: var(--accentColor);color:var(--lightest);z-index: 100;box-shadow: 0px 5px 10px var(--darkest);}
#overlay .close {display:block;position: absolute;top: -15px;right: -15px;font-family: "Arial Black", Arial, sans-serif;color: var(--accentColor);font-size: 1.5rem;background: var(--lightest);border-radius: 100%;padding: 5px;width: 30px;height: 30px;text-align: center;line-height: 30px;border: 2px solid var(--accentColor);}
#overlay .close:hover {background:var(--mainColor);color:var(--lightest);}
#overlay input {padding: 1rem;border: none;margin-top: 0.5rem;}
#overlay input[type=submit] {background:var(--actionItem);color:var(--mainColor);font-weight:bold;padding: 1rem;cursor:pointer;}
#overlay input[type=submit]:hover {background:var(--lightest);}
footer, .copyright {display:none;}	

@media (orientation: landscape) {
header nav.expanded ul li a {font-size: 2.25rem;}
header #icons.expanded {position: fixed;bottom: 10px;z-index: 9;width: 100%;justify-content: space-around;font-size: 2rem;top:unset;right:unset;}
}

@media only screen and (min-width: 50em) {
html, body {overflow-x:visible;}
body {background: linear-gradient(180deg, var(--black50) 0%, var(--darkest50) 50%, var(--darkest50) 100%), url(../images/bgrd.jpg) no-repeat 98% 5%;background-size:cover;background-attachment: fixed;} 
#loader {background-size: auto;}
.overlay .site-description {font-size: 1.7rem;}
header{width:auto;height:0px;padding:1rem;z-index: 10;margin:0 auto 60px;overflow:visible;top:-142px;}
header.fixed-header {position:sticky;background:var(--mainColor80);top:0;left:0;height: 60px;transition: all 1s ease-in;margin-bottom:0;}
header h1.logo {padding:0;}
header h2.tagline {font-size: 1.2rem; text-transform: uppercase;margin:0;padding:0;line-height:1;left: 125px;display: inline-block;position:absolute;top: 100px;}
header.fixed-header h2.tagline {display:none;}
header #icons {display: flex;position: absolute;top: 1rem;right: 2%;}
header #icons a {width: 30px;height: 30px;text-align: center; border-radius: 50%; padding:.25rem; border: 2px solid;margin:.2rem;}
header nav {display: flex;align-content: stretch;justify-content: space-around;align-items: center;width: auto;background: none;position: static;height: auto;}
header nav #open, header nav #close, .expanded {display:none;}
header nav ul {display:block;list-style:none;margin: 0;padding: 0;height:unset;position:unset;}
header nav ul li {display:inline-block;line-height:1;font-size:1.5rem;}
header nav ul li:after {content: "|";color: var(--lightest);font-weight: bold;font-size: 1.5rem;padding: 0 0.5rem;}
header nav ul li:last-child:after {display:none;}
header nav ul li a, header nav ul li a:visited{color:var(--lightest);}
header nav ul li a:hover{color:var(--medLight);}
header .site-description {font-size: 1.7rem;position:static;display:block;}
	
h1{font-size: 3.5rem;}
h2{font-size: 2.2rem;}
h3{font-size: 1.9rem;}
h4{font-size: 1.6rem;line-height: 1.3;}
h5{font-size: 1.5rem;}
p, li {line-height: 1.2;padding-bottom: 1rem;}  
main .top {display:block;width:auto;max-width:96%;;height:auto;min-height:calc(100vh - 110px);padding:1em;margin: 0 auto;}	
main .top .flexWrap {display:flex;justify-content: space-around;margin: 5% 5% 0;}
main .top .flexWrap div {width:32%;margin:0 .5%;color:var(--lightest);box-shadow: -5px -5px 5px var(--black50);}
main .top .flexWrap p {text-align: right;position:absolute;bottom:0;right:5%;}
main .top .jokes, main .top .quotes, main .top .definition {padding: 2%;}  
main .jokes img {top: unset; bottom: 4rem;}
main .top .more button {left:3rem;}	
main .top .definition {background: var(--accentColor80);display: inline-block;}  
main .top .definition .stash {display:block;position:absolute;z-index:2;top:-65px;right:-100px;background: url("../images/mustache.png") no-repeat 0 0;background-size: 300px;text-indent: -9999em;width:300px;height:125px;}
main .top .definition a {line-height:1.3;}
main .top .arrow {display:block;text-align: center;margin: 8% 0;color:var(--lightest);}
main .top .arrow.bounce span {display:none;}
main .top .arrow.bounce a {font-size:3rem;color:var(--lightest);border-bottom:none;}	
main .top .bounce {-moz-animation: bounce 2s infinite;-webkit-animation: bounce 2s infinite;animation: bounce 2s infinite;}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

main .quotes blockquote {margin: 0rem auto 4rem;}	
main #rescues {width:auto;height:auto;min-height:calc(100vh - 92px);padding:100px 20% 1em;margin: 0 auto;background: var(--actionItem);}	
main #rescues h2 {font-weight: bold;padding:0;}
main #rescues .videoWrapper {position: relative;padding-bottom: 56.25%; padding-top: 25px;height: 0;width:auto;max-width:unset;}
main #rescues .videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}	
main #rescues .videoWrapper {position: relative;padding-bottom: 56.25%; padding-top: 25px;height: 0;}
main #rescues .videoWrapper iframe {position: absolute;top: 0;left: 0;max-width: 100%;height: 100%;border:none;margin:0; padding:0;}	
main #rescues .grid{grid-template-columns: 1fr 1fr;grid-gap: 1rem;}

main .sub {min-height: calc(100vh - 550px);}
main .sub #quoteslist {flex-direction: row;}	
main .sub #quoteslist div {margin: 1% 0;}
main .sub #jokeslist {flex-direction: row;}	
main .sub #quoteslist div, main .sub #jokeslist div {border:none;box-shadow: 2px 0px 9px var(--black50);}
main .sub #jokeslist div {position:relative;}
main .sub #jokeslist p {margin-right: 3rem;}
main .sub #jokeslist img {position: absolute;bottom: 0;right: 3%;}

.overlay .grid, main .sub .grid {display: grid;flex-wrap:nowrap;width: auto;margin: 0 auto;grid-template-columns:0fr 0fr; grid-gap:2rem;justify-items: center;justify-content: center;}
.overlay .grid {grid-template-columns: 1fr 1fr 1fr 1fr;width: 90%;grid-gap: 0rem;}
.overlay .grid img {max-width:400px; width:100%;}

main .contact input {width:95%;}
main .contact input[type=submit] {background:var(--actionItem);color:var(--lightest);font-weight:bold;padding: 1rem;cursor:pointer;width:unset;}
main .contact textarea {padding: 1rem;border: none;margin-top: 0.5rem;width: 96%;}
	
#overlay .overlay-wrap {top: calc(50% - 82px);left: calc(50% - 200px);width: 75%;max-width:400px;}
footer {width:auto;background: var(--accentColor);margin:0;padding:1rem;padding: 1rem 2%;display: flex;align-items: center;justify-content: space-evenly;}
#dark-brown footer div:nth-child(1)  {background:url(../images/big-daddio-dark-brown-alt.png) no-repeat 0px 0px;width: 150px;height: 150px;background-size:150px;}
#brown footer div:nth-child(1) {background:url(../images/big-daddio-brown-alt.png) no-repeat 0px 0px;width: 150px;height: 150px;background-size:150px;}
#light-brown footer div:nth-child(1) {background:url(../images/big-daddio-light-brown-alt.png) no-repeat 0px 0px;width: 150px;height: 150px;background-size:150px;}
#dark-hair footer div:nth-child(1) {background:url(../images/big-daddio-dark-hair-alt.png) no-repeat 0px 0px;width: 150px;height: 150px;background-size:150px;}
#blonde footer div:nth-child(1) {background:url(../images/big-daddio-blonde-alt.png) no-repeat 0px 0px;width: 150px;height: 150px;background-size:150px;}
#brown-hair footer div:nth-child(1) {background:url(../images/big-daddio-brown-hair-alt.png) no-repeat 0px 0px;width: 150px;height: 150px;background-size:150px;}
#red footer div:nth-child(1) {background:url(../images/big-daddio-red-hair-alt.png) no-repeat 0px 0px;width: 150px;height: 150px;background-size:150px;}
#olive footer div:nth-child(1) {background:url(../images/big-daddio-olive-alt.png) no-repeat 0px 0px;width: 150px;height: 150px;background-size:150px;}
footer div:nth-child(2) ul li {display:inline;}	
footer div:nth-child(2) ul li a {font-weight: bold;font-family: 'Oswald';font-size: 1.5rem;margin: 1rem;}	
footer div:nth-child(3) ul li {display:inline;}	
footer div:nth-child(3) ul li a {display:inline-flex;border: 2px solid var(--lightest);border-radius: 50%;padding: 0.25rem;margin: 0.2rem;width:30px;height:30px;text-align: center;align-items: center;justify-content: center;}	
footer ul {list-style: none;}
footer a {border-bottom:none;}
footer a span {display:none;}
.copyright {display:block;width:auto;background: var(--black);color:var(--lightest); text-align:center; padding: 1rem;}
}