html {
  height: 100%;
  
  background-image: 
    linear-gradient(270deg, 
      #630000, #572b00, #005707, #2b4d00, 
      #5f5900, #004f55, #000058, #470047
    ),
    linear-gradient(90deg,  
      #470047, #000058, #004f55, #5f5900, 
      #2b4d00, #005707, #572b00, #630000
    );
  background-size: 200% 100%, 200% 100%;
  background-repeat: repeat;
  animation: leftShift 30s linear infinite, rightShift 30s linear infinite;
  scrollbar-width: thin;
  scrollbar-color: #bcbcbc #1d1d1d;
  margin: 0;
}

@keyframes leftShift {
  0%   { background-position: 0% 0; }
  50%  { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

@keyframes rightShift {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
/* legacy html:

html {
  height: 100%;
  background: linear-gradient(
    100deg, 
    #630000, 
    #572b00, 
    #005707,  
    #2b4d00,
    #5f5900,
    #004f55,
    #000058,
    #470047
  );
  background-size: 500% 500%;
  animation: rainbowShift 50s linear infinite;
  scrollbar-width: thin;
  scrollbar-color: #bbbbbb #1d1d1d;
  padding: 0px;
}

@keyframes rainbowShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

*/

body {
    width: 80%;
    min-height: calc(100vh - 4em);
    margin: 0 auto;
    padding: 2em;
    background-color: #19191d;
    border-color: #131313;
    color: #eeeeee;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 15px;
}
p {
    color: #ccc;
    font-family: 'Roboto', sans-serif;
    font-size: 16pt;
    line-height: 1.5;
    margin: 4pt;
}
.p2 {
    color: #ccc;
    font-family: 'Roboto', sans-serif;
    font-size: 24pt;
    line-height: 1.5;
    margin: 4pt;
}
a{
    color: #2222DD;
}
a:hover{
    color: #22DDDD;
}
p.value-description {
    text-indent: -16pt;
    margin-left: 20pt;
}
p.question {
    margin: 16pt auto;
    color: rgb(211, 211, 211);
    font: 'Palatino';
    font-weight: normal;
    width: 70%;
    min-width: 500pt;
    min-height: 144pt;
    background-color: #0e0e0e;
    padding: 16pt;
    border: 4px solid #000000;
    border-radius: 16pt;
    border-color: #000000;
    font-size: 36pt;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}
h1 {
    color: #ddd;
    font: 'Palatino';
    font-size: 72pt;
    text-align: center;
    line-height: 72pt;
    margin-top: 0pt;
    margin-bottom: 0pt;
}
#svgHeader {
	display: none;
}
h2 {
    color: #ddd;
    font: 'Palatino';
    font-size: 36pt;
    line-height: 36pt;
    margin-top: 12pt;
    margin-bottom: 0pt;
}
h3 {
    color: #ddd;
    font: 'Palatino';
    font-size: 28pt;
    line-height: 28pt;
    margin-top: 12pt;
    margin-bottom: 0pt;
}
li {
    font-size: 16pt;
    text-indent: 16pt;
}
a {
    font: 'Palatino';
    text-decoration: none;
    color:#5e5edf;
    cursor: pointer;
}

.selection {
    background-color: #4caf50;
    font: 'Palatino';
    border: none;
    border-radius: 8pt;
    color: white;
    padding: 8pt;
    width: 50%;
    min-width: 500pt;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 24pt;
    margin: -2px auto;
    cursor: pointer;
}

.num_input {
    background-color: #2196f3;
    font: 'Palatino';
    border: none;
    border-radius: 8pt;
    color: white;
    padding: 8pt;
    width: 50%;
    min-width: 500pt;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 24pt;
    margin: -2px auto;
    cursor: pointer;
}

.text_input {
    background-color: #2196f3;
    font: 'Palatino';
    border: none;
    border-radius: 8pt;
    color: white;
    padding: 8pt;
    width: 50%;
    min-width: 500pt;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 24pt;
    margin: -2px auto;
    cursor: pointer;
}

img.center {
    display: block;
    margin: 1em auto;
    width: 50%;
    min-width: 500pt;
}
.button {
    background-color: #2196f3;
    font: 'Palatino';
    border: none;
    border-radius: 4pt;
    color: white;
    padding: 8pt;
    width: 10%;
    height:55pt;
    min-width: 70;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 20pt;
    margin: -2px auto;
    transition: transform 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
    cursor: pointer;
}
.button:hover {
    transform: scale(1.02);
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.6);
}
.largebutton {
    background-color: #2196f3;
    font: 'Palatino';
    border: none;
    border-radius: 4pt;
    color: #ffffff;
    padding: 8pt;
    width: 30vmax;
    min-width: 70;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 24pt;
    margin: -2px auto;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.largebutton:hover {
    transform: scale(1.2);
    background-color: #2c2c2c;
    box-shadow: 8px 12px 18px rgba(0, 0, 0, 0.6);
}
.mediumbutton {
    background-color: #2196f3;
    font: 'Palatino';
    border: none;
    border-radius: 4pt;
    color: #ffffff;
    padding: 8pt;
    width: 20vmax;
    min-width: 70;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 24pt;
    margin: -2px auto;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.mediumbutton:hover {
    transform: scale(1.07);
    background-color: #2c2c2c;
    box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.6);
}
.largebuttonlink {
    display:inline-block;
    background-color:#333333;
    font: 'Palatino';
    border: 8px solid #000000;
    border-radius: 28pt;
    color: #eeeeee;
    padding: 8pt;
    width: 30vmax;
    min-width: 70;
    height: 192px;
    text-align: right;
    text-decoration: none;
    display: inline;
    font-size: 24pt;
    margin: -2px auto;
    cursor: pointer;
    box-shadow: 0 8px 16px 0 #111111, 0 16px 32px 0 #111111;
}
.green_button {
    background-color: #4caf50;
}
.small_button, .small_button_off {
    background-color: #333;
    font: 'Palatino';
    border: none;
    border-radius: 8pt;
    color: white;
    padding: 8pt;
    width: 10%;
    min-width: 70pt;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 18pt;
    margin: -2px auto;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.nullifybutton {
    background-color: #6d6d6d;
    font: 'Palatino';
    border: none;
    border-radius: 8pt;
    color: white;
    padding: 8pt;
    width: 10%;
    min-width: 70pt;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 18pt;
    margin: -2px auto;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.5s ease;
}
.nullifybutton:hover {
    transform: scale(1.02);
    box-shadow: 2px 2px 2px rgba(97, 97, 97, 0.6);
}
.small_button_off {
    background-color: #ddd;
    color: #888;
    border: 2px solid #888;
    cursor: not-allowed;
    margin: -4px auto;
    transition: transform 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}


.small_button:hover, .small_button_off:hover {
transform: scale(1.03);
box-shadow: 2px 3px 7px rgba(10, 10, 10, 0.6);
}

.button:disabled {
    background-color: #ddd;
    font: 'Palatino';
    border: 2px solid #888;
    border-radius: 8pt;
    color: #888;
    padding: 8pt;
    width: 50%;
    min-width: 500pt;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 24pt;
    margin: -2px auto;
    cursor: not-allowed;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
div.text-wrapper {
    font: 'Palatino';
    font-size: 36pt;
    line-height: 36pt;
    color: #222222;
    display: block;
}
span.weight-300 {
    font-weight: 300;
}
#banner {
    border-color: #181818;
    border-style: solid;
    border-width: 4px;
    display: block;
    margin: 8pt;
    margin-left: auto;
    margin-right: auto;
    max-width: 55%;
	min-width: 500pt;
    transition: transform 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}
#banner2 {
    border-color: #181818;
    border-style: solid;
    border-width: 4px;
    display: block;
    margin: 8pt;
    margin-left: auto;
    margin-right: auto;
    max-width: 55%;
	min-width: 500pt;
    transition: transform 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}
div.paraleft{
    vertical-align: top;
    width: 30%;
    margin-left: 1%;
    margin-right: 1%;
}
div.pararight{
    vertical-align: top;
    width: 30%;
    margin-left: 1%;
    margin-right: 1%;
}
.frontbg {
    background-color: #19191d;
    border-radius: 0px;
    margin-top: 15px;
}
.spacer {
    display: flex;
}
p.blurb-text {
    text-align: center;
    max-width: 600px;
}
p.value {
    margin-top: 22px;
    margin-bottom: 22px;
    text-indent: -16pt;
    margin-left: 20pt;
    font-size: 30pt;
    line-height: 2.11666656px;
    letter-spacing: 0.03em;
    font: 'Palatino';
}
div.explanation_axis {
    width: 50%;
    vertical-align: top;
}
.arrow {
    width: 50%;
    height: auto;
}
p.axis_name {
    margin-top: 50px;
    width:200px;
    color: #ffffff;
    font-size: 20pt;
    font: 'Palatino';
}
div.credleft{
    vertical-align: top;
    width: 40%;
}
div.credright{
    vertical-align: top;
    width: 40%;
}
/*                                            credits                                  */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
  }
.flex-container > div {
    margin: 2px;
    padding: 20px;
    font-size: 30px;
  }
.container {
    text-align: center; /* thank you Mari */
    width: 400px;
}
.buttoncredit {
    display: flex;
    width: 400px;
    text-decoration: none;
    color: inherit;
    align-items: center;
    background-color: #1e1e1e;
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 2px 4px 10px rgba(12, 12, 12, 0.4); 
    transition: transform 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
    cursor: pointer;
}

.buttoncredit:hover {
    transform: scale(1.05);
    background-color: #2a2a2a;
    box-shadow: 5px 6px 15px rgba(0, 0, 0, 0.6);
}

.profile {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
    object-fit: cover;
}

.subtext {
    text-align: left;
    font: 'Palatino';
}

.subtext h2 {
    text-align: center;
    font: 'Palatino';
    margin: 0;
    font-size: 24pt;
}

.subtext p {
    margin: 5px 0 0;
    font-size: 18pt;
    font: 'Palatino';
    color: #bdbdbd;
}

.tooltip {
    position: relative;
    display: inline;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

/*  .animated-emoji {
    transform-origin:center bottom;
    animation: bounce var(--bounce-dur) cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  }

  @keyframes bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(15px);
    }
}*/

.animated-emoji {
  display: inline-block; 
  transform-origin: center bottom;
  animation: bounce 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animated-emoji-flip {
  display: inline-block; 
  transform-origin: center bottom;
  transform: scaleX(-1);
  animation: bounce-flip 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-15px);
  }
}

@keyframes bounce-flip {
  0%, 100% {
    transform: translateY(0) scaleX(-1);
  }
  80% {
    transform: translateY(-15px) scaleX(-1);
  }
}

/*bouce left & right*/

.emoji-bounce-left {
  display: inline-block; 
  transform-origin: left;
  animation: bounce 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.emoji-bounce-right {
  display: inline-block; 
  transform-origin: left;
  animation: bounce 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes bounce-left {
    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0%);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes bounce-right {
    0%,
    100% {
        transform: translateX(25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateX(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}


  @media only screen and (max-width: 960px) {
	body {
		width: auto !important;
		border-width: 0px !important;  
	}
	
	.title {
		display: none;
	}
	
    #svgHeader {
		display: block !important;
    }
	
	#banner {
		min-width: 0px;
		max-width: 100%;
		border-width: 1px;
	}
	
	.button, .button:disabled, .text_input, .num_input, .selection {
		min-width: 0px;
		max-width: 100%;
		width: 100%;
		font-size: 1.5em;
	}
	
	h2 {
		font-size: 1.5em;
		line-height: initial
	}

    p.question {
        min-height: 224px !important;
        min-width: 0px;
		max-width: 100%;
		width: auto;
		font-size: 1.75em;
    }
    
.button {
    background-color: #2196f3;
    font: 'Palatino';
    border: none;
    border-radius: 4pt;
    color: white;
    padding: 8pt;
    width: 10%;
    height:55pt;
    min-width: 5;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 20pt;
    margin: -2px auto;
    transition: none
}
.resultscontainer {
  flex-direction: column;
  align-items: center;
}
.finaltally {
  order: 2;
  width: 80%;
}
.compass {
  order: 1;
}

}

.resultscontainer .compass,
.resultscontainer .finaltally {
  box-sizing: border-box;
}

#userdropdown {
    display: flex;
    font-size: 22pt;
    margin: auto;
    text-align: center;
    width: 30%;
    max-width: 500px;
    border-radius: 10pt;
    color: rgb(0, 0, 0);
}

#userdropdown option {
    font: 'Palatino';
}

  .resultscontainer {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  .compass {
    flex: 2;
    padding: 10px;
  }

  .finaltally {
    flex: 1;
    padding: 10px;
    text-align: center;
  }

  .result {
    color: #eeeeee;
    font: 'Palatino';
    font-size: 23pt;
    line-height: 1.5;
    margin: 4pt;
  text-align: left;
    }

.runnerup {
    color: #ccc;
    font: 'Palatino';
    font-size: 18pt;
    line-height: 1.5;
    margin: 4pt;
  text-align: left;
}



.bar-container {
    margin: 8px 0;
  }

  .bar-label {
    margin-bottom: 2px;
    color: #ccc;
    font: 'Palatino';
    font-size: 18pt;
  }

  .bar {
    height: 23px;
    background: #444;         /* background "empty" bar */
    border-radius: 6px;
    overflow: hidden;
  }

  .bar-fill {
    height: 100%;
    background: #4caf50;      /* filled portion color */
    width: 0;
    transition: width 2s ease-in-out;
  }

  #bar-right { background-color: #864800; 
  display: flex;
  flex-direction: row-reverse;}
#fill-right { background-color: #009790; }

#bar-auth { background-color: #b4b100; 
  display: flex;
  flex-direction: row-reverse;}
#fill-auth { background-color: #a70000; }

#bar-prog { background-color: #329623; }
#fill-prog { background-color: #841d9e; }

.extLink {
  height: 4vw;
  width: 4vw;
  cursor: pointer;
  border-radius: 100%;
  transition: .25s ease-in-out;
}

.extLink:hover {
  scale:1.15
}

a.qshit {
    margin: 16pt auto;
    color: rgb(211, 211, 211);
    font-family: "Courier New", Courier, monospace;
    width: 80%;
    background-color: #303030;
    padding: 16pt;
    border: 10px solid #000000;
    border-color: #000000;
    font-size: 8pt;
    display: flex;
    text-align: justify;

}