@import url('https://fonts.googleapis.com/css2?family=Agbalumo&display=swap');
*, *:before, *:after {box-sizing: border-box;margin: 0;padding: 0;-webkit-tap-highlight-color: transparent;}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {:root {--width: 100vw; } }
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {:root {--width: 100vw; } }
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {:root {--width: 100vw; } }
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {:root {--width: 100vh; } }
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) { :root {--width: 100vh; } }
#keywords, #inventory, #footer, #ihatespammers, #crosspromo, details > summary, details > p { width: var(--width); margin: 0 auto;}
html,body { height:100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,  Cantarell, "Fira Sans", "Droid Sans",  "Helvetica Neue", Arial, sans-serif,  "Apple Color Emoji", "Segoe UI Emoji",  "Segoe UI Symbol";} 
#mainbody { background-image: url(../src/backdrop.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat;}
body {background-color: #000;}
a, a:hover, a:visited {text-decoration: none; color: mediumpurple; }
h1, h2, h3, h4, h5, h6 {text-align: center; color: #fff; text-decoration: none; font-family: Agbalumo, sans-serif;}
p, summary {color: inherit; }
ul, ul li {list-style: none; list-style-type: none;}
ol {display: block; list-style-type: upper-roman; text-align: left; list-style-position: outside; margin-left: 30px; color: white;}
ol li, #quizquestion p {line-height: 1.45em; margin-bottom: .3em; text-align: left; color: white;}
hr {border: 2px solid white; margin: .5em 0; }
#quizquestion ol li a, #quizquestion ol li a:hover, #quizquestion ol li a:visited {color: black;}
#container { height: var(--width); width: var(--width); margin: 0 auto; background-size: contain; background-repeat: no-repeat; background-position: center center; background-attachment: scroll; }
#container tr {height: 40vh;}
#container td:nth-child(1) {width: 30%;}
#container td:nth-child(2) {width: 40%;}
#container td:nth-child(3) {width: 30%;}
#container h1 {display: none;}
#container img, details img {max-width: 1fr; background-size: contain;}
#bandlogo, #bandprofile, #slug {vertical-align: bottom; width: calc(var(--width)*.3); background-size: contain; background-repeat: no-repeat;}
#bandprofile {box-shadow: 10px 10px 20px black; vertical-align: bottom;}
#bandlogo { -webkit-filter: drop-shadow(1px 1px 15px #fff); filter: drop-shadow(1px 1px 15px #fff);}
#slug { border: 4px solid mediumpurple; color: mediumpurple; text-align: center; font-size: calc(var(--width)*.04); padding: .3em .5em; background-color: #fff; line-height: .9em; border-radius: 3vw; -moz-transform:rotate(3deg);-webkit-transform:rotate(3deg);}
#description {width: calc(var(--width)*.85); margin: 0 auto; padding: 15px 20px; display: block; background: mediumpurple; color: white; font-size: 70%; -moz-transform:rotate(-3deg);-webkit-transform:rotate(-3deg);}

#keywords li {display: inline; }
#keywords li::after {content:', ' }
#keywords li:last-child::after {content:'...' }

#inventory, #footer, #ihatespammers, #crosspromo, #salesranks, #solopromo { clear: both; margin: 0 auto; padding: 1em 0; text-align: center;}
#ihatespammers {background-color: mediumpurple; margin: 0 auto; padding: 10px 20px 30px 20px; border-radius: 50vh;}


.tophideftbside {background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,1) 100%);}

.sidescroll { display: flex; overflow-x: auto; height: calc(var(--width)*.27); align-items: center; animation: slowright 20s infinite; 
background: linear-gradient(to right,  rgba(147,112,219,0) 0%,rgba(147,112,219,1) 12%,rgba(147,112,219,1) 88%,rgba(147,112,219,0) 100%);}
@keyframes slowright { 50% { flex-basis: 100px; } }
.sidescroll li { margin-right: 15px; align-items: center; height: calc(var(--width)*.17); }

