@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

.bar {
  width:100%;
  min-height:10px;
  background: #174f15 !important;
}
.bar.fos:hover {
  animation: tilt-n-move-shaking 0.15s infinite;
}
@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.bar.fos .progress {
  width:85%;
  background:green;
}
.bar.ren .progress {
  width:10%;
  background:green;
}
.bar.nuc .progress {
  width:5%;
  background:green;
}
.infobox {
  background:#4dbd5a;
  border:3px solid #0a3108;
  border-top:0px;
  padding:5px;
  color:#0a3108;
  font-size:0.9em;
}
.flexbox {
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:3px;
}
.flexbox div {
  background:linear-gradient(to bottom right, #174f15, #4dbd5a);
  color:#77cc72;
  flex:1 1 200px;
  padding:5px;
  text-align:center;
  place-content:center;
  box-sizing: border-box;
}
.flexbox div strong {
  display:block;
  font-size:1.2em;
}
.decorbox {
  display:flex;
  background:linear-gradient(to bottom right, darkgreen, green);
  color:lightgreen;
  margin-top:3px;
  padding:5px;
}
.decorbox .text {
  margin-left:5px;
}
.headersideways {
    writing-mode: sideways-lr;
    margin: 0;
}
.decorbox h2 {
  color:green;
}
.implink {
  font-size:1.2em;
  text-align:center;
}
.implink a {
  color:darkgreen;
  text-decoration:none;
  transition:0.2s ease;
}
.implink a:hover {
  text-decoration:underline;
  filter:brightness(1.5);
}
.miniprofile {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    width: 250px;
    text-align: left !important;
    display: flex;
    gap: 5px;
    margin-top: 5px;
    color: inherit;
    text-decoration: none;
    color:black;
}
.miniprofile img {
    object-fit: contain;
    width: 40px;
    height: 40px;
    padding: 5px;
    background: darkgreen;
}
weak {
    opacity: 0.5;
    font-size: 0.8em;
    vertical-align: top;
}
.miniprofile .speciallink {
    padding: 5px;
    background: darkgreen;
    color: lightgrey;
    text-decoration: none;
    display: block;
    max-width: fit-content;
    margin-top: 2px;
}
.miniprofile .speciallink:hover {
  text-decoration:underline;
}
.fflex {
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  width:100%;
  margin-top:3px;
}
.fflex div {
  background:lightgreen;
  color:black;
  flex:1 1 300px;
}
.fflex txt {
  padding:5px;
  display:block;
}
.fflex div h2 {
  -webkit-text-stroke-width: 0px;
  background:darkgreen;
  color:white;
  padding:5px;
  margin:0;
}
.welcomer {
  padding:5px;
  background:#0a3108;
  color:#4dbd5a;
  margin:0;
  text-align:center;
}
.maincontent {
  flex:1;
}
.sidebar {
  flex: 0 1 100px;
  padding:5px;
  position: sticky;
    top: 0px;
    max-height: 100vh;
}
.sidebar h2, h3, h4 {
  color:green;
}
.holda {
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:3px;
}
nav a {
  flex:1;
  background:var(--damninggreen);
  padding:5px;
  box-shadow: inset 0 -20px 20px #008b31;
  color:lightgreen;
  text-decoration:none;
  text-align:center;
  transition:0.2s ease;
}
nav a:hover {
  filter:brightness(1.5);
}
nav {
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:3px;
}
.mainheader {
  color: #e6ffb6;
  font-weight: 700;
  font-size: 2.2em;
  display: block;
  padding: 0.67em 20px;
  box-sizing: border-box;

  --s: 40px;
  --c1: #458822;
  --c2: #414a0f;
  
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  --_c: #0000 66%,var(--c2) 68% 70%,#0000 72%;
  background: 
  linear-gradient(to right, #0f4939, transparent),
    radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 0    75%,var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),
    radial-gradient(var(--_g) 0    75%,var(--_c)) 0 0/var(--_s),
    repeating-conic-gradient(var(--c1) 0 25%,#0000 0 50%) 0 0/var(--_s),
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s)
    var(--c1);

}
main {
  max-width:950px;
  width:100%;
  background:#ebffeb;
  justify-self:center;
  padding:3px;
  box-sizing: border-box;
}
body {
  font-family: figtree;
  margin:0;
    --damninggreen:#15490f;
}
::selection {
  background:var(--damninggreen);
  color:white;
}
html {
  --s: 9px;
  --c1: #092a21;
  --c2: #000000;
  
  background:
    conic-gradient(var(--c1)   135deg,var(--c2) 0 270deg,
                   var(--c1) 0 315deg,var(--c2) 0)
    0/var(--s) var(--s);
}
@media (max-width: 600px) {
  .holda {
    justify-content:center;
  }
  body {
    background:#ebffeb;
  }
}
@media (max-width: 440px) {
  .sidebar {
    max-height:none;
    position:static;
  }
}

  ::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px darkgreen; 
}
::-webkit-scrollbar-thumb {
  background: green; 
}
::-webkit-scrollbar-thumb:hover {
  background: lightgreen; 
}