#resources{
  position:absolute;
  top:20%;
  left:15%;
  width:70%;
  height:60%;
  z-index:8;
  color:white;
  display:none;
  overflow-y: auto;
  overflow-x: hidden;
}
h2{
  font-weight:bold;
  margin-top:0.25em;
  margin-bottom:0.25em
}
#resources img{
  padding:0.1em;
  background-color:#485160;
  border-radius:5px;
}
.closebtn{
  z-index:10;
  padding:0;
  position:absolute;
  right:2%;
  top:1%;
  background-color:#a98989;
  opacity:0.7;
}
.close{
  z-index:10;
  padding:0;
  background-color:#a98989;
}
.closebtn:hover{
  opacity:1
}
.sendbtn{
  padding:0.001em;
  font-size:0.85em;
  min-width:7em;
  border-radius:4px;
}
.resource{
  image-rendering: pixelated;
  margin-bottom:0.1em;
  width:80%;
  height:2.5%;
  padding:0.7em;
  gap:2em;
  background: rgba(98, 114, 147, 0.16);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  color:white;
  text-align:center;
  border-radius:10px;
  margin-bottom:0.5em;
  margin-top:0.5em;
}
.resource p{
  color:white;
}
#resources div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#secondary{
  margin-bottom:0.5em;
}
#players{
  position:absolute;
  top:0px;
  left:0px;
  background: rgba(98, 114, 147, 0.04);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.9px);
  -webkit-backdrop-filter: blur(5.9px);
  border: 1px solid rgba(98, 114, 147, 0.57);

  
  padding:4px;
}
#resources > :first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom-style:solid;
  border-bottom-color:rgba(98, 114, 147, 0.5);
  border-bottom-width:1px;
  padding-bottom:2em;
  padding-top:0.5em;

}

#resources > :nth-child(2) {
  margin-top:1.5em;
}
#guide,#military,#resources,#buildings,#popstats{

  background: rgba(98, 114, 147, 0.04);
  border-radius: 2%;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(98, 114, 147, 0.57);
}
#military {
  position: absolute;
  top: 20%;
  left: 15%;
  width: 70%;
  height: 60%;
  z-index: 8;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
}

.unit {
  image-rendering: pixelated;
  box-sizing: border-box;
  width: 100%;
  min-height: 5%;
  padding: 0.7em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;

  background: rgba(98, 114, 147, 0.16);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  text-align: center;
  border-radius: 10px;
}
.unitbtns{
  display:flex;

  flex-direction: column;
}
.unitbtns button{
  margin-bottom:0.5em;
}
#guide{
  overflow-y:scroll;
  overflow-x:hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20%;
  left: 15%;
  width: 70%;
  height: 60%;
  z-index: 8;
  color: white;
  text-align: center;
}
#guidebtn{
  position: absolute;
  bottom: 1.8em;
  left: 0%;
  width: 5%;
  color: white;

  padding:2px;
  z-index: 9;
}
#guide > h1 p h2{
  max-width: 40em;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#buildings {
  display: flex;
  justify-content: flex-start;
  gap: 2em;
  min-width: 3.9em;
  flex-direction: column;
  position: absolute;
  top: 10px;
  right: 7px;
  max-height: 40%;
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}
#buildings > *:first-child {
  margin-top: 0;
}

.building img{
  image-rendering: pixelated;
  width:3em;
  height:3em;
}
#requirements{
  display:flex;
  flex-direction:column;
  align-items: center;
  
}
#requirements .sideContainer{
  display:flex;
  flex-direction:row;
  gap:60%;
  justify-content: center;
}
.leftSide{
  display:flex;
  flex-direction:column;
}
.rightSide{
  display:flex;
  flex-direction:column;
}
#popstats{
  position:absolute;
  right:0.5%;
  bottom:0.5%;
  gap:0.5em;
  min-width:4.2em;
  display:flex;
  justify-content:center;
  padding:0.5%;
  
  flex-direction:row;
}
.warning{
  position:absolute;
  width:15%;
  min-height:15%;
  z-index:10;
  border-radius:4%;

  background: rgba(98, 114, 147, 0.07);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(98, 114, 147, 0.3);
  
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:#e5ff24;
  font-weight:bold;
}
.warning h2{
  color:#e8ff38;
}
.warning p{
  text-align:center;
}