html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;}
root {display: block;}
body {background-color: beige;color: olive;font-family: "Passion One", sans-serif;font-weight: 200;text-shadow: rgb(0 0 0 / 25%) 0px 0.5px 1px;}

/* DEFAULT and MOBILE-ONLY values */
div.content {width: 100%;margin: auto;overflow: hidden;}
div.menu {width: 100%;float: left;}
a {text-decoration: none;color: beige;}
h1 {font-size: 50px;color: olive;}
h2 {font-size: 40px;color: olive;}
h3 {font-size: 30px;color: olive;}
h3.ribbonText {color: beige;font-weight: 100;}
p.gameTitle {font-size: 40px;color: beige;}
span.smallerText {font-size: 20px;color: beige;font-family: 'Mulish';font-weight: 700;}
p.sectionTitle {font-size: 36px;color: beige;}
span.unbold {text-decoration: none;font-weight: 100;color: olive;}

div.ribbon {top: 0px;width: 100%;height: 50px;overflow: hidden;background-color: olive;color: beige;}
div.ribbonIcon {float: left;}
div.ribbonText {float: left;margin-top: 10px;}

img.icon {width: 40px;margin: 5px;}

div.gameBanner {display: flex;border-radius: 25px;padding: 10px;margin: 10px;height: 70px;justify-content: center;align-items: center;text-align: center;width: auto;float: none;}

div.topBanner {display: flex;width: 100%;justify-content: center;align-items: center;margin: 0px 0px 10px 0px;}
div.topBanner img {width: 100%;}

div.codes {display: flex;width: 90%;justify-content: center;align-items: center;margin: auto;text-align: center;}
p.codes {font-size: 15px;color: darkolivegreen;font-weight: 600;margin-bottom: 6px;}

div.characters {display: flex;width: 90%;justify-content: center;align-items: center;margin: auto;}
div.characterList {width: 100%;}

div.team {width: 100%;padding: 5px;border-radius: 10px;background-color: lightgray;float: left;}
div.team img {float: left;}
div.team p {font-size: 20px;color: beige;}
div.team#electric {background-color: #D6C843;float:none;}
div.team#heat {background-color: salmon;float:none;}
div.team#physical {background-color: lightgray;float:none;}
div.team#cryo {background-color: cornflowerblue;float:none;}
div.endfieldOperator {position: relative;border-radius: 20px;margin: 10px;height: 82px;}
div.endOpImg {position: relative;float: left;margin: 5px;}
div.endOpImg img {border-radius: 18px;}
div.endOpName {position: relative;float: left;margin: 5px;}
p#endOpName {font-size: 28px;color: beige;}
div.endOpRarity {position: absolute;top: 15px;left: 83px;}
p.endOpRarityDisp {font-size: 50px;}
p.endOpRarityDisp#six {color: crimson;}
p.endOpRarityDisp#five {color: goldenrod;}
p.endOpRarityDisp#four {color: purple;}
div.endOpLevel {position: absolute;top: 56px;left: 88px;}
p#endOplvlLabel {font-size: 24px;color: darkolivegreen;margin-top: -6px;}
span#endOplevel {color: beige;}
div.endOpElem {position: relative;float: left;margin: 10px 0px 0px 0px;}
div.endOpAtt {position: relative;float: left;}
div.endOpWeapon {position: absolute;border-radius: 18px;bottom: 6px;right: 6px;height: 24px;overflow: hidden;background-color: beige;padding: 10px 6px 0px 12px;}
div.endOpWeapon img {max-width: 32px;}
p#endOpWeapon {font-size: 12px;font-family: "Mulish";color: darkred;font-weight: bold;float: left;}
div.endOpStats {float: right;margin: 3px 10px 0px 0px;}
div.endOpStatbox {float: left;color: beige;font-size: 20px;width: 20px;height: 24px;text-align: center;margin: 2px;border-radius: 10px;border: 2px solid beige;padding-top: 3px;}
div.endOpStatbox#endOpStatboxRED {background-color: crimson;}
div.endOpStatbox#endOpStatboxORANGE {background-color: rgb(231, 114, 18);}
div.endOpStatbox#endOpStatboxYELLOW {background-color: #D6C843;}
div.endOpStatbox#endOpStatboxGREEN {background-color: rgb(72, 194, 56);}

div.zzzAgentWrapper {height: 160px;margin: 10px;position: relative;}
div.zzzAgent {border-radius: 20px;width: 100%;height: 50px;position: absolute;z-index: 100;top: 125px;}
div.zzzImg {float: left;z-index: 10;position: absolute;top: 0px;left: 20px;}
div.zzzImg img {height: 150px;}
div.zzzName {position: relative;float: left;margin: 5px 0px 0px 10px;}
p#zzzName {font-size: 36px;color: beige;}

div.chaosCombatant {position: relative;border-radius: 20px;margin: 6px;height: 250px;width: 30%;float: left;}
div.chaosImg {float: left;}
div.chaosImg img {border-radius: 20px;max-width: 100%;position: absolute;bottom: 0px;right: 0px;}
div.chaosName {position: relative;float: left;margin: 6px 0px 0px 12px;width: 100%;}
p#chaosName {font-size: 24px;color: beige;}
div.chaosLevel {position: relative;float: left;margin: 0px 0px 0px 10px;}
p#chaosLevel {font-size: 20px;color: beige;}

div.zzz {color: #B381D6;}
div.chaos {color: #D6469C;}
div.endfield {color: #D6C843;}

#endfield {background-color: #D6C843;}
#zzz {background-color: #B381D6;}
#chaos {background-color: #D6469C;}
#nerdshelf {background-color: #DA5514;}
#drawject {background-color: purple;}
#steam {background-color: darkslategray;}
#switch {background-color: crimson;}
#synch {background-color: cornflowerblue;}


/* DESKTOP values */
@media only screen and (min-width: 500px) {
	div.topBanner {margin: 10px;}
	div.topBanner img {width: 30%;}
	div.ribbonText {margin-top: 5px;}
	div.gameBanner {width: 31%;float: left;}
	p.codes {font-size: 32px;}
	h3 {font-size: 36px;}
	div.characterList {width: 40%;}
	div.endOpName {margin: 2px;}
	p#endOpName {font-size: 40px;}
	div.endOpLevel {left: 84px;}
	div.endOpStatbox {font-size: 28px;width: 28px;height: 28px;padding-top: 0px;}
	div.endOpRarity {top: 20px;left: 80px;}
	div.chaosCombatant {margin: 10px;}
	div.chaosImg img {max-width: 75%;}
	p#chaosName {font-size: 35px;}
	p#chaosLevel {font-size: 24px;}
}