/*html { background: url('img/bg1.jpg') center center fixed; }*/
body { 
    font-family: Arial, sans-serif; 
    /*padding: 0 1rem 1rem 1rem;*/
    /*background: #444;*/ 
    color: black;
    width: 500px; 
    margin: 0 auto; 
    /*background: url('../img/bg1.jpg') black center center fixed;*/ 
    overflow-y: scroll; 
}
h1 {
    font-family: var(--bs-body-font-family);
    color: #ddd;
}
h2 { 
    font-family: var(--bs-body-font-family);
    color: #ddd; 
    text-align: center; 
}
ul { 
    list-style: none; 
    padding: 0; 
}
li { 
    margin: 0.5rem 0; 
    padding: 0.5rem; 
    background: #ddd; 
    border-left: 10px solid #0077cc;
}
li li { 
    margin: 0 0; 
    padding: 0.2rem 0; 
    border-left: 0; 
}
ul.recent-activity {
    padding-bottom: 2rem;
}
ul.recent-activity li {
    border-radius: 5px 
}
ul.details { 
    margin-left: 0.5rem; 
}
ul.details li {
    border-radius: 0;
}
.joined { 
    border-color: green; 
}
.withdrew { 
    border-color: red; 
}

li.title {
    font-weight: 700;
}
li.event::before,
li.date::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.4em;
  vertical-align: text-top;
}
li.event::before {
  background-image: url("../img/marker-64.png");
}
li.date::before {
  background-image: url("../img/clock-64.png");
}
p.rss {
    text-align: center;
}
p.rss a {
    color: #ddd;
}
p.rss a:hover,
p.rss a:focus {
    color: orange;
}
p.rss a::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.4em;
  vertical-align: text-top;
}
p.rss a::before {
  background-image: url("../img/rss-64.png");
}

@media (max-width: 768px) {
    body {
        width: 90%;
    }
}