/*----------------------------------------------------------FONTS-----------------------------------------------------------------------*/

@font-face {
  font-family: 'Windows';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Windows.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PONY';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/PONY.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  @font-face {
  font-family: 'Ponyville';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Ponyville.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root,

html[data-theme="three"] {
  --backgrounda: #ffd9e6;
  --backgroundb: #eaadcb;
  --boxa: #f79dbd;
  --boxb: #f9bad0;
  --text: #BC3D66;
  --accenta: #6ca4d3;
  --accentb: #fff5b9;
  --posi: 0px 0px;
  --img: url(/style/img/three.png)
}

html[data-theme="fim"] {
  --backgrounda: #f596be;
  --backgroundb: #f273a8;
  --boxa: #f09ac1;
  --boxb: #f8b9ce;
  --text: #c61c72;
  --accenta: #72d0f6;
  --accentb: #fcf6a6;
  --posi: 0px -10px;
  --img: url(/style/img/fim.webp)
}

html[data-theme="ponylife"] {
  --backgrounda: #EA87B4;
  --backgroundb: #DB64A5;
  --boxa: #f2b3d0;
  --boxb: #e89bbd;
  --text: #bc2f7d;
  --accenta: #2ca0dd;
  --accentb: #f6e95d;
  --posi: 0px -20px;
  --img: url(/style/img/ponylife.png)
}

html[data-theme="dark"] {
  --backgrounda: #2b2928;
  --backgroundb: #463a3f;
  --boxa: #df75b0;
  --boxb: #aa6089;
  --text: #000;
  --accenta: #57a5d6;
  --accentb: #b7ac21;
  --posi: 0px 8px;
  --img: url(/style/img/dark.png)
}

html[data-theme="crystal"] {
  --backgrounda: #7fd6e0;
  --backgroundb: #3294c1;
  --boxa: #b7dce4;
  --boxb: #f5cde9;
  --text: #2580af;
  --accenta: #fddeb0;
  --accentb: #cacfe6;
  --posi: 0px 0px;
  --img: url(/style/img/crystal.png)
}

html[data-theme="rainbow"] {
  --backgrounda: #fabbd0;
  --backgroundb: #70bef3;
  --boxa: #fbe58f;
  --boxb: #fcfdc1;
  --text: #d62d76;
  --accenta: #fe96ae;
  --accentb: #d3a7dc;
  --posi: 0px 10px;
  --img: url(/style/img/rainbow.png)
}

html[data-theme="sea"] {
  --backgrounda: #01356f;
  --backgroundb: #1c6297;
  --boxa: #e9b1e0;
  --boxb: #8d76e5;
  --text: #111141;
  --accenta: #fef785;
  --accentb: #6ec1ec;
  --posi: 0px 10px;
  --img: url(/style/img/sea.png)
}

html[data-theme="west"] {
  --backgrounda: #943f53;
  --backgroundb: #d87d6c;
  --boxa: #f5cedf;
  --boxb: #f0b3ce;
  --text: #262626;
  --accenta: #968ffa;
  --accentb: #e8e7bc;
  --posi: 0px 10px;
  --img: url(/style/img/west.png)
}

html[data-theme="beachy"] {
  --backgrounda: #e39f99;
  --backgroundb: #e7d5a7;
  --boxa: #e7ceca;
  --boxb: #e2c1c0;
  --text: #BD648E;
  --accenta: #218499;
  --accentb: #EBD999;
  --posi: 0px -10px;
  --img: url(/style/img/beachy.png)
}

html[data-theme="war"] {
  --backgrounda: #86333d;
  --backgroundb: #522647;
  --boxa: #B396BC;
  --boxb: #AC8CB3;
  --text: #2A181E;
  --accenta: #c38b51;
  --accentb: #753856;
  --posi: 0px -10px;
  --img: url(/style/img/war.png)
}

html[data-theme="breeze"] {
  --backgrounda: #76AD9D;
  --backgroundb: #B7D7CE;
  --boxa: #f5d5df;
  --boxb: #ffcfe4;
  --text: #248C91;
  --accenta: #E6DE95;
  --accentb: #F2B4CB;
  --posi: 0px -10px;
  --img: url(/style/img/breeze.png)
}

:root {
	--viewport-height:100%;
}
/* -------------------------------------------------------------------------------------------------*/
body {
	height:105%;
    background: linear-gradient(var(--backgrounda), var(--backgroundb));
    background-size:cover;
 background-repeat: no-repeat;
  text-align: center;
    font-family: 'Windows'
}
hr {
  height:1px;
  margin-top:5px;
  margin-bottom:5px;
    color: var(--accenta);
}
h1 {
    font-family: 'PONY';
    color: var(--text);
	font-size: 24pt;
}
h2 {
    font-family: 'PONY';
    color: var(--text);
}
p {
  font-size: 14pt;
  text-align: center;
  font-family: 'Ponyville';
  color: var(--text);
}

a {
    color: var(--accenta);
}
.box {
    background: linear-gradient(var(--boxa), var(--boxb));
    display:block;
    margin-left:auto;
    margin-right:auto;
    border:2px solid;
    border-color: var(--accentb);
    width:90%;
	height:75%;
    font-family: 'Ponyville';
    border-radius:3px;
	overflow-y:scroll;
}

.genbox {
	border:solid 1px;
    border-color: var(--text);
}
.buttonhead{
	font-family: 'PONY';
    color: var(--text);
	font-size: 18pt;
	 margin-top:10px;
	 margin-bottom:10px;
}

.nav {
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    border-radius:3px;
    background-size: 180px;
    background-repeat:no-repeat;
    border: solid 2px;
    width:90%;
    height:170px;
    border-color: var(--accenta);
    background-image: var(--img);
    color: var(--text);
    background-position: var(--posi);
}
button {
    font-family: 'Windows';
    background-color: var(--boxa);
    color: var(--text);
	font-size:14pt;
}
.button {
width:auto;
    background:linear-gradient(var(--boxa),var(--boxa),var(--boxb));
	
	background-color: rgba(255,255,255,0.5);
	border: solid 1px;
	border-color: var(--backgroundb);
}
.buttona {
    border-color: var(--accenta); 
}
.buttonb {
    border-color: var(--accentb); 
}
.blurb {
width:60%;}
table {
    text-align: center;
    color: var(--text);
}

th {
	overflow-x: hidden;
}
td, th {
    text-align: center;
    color: var(--text);
	background-color: rgba(255,255,255,0.5);
	font-size:24pt;
}

.progbar {
text-align: left;
margin: 2px auto;
font-size: 0px;
line-height: 0px;
border: solid 1px var(--text);
background: linear-gradient(var(--boxa), var(--boxb));
overflow: hidden;
}

.progbara {
	 background: var(--text); 
}

.title {
  font-size:18pt;
}

.tdimg {
	width:5%;
}
@media only screen and (max-width: 1200px) {
	.nav {width: 97%;}
	.box {
		width:97%;
	}
	p,td,th {
		font-size: 18pt;
	}
	
}
@media only screen and (max-width: 800px) {
	.nav {
		
    height:152px;
		width: 97%;
		background-size: 150px;
		
	}
	.box {
		width:97%;
	}
  .title {
    font-size:14pt;
  }
  .buttonhead{
	  font-size:16pt;
  }
	p,td,th {
		font-size: 12pt;
	}
  	button {font-size:10pt;}
	.tdimg {
	width:10%;
}
}

@media only screen and (max-width:700px) {
  button {font-size: 8pt;}
   
  .nav {background-size: 120px; background-position:-5px 20px;}
  .blurb {width:88%;}
}


@media only screen and (max-width: 550px) {
	.title {
	  font-size:10pt;
	}
.buttonhead{
	  font-size:10pt;
  }
	.box {
		height:65vh;
	}
	body{
	height:110%;
	}
	.tdimg {
	width:15%;
}
	p,td,th {
		font-size: 10pt;
	}
	
	
	
	
}