/* Regular Weight */
@font-face {
  font-family: 'Iosevka Term';
  src: url('/fonts/iosevka-term-extended.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-stretch: expanded;
  font-display: swap;
}

/* Bold Weight */
@font-face {
  font-family: 'Iosevka Term';
  src: url('/fonts/iosevka-term-extendedbold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-stretch: expanded;
  font-display: swap;
} 

body{ 
  background-color: #21222b;
  font-family: 'Iosevka Term';
  color: white;
  margin:0;
} 
div.header{
  display:flex;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: #2b2b38;
  border-color: darkred;
  border-bottom-style: solid;
  justify-content: left;
}

div.leftbeef{
  display:flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}

ul.rightnothing {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

ul.rightnothing li a{
 text-decoration: none;
 background-color: #2b2b2b;
 color: white;
 padding: 8px 10px;
 gap: 6px;
 
}

ul.rightnothing li a:hover{
 background-color: #520000;
}


img.leftbar{
  flex-shrink: 0;
  width: 140px;
}

.leftlist {
  list-style: none;
  display: block;
  background: #2b2b38;
  padding: 0;
  margin: 0;
  width: 140px;
  height: calc(auto + 10px);
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}

.leftlist li {
  position: relative;
}

.leftlist a {
  display: block;
  padding: 8px 10px;
  color: white;
  
}

.has-dropdown > a::before {
  content: "";
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  list-style-type: none;
  
  
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white; 
  transform: rotate(90deg);
  transition: transform 0.1s ease; 
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #2b2b38;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 160px;
  display: none; 
  list-style-type: none;
  z-index: 9999;
}

.dropdown a {
  padding: 10px 20px;
  text-align: left;
}

.dropdown li{
  display: block;
  width: 100%;
}

.has-dropdown:hover .dropdown {
  display: block;
}

.has-dropdown:hover > a::before {
  transform: rotate(0deg);
}

.dropdown li a:hover {
  background:#520000
}

.container{
    display: flex;
}

.content{
  margin-left: 6px;
}
.imagegrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 80vw;

}

.imagegrid p{
    font-weight: 700;
    text-decoration: underline;
}
.imagegrid a img{
  max-width: 20vw;
  object-fit: cover;
  aspect-ratio: 16 / 10;
 
}