body {
  width: 100vw;
  margin: 0 auto;
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
  background-color: var(--secondary-color);
}
@font-face { font-family: 'Open Sans'; font-display: swap; }
@font-face { font-family: "icons"; font-display: optional; }
.main {
  width: 100%;
  display:flex;
  flex-flow: column;
}
.main .banner{
  background-color: var(--secondary-color);
  background-image: linear-gradient(110deg, var(--banner-color2) 49.9%, var(--banner-color1) 50%, var(--banner-color1) 100%);
  font-size: 1.75vw;
}
.main .banner a[type=logo] {
  float: left;
  margin-top: .6vh;
  color: var(--banner-font-color);
  text-decoration: none;
}
.main .banner a{
  color: var(--banner-font-color);
  text-decoration: none;
}
.main .banner a[type=logout] {
  float: right;
  margin-top: .6vh;
  margin-right: 2%;
  background-color: var(--banner-color1);
  color: var(--banner-font-color);
  text-decoration: none;
}
.main .banner p{
  margin-bottom: 0%;
  margin-top: 1vh;
  float: left;

}
.main .banner a[type=login] {
  float: right;
  margin-top: .6vh;
  margin-right: 2%;
  background-color: var(--banner-color1);
  color: var(--banner-font-color);
  text-decoration: none;
}
.main .banner a:hover[type=login] {
  float: right;
  margin-top: .6vh;
  margin-right: 2%;
  background-color: var(--banner-color1);
  color: var(--banner-invert-font-color);
  text-decoration: none;
}
.banner .logo{
  margin-top: .4vw;
  margin-left: .75vw
}
.banner .usericon{
  margin-top: .25vw;
  margin-right: .3vw;
}
.main .topnav {
  overflow: visible;
  background-color: var(--accent-color);
  flex: 0 1 auto;
  font-size: 0vw;
}
.main .topnav a[type=navbar] {
  display:inline-block;
  float: center;
  color: var(--navigation-font-color);
  text-align: center;
  padding-left: 4.125vw;
  padding-right: 4.125vw;
  text-decoration: none;
  font-size: calc(8px + 1vw);
  min-height: 24px;
}
.topnav h3{
  font-size: 1rem;
  margin-bottom: .1rem;
}
.topnav h3 button[type=submit] {
  float: right;
  padding: 0vw;
  border: none;
  margin-top: .5vw;
  margin-bottom: .2vw;
  margin-right: .5vw;
  margin-left: 0vw;
  font-size: 1.33vw;
}
.topnav input[type=text] {
  float: right;
  padding: 0vw;
  border: none;
  width: 15vw;
  margin-top: .5vw;
  margin-bottom: .7vw;
  margin-right: .5vw;
  font-size: 1.33vw;
}
.topnav h3 a:hover[name=home] {
  color: var(--home-color);
}
.topnav h3 a:hover[name=events] {
  color: var(--event-color);
}
.topnav h3 a:hover[name=leagues] {
  color: var(--leagues-color);
}
.topnav h3 a:hover[name=dashboard] {
  color: var(--dashboard-color);
}
.topnav h3 a:hover[name=report] {
  color: var(--settings-color);
}
.topnav h3 a:hover[name=resources] {
  color: var(--resources-color);
}
.topnav h3 a:hover[name=about] {
  color: var(--about-color);
}
.topnav h3 a:hover[name=pokedex] {
  color: var(--pokedex-color);
}
.topnav  h3 a.active[name=home] {
  color: var(--home-color);
}
.topnav h3 a.active[name=events] {
  color: var(--event-color);
}
.topnav h3 a.active[name=leagues] {
  color: var(--leagues-color);
}
.topnav h3 a.active[name=dashboard] {
  color: var(--dashboard-color);
}
.topnav h3 a.active[name=report] {
  color: var(--settings-color);
}
.topnav h3 a.active[name=resources] {
  color: var(--resources-color);
}
.topnav h3 a.active[name=about] {
  color: var(--about-color);
}
.topnav h3 a.active[name=pokedex] {
  color: var(--pokedex-color);
}



.main .content{
  flex: 1 1 auto;
  font-family:"arial";
  color: var(--body-font-color);
  display: flex;  
  align-items: stretch;
}
.data{
  background-color: var(--secondary-color);
  font-size: 1vw;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  overflow: auto;
  }
