@import "/css/en-US.css";
@import "/css/de.css";
@import "/css/fr.css";
@import "/css/it.css";
@import "/css/es.css";
@import "/css/ja.css";

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {:root {--width: 90vw; } }
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {:root {--width: 90vw; } }
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {:root {--width: 90vh; } }
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {:root {--width: 90vh; } }
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) { :root {--width: 90vh; } }
:root { --rb: #da3; --pr: #563; --pk: #9b5; --og: #86d; --nb: #b92; --hb: #c80; --cr: #299; --br: #157; --bk: #444; --as: #bbb;}

*, *:before, *:after {box-sizing: border-box;margin: 0;padding: 0;-webkit-tap-highlight-color: transparent;}
html {scroll-behavior: smooth;}
html,body {font-family: "Noto Sans Display", sans-serif; height:100%; transition: all .4s ease-in-out; } 
body { font-family: "Noto Sans Display", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: white; text-align: center; max-width: var(--width); margin: 15px auto;}
#landing { background-image: url(/img/tile.png); background-repeat: repeat; background-position: center center; background-attachment: scroll; -webkit-animation: color-loop 30s infinite; -moz-animation: color-loop 30s infinite; animation: color-loop 30s infinite;}
@-webkit-keyframes color-loop {0% {background-color: var(--hb);} 25% {background-color: var(--pk);} 50% {background-color: var(--cr);} 75% {background-color: var(--og);} 100% {background-color: var(--hb);} }
 @-moz-keyframes color-loop {0% {background-color: var(--hb);} 25% {background-color: var(--pk);} 50% {background-color: var(--cr);} 75% {background-color: var(--og);} 100% {background-color: var(--hb);} }
  @keyframes color-loop {0% {background-color: var(--hb);} 25% {background-color: var(--pk);} 50% {background-color: var(--cr);} 75% {background-color: var(--og);} 100% {background-color: var(--hb);} }
#landing h2 {padding-bottom: .75em; line-height: 1.15em;}
#circle { min-width: 520px; min-height: 520px; border-radius: 50%; width: var(--width); height: var(--width); background-color: rgba(255,255,255,.9);  backdrop-filter: blur(3px);padding: 7% 0; clear: both;}
#circle h1 { padding: 0; font-size: 500%; width: inherit; margin: 0 auto 8px auto; text-align: center; line-height: .85em; color: #c00; letter-spacing: -5px; clear: both;}
.row {display: block; margin: 25px auto; }
a, a:hover, a:visited { color: inherit;}
a:hover { color: #c00; text-decoration: underline; }
h1, h2, h3 {text-shadow: 1px 1px 3px #000; line-height: 1.05em;}
p {text-shadow: 1px 1px 3px #000; line-height: 1.35em;}
select {padding: 3px 8px; border-radius: 6px; background-color: white; border: none;}

#lang {float: left; clear: both; display: inline-block;}
#container { height: var(--width); width: var(--width); margin: 0 auto; background-size: contain; background-repeat: no-repeat; background-position: center center; background-attachment: scroll; -webkit-filter: drop-shadow(6px 6px 15px rgba(0,0,0,0.3)); filter: drop-shadow(6px 6px 15px rgba(0,0,0,0.3)); -moz-box-shadow: drop-shadow(6px 6px 15px rgba(0,0,0,0.3)); }
#container tr {height: calc(var(--width) * .25); vertical-align: center;}
#container tr:first-child {vertical-align: top;}
#container tr:nth-child(2) {height: calc(var(--width) * .5);}
#container td:nth-child(1) {width: 25%;}
#container td:nth-child(2) {width: 50%;}
#container td:nth-child(3) {width: 25%;}
#container h1 { visibility: hidden; }
#pricetag {float: left; display: inline; width:100px; height:100px; -webkit-transform:rotate(-60deg); -moz-transform:rotate(-60deg); rotation:-60deg; text-align:center !important;  text-decoration:none; background-color:#c00 !important; z-index: 999;}
#pricetag span { display:block; z-index: inherit; width:100px; height:100px; -webkit-transform:rotate(22.5deg); -moz-transform:rotate(22.5deg); rotation:22.5deg; background-color:#c00 !important; text-align: center; font-size: 114%; line-height: 28px; color: #fff; text-shadow: 2px 2px #000; vertical-align: center;}
#pricetag h3 {padding-top: 20px;}
.bubbles {width: 100px; height: 100px; color: white; background-color: black; border-radius: 50px; text-align: center; padding: 10px 10px; line-height: 25px; }
.bubbles a {text-decoration: none; }
.right {float: right; margin-top: 30px;}
.left {float: left; margin-top: 30px;}
.clickme {display: block; width: 198%; text-align: center; margin: 0 auto; height: calc(var(--width) * .5);}
#dob {display: block; position: fixed; bottom: 4em; right: -1em; color: #fff; transform: rotate(-90deg); opacity: .3;}

#selector {text-align: center; margin: 0 auto; clear: all; overflow: auto; padding: 2% 9%; overflow-y: clip; min-width: calc(var(--width) * .8)}
#selector a {font-weight: bold; }
.pop { width: calc(var(--width) * .12); height: calc(var(--width) * .12); color: white; background-color: black; border-radius: 50%; text-align: center; display: inline-block; margin: 3px; border: 0; font-size: calc(var(--width) * .04); line-height: .9em; cursor: pointer; padding-top: calc(var(--width) * .02); text-decoration: none;}
.pop:hover { color: black; background-color: red; text-decoration: none;}
.pop:hover i {color: white;}
.ssspop a {text-decoration: none; display: inline-block; position: relative; z-index: 1; padding: 2em 0; margin: -2em;}
.hearts, .pop i, i {color: red; text-decoration: none; font-style: normal;}
.flag {border: 1px black solid; margin: 0 3px;}
.big { font-size: 150%; text-decoration: none; padding-bottom: -4px;}
h4 {color: black;}
#footer {color: #c00; padding-bottom: 25px; font-size: 125%; width: 70%; line-height: .9em !important;}
#saleschart td {width: 3.5%; text-align: center; border: 1px white solid;}
#saleschart table {border: 1px white solid; width: var(--width); color: black;}

#contact-form {}
input[type=submit], input[type=text], input[type=email] { padding: 12px 20px; margin: 8px 0; box-sizing: border-box; font-size: 200%;}
input[type=text], input[type=email] {width: 70%; margin: 4px auto;}
input[type=submit] {background-color: #c00; color: #fff; font-weight: bold; border-radius: 15px; clear: both;}
input[type=submit]::hover {background-color: #600; color: #ddd; font-weight: bold;}
input[type=text]:focus { border: 3px solid #555;}

:lang(en) {font-family: "Noto Sans Display", sans-serif; }
:lang(de) {font-family: "Noto Sans Display", sans-serif; }
:lang(fr) {font-family: "Noto Sans Display", sans-serif; }
:lang(it) {font-family: "Noto Sans Display", sans-serif; }
:lang(es) {font-family: "Noto Sans Display", sans-serif; }
:lang(ja) {font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal; }