@import "_colors.css";
@import "_fonts.css";
@import "_grids.css";
@import "_forms.css";
@import "_map.css";

@import "foundation-icons.css";

@import "acp.css";
@import "dashboard.css";
@import "country.css";
@import "puppet.css";
@import "party.css";

html,body{
  margin: 0;
  padding: 0;
  background-color: var(--black);
  color: var(--white);
  font-family: 'Work Sans';
}

.row {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  column-gap: 20px;
}
.content{
  grid-column: span 9;
  padding: 1.5em;
  background-color: var(--darkgrey);
  position: relative;
}
.login input{
  opacity: 0.8;
  transition: .25s ease-in-out 0s;
}
.login input:hover{
  opacity: 1;
  transition: .25s ease-in-out 0s;
}
.login-spacer{
  grid-column: span 4;  
}
.login-container{
  grid-column: span 4;
  padding: 2.5em;
  background-color: var(--darkgrey);
  background-image: url('../img/101.jpg');
}

.header{
  grid-column: span 2;
  font-size: 2em;
  font-family: 'Monument';
}
.statbar{
  grid-column: span 9;
  text-align: right;
  background-color: var(--darkgrey);
  margin-bottom: 1em;
}
.statbar-item{
  float:right;
  padding-top: 0.25em;
  margin-right: 1em;
}
.navigation{
grid-column: span 2;
padding: 1em;
background-color: var(--darkgrey);
}
.nonfloater{
clear:both;
}

.button {
  top: 0;
  left: 0;
  position: relative;
  display: inline-block;
  border: none;
  color: var(--black);
  background-color: var(--white);
  text-decoration: none;
  padding: 0.6em 1.2em;
  text-align: center;
}
.footer {
  text-align: center;
  padding: 0.5em;
}

a, a:visited{
color: var(--orange);
transition: all .15s ease-in-out 0s;
}
a:hover{
color: var(--yellow);
}