.data h3{
  font-size: 2vw;
}
.fullpage{
flex: 1 1 auto;
display: flex;
text-align: center;
}
.fullpage.box{
    display: flex;
  flex-flow: row wrap;
  height: 12vh;
  margin-top: .15vh;
}
.news_header a{
  color: #18187C;
  border-bottom: .01vh dashed #18187C;
}
#registrationinput{
  margin-bottom: .75vh;
}
.err{
  width: 100%;
  height: 100%;
  display: inline-block;
  background-color: var(--secondary-color);
  font-size: 1.5vw;
  margin-bottom: 2vw;
  text-align: center;
}
.err img{
  margin-top: 5vh;
  width: 30%;
  height: auto;
}
.row{
  margin-left: 0vw;
  margin-right: 0vw;
  display: flex;
  flex-direction: row;
  width: 100%
}
.column{
  margin-left: 0vw;
  margin-right: 0vw;
  display: flex;
  flex-direction: column;
  width: 100%
}
.home_events{
  margin-left: 0vw;
  margin-right: 0vw;
  display: flex;
  width: 20%;
  flex-grow: 1;

  text-align: center;
}
.event_header{
  height: 1.5vw;
  width: 17vw;
  background-color: #44f;
  border-radius: 20px;
  margin-left: .1%;
  margin-right: .1%;
  margin-top: .3%;
  color: var(--home-event-color);
}
.news_header{
  height: 1.5vw;
  background-color: #f44;
  border-radius: 20px;
  margin-left: .25%;
  margin-right: .25%;
  margin-top: .3%;
  color: var(--home-news-color);
}
.data_left {
  float: left;
  text-align: left;
  background-color: var(--sidebar-color);
  flex: 1 1 auto;
  height: 100%;
}
.data_left a{
  float: left;
  color: var(--navigation-font-color);
  background-color: var(--sidebar-color);
  text-align: justify;
  padding-left: 0vw;
  padding-top: 0vw ;
  padding-bottom: 0vw;
  padding-right: 0.5vw;
  text-decoration: none;
  font-size: 1.3vw;
  margin-left: 2vw;
  margin-top: .75vw;
}
.data_left a:hover {
  color: var(--dashboard-color);
}
.data_right{
  float: center;
  margin-left: 0vw;
  margin-right: 0vw;
  flex: 1 1 auto;
  width: 90%;
  display: flex;
  text-align: center;
}
.labels{
  float: left;
  width: 12vw;
  text-align: justify;
  margin-left: 17vw; 
  margin-top: 2vw;
}
.header{
  height: 1.5vw;
  background-color: #555;
  border-radius: 20px;
  margin-left: .25%;
  margin-right: .25%;
  margin-top: .3%;
  color: var(--banner-font-color);
}
.box {
  display: flex;
  flex-flow: row wrap;
  height: auto;
  margin-top: .3%;
}
.box a{
  text-decoration: none;
}
.instance{
  margin-right: 0.10vw;
  margin-left: 0.30vw;
  margin-bottom: .25vh;
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  width: 14.5vw;
  height: 16vh;
  font-size: .75vw;
  border-radius: .25vw;
  border: .3vw solid #333;
  text-align: center;
}
.instance_top{
  width: 100%;
  height: 20%;
  font-size: 200%;
  color: var(--body-font-color);
  text-decoration: none
}
.instance_bottom{
  width: 100%;
  height: 80%;
  color: var(--body-font-color);
  text-decoration: none;
  font-size: 150%;
}
.news_Header{
  flex: 1 1 auto;
  font-size: 200%;
  color: var(--body-font-color);
  text-decoration: none
}
.news_Content{
  flex: 1 1 auto;
  color: var(--body-font-color);
  text-decoration: none;
  font-size: 150%;
}
.account_left {
  float: left;
  width: 35vw;
}
.account_right{
  float: left;
  width: 35vw;
}
.panel_left{
  margin-left: 30vw; 
  margin-top: 20vw;
}
.panel_right{
  margin-right: 30vw; 
  margin-top: 20vw;
}
.row::after {
  content: none;
  display: table;
  clear: both;
}
.account{
  margin-left: 0vw;
  margin-top: 5vh;
  display: flex;
  flex-direction: row;
  width: 100% ;
  text-align: center;
}
.img{
  margin-right: 15%;
}
.header_container{
  text-align: center;
}
.resources_left{
padding-left: 38vw;

}
.resources_right{
padding-left: 38vw;

}