html {
    scrollbar-width: thin;
    scrollbar-color: #bbbbbb #1d1d1d;
    background: linear-gradient(to right, #8b0e0e, #249490); /* gradient, red on the left and cyan on the right */
    padding: 0px;
}
body {
    width: 80%;
    min-height: calc(100vh - 4em);
    margin: 0 auto;
    padding: 2em;
    background-color: #1d1d1d;
    border-color: #000000;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 15px;
}
p {
    color: #eeeeee;
    font-family: 'Roboto', sans-serif;
    font-size: 16pt;
    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: #eeeeee;
    font: 'Palentino';
    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: #eeeeee;
    font: 'Palentino';
    font-size: 72pt;
    text-align: center;
    line-height: 72pt;
    margin-top: 0pt;
    margin-bottom: 0pt;
}
#svgHeader {
	display: none;
}
h2 {
    color: #ffffff;
    font: 'Palentino';
    font-size: 36pt;
    line-height: 36pt;
    margin-top: 12pt;
    margin-bottom: 0pt;
}
h3 {
    color: #ffffff;
    font: 'Palentino';
    font-size: 28pt;
    line-height: 28pt;
    margin-top: 12pt;
    margin-bottom: 0pt;
}
li {
    font-size: 16pt;
    text-indent: 16pt;
}
a {
    font-family: inherit;
}

.selection {
    background-color: #4caf50;
    font: 'Palentino';
    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: 'Palentino';
    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: 'Palentino';
    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: 'Palentino';
    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: 'Palentino';
    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);
}
.largebuttonlink {
    display:inline-block;
    background-color:#333333;
    font: 'Palentino';
    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: 'Palentino';
    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;
}
.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: 'Palentino';
    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: 'Palentino';
    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;
    border-radius: 20pt;
    display: block;
    margin: 8pt;
    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
	min-width: 500pt;
    transition: transform 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}
#banner:hover {
    transform: scale(1.08);
    box-shadow: 2px 3px 6px #0e0e0e;
}
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: #1d1d1d;
    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: 'Palentino';
}
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: 'Palentino';
}
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: 'Palentino';
}

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

.subtext p {
    margin: 5px 0 0;
    font-size: 18pt;
    font: 'Palentino';
    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;
  }

  @media only screen and (max-width: 800px) {
	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: 'Palentino';
    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
}
}