.sidescroll li img { margin-right: 15px; align-items: center;}
.sidescroll::-webkit-scrollbar { display: always;}





#crosspromo {vertical-align: middle; }
#crosspromo li {display: inline-block; vertical-align: middle; text-align: center; background-size: contain; height: calc(var(--width)*.17); }
#crosspromo img {width: calc(var(--width)*.17); padding: 0; margin-right: 8px; vertical-align: middle; -webkit-filter: drop-shadow(-1px -1px 5px white); filter: drop-shadow(-1px -1px 5px white); height: inherit; max-height: calc(var(--width)*.17);}


#quizquestion {margin:0 auto; max-width: 640px;}

.flip-card { background-color: transparent; width: 320px; height: 320px; border-radius: 0; perspective: 1000px;}
.flip-card-inner {  position: relative; width: 100%; height: 100%; transition: transform 0.62s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transition-delay: 500ms; transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-card-front img { max-width: 320px;}
.flip-card-back { transform: rotateY(180deg); padding: 45px 73px 0 73px; line-height: 1.3em; text-align: center; }
.flip-card-back p {color: white; background: mediumpurple; border-radius: 20px; border: 3px solid white; padding: 8px 14px; margin: 0 auto;}
.flip-card-back img {-webkit-filter: drop-shadow(-1px -1px 5px black); filter: drop-shadow(-1px -1px 5px black); max-width: 170px; max-height: 170px;}

#sitelogo {display: inline-block; vertical-align: top; background-image: url(/src/FamousFirstNamesDotCom_White800.png); background-color: #000; opacity: .5; background-position: center center; font-size: 0; background-size: contain; background-repeat: no-repeat; height: calc(var(--width)*.19); width: calc(var(--width)*.19); border-radius: 25px; -moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);}

#sitelogo:hover { -webkit-animation-name: wiggle; -ms-animation-name: wiggle; -ms-animation-duration: 1600ms; -webkit-animation-duration: 1600ms; -webkit-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } 
@-webkit-keyframes wiggle { 0% {-webkit-transform: rotate(-10deg);} 25% {-webkit-transform: rotate(20deg);} 50% {-webkit-transform: rotate(-20deg);} 75% {-webkit-transform: rotate(25deg);} 100% {-webkit-transform: rotate(-10deg);} } 
@-ms-keyframes wiggle { 0% {-ms-transform: rotate(-1deg);} 25% {-ms-transform: rotate(2deg);} 50% {-ms-transform: rotate(-2deg);} 75% {-ms-transform: rotate(2.5deg);} 100% {-ms-transform: rotate(-1deg);} } 
@keyframes wiggle { 0% {transform: rotate(-10deg);} 25% {transform: rotate(20deg);} 50% {transform: rotate(-20deg);} 75% {transform: rotate(25deg);} 100% {transform: rotate(-10deg);} }

#footer { text-align: left; padding-bottom: 3em;}
#footer img {height: 10vw; float: left; margin-right: 1em;}

#quizfooter { padding: 2em; text-align: center; margin: 0 auto;}
#quizfooter img {height: 10vw; display: block; text-align: center; margin: 0 auto;}
details > summary { background-color: #111; cursor: pointer; padding: .5rem 1rem; margin: 0 auto; border-radius: 50vh;} 
details > summary > * { display: inline; } 
details > p { margin: 0 auto 1em auto; color: #fff; font-size: 150%; line-height: 1.35em;} 
details[open] summary ~ * { animation: sweep .5s ease-in-out; } 
@keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} } 
summary::marker, details > summary, #mantra h3 { color: mediumpurple; text-align: center; } 

#topsellers, #topsellers p, #topsellers table, #topsellers summary::marker, #topsellers > summary { background-color: #47248f; color: white; }
#topsellers {margin-bottom: 1em; }
#topsellers a, #topsellers a:hover, #topsellers a:visited {text-decoration: underline; color: #c2adeb; }