:root {
  --light-bg: rgba(238, 238, 238, 1.0);
  --light-fg: rgba(238, 238, 238, 1.0);

  --navbar-btn-bg: rgba(102, 102, 102, 1.0);
  --navbar-btn-bg-hover: rgba(151, 151, 151, 1.0);
  --navbar-btn-fg: white;

  --marquee-bg: rgba(0, 0, 0, 1.0);
  --marquee-bg-img: url(../media/dots.png);
  --marquee-border: rgba(102, 102, 102, 1.0);
  --marquee-fg: rgba(151, 151, 151, 1.0);
  --marquee-text: white;
  --marquee-text-url: rgba(255, 255, 0, 1.0);
}



body {
  background: black;
  font-family: chicago, sans-serif;
}

.content {
  max-width: 1000px;
  margin: auto;
  text-align: center;
  background: var(--light-bg);
  color: black;
}

.img-container-centre {
  text-align: center;
}

.img-container-left {
  text-align: left;
}

.img-std {
  border-radius: 40px 40px;
  filter: drop-shadow(5px 5px);
}

.img-std-nocurv {
/*  border-radius: 40px 40px;*/
  filter: drop-shadow(5px 5px);
}

.site-summary {
/*  background: rgba(0, 50, 0, 1.0);*/
  text-align: left;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  margin-bottom: 5%;
}

.contacts {
  margin-top: 5%;
  margin-bottom: 5%;
}

.contact-item {
  background-color: black;
  display: block;
/*  float: left;*/
  width: 50%;
  height: 100%;
  border: 1px solid white;
  margin-bottom: 2%;
}
.contact-item:hover {
  scale: 105%;
}

.contact-item:active {
  scale: 100%;
  background-color: darkgray;
  color: gray;
}

.contact-item-text {
  background-color: green;
  width:100%;
  background:#f00;
  display:inline-block;
  border-top: 1px solid white;
}

.contact-item-img {
/*  background-color: blue;*/
  margin-left: 2%;
  margin-top: 1%;
}

.navbar {
  display: flex;
}

.navbar-btn {
  width: 200%;
  background: var(--navbar-btn-bg);
  color: var(--navbar-btn-fg); 
  border-top-left-radius: 40px 40px;
  border-top-right-radius: 80px 80px;
}

#red-btn {
  background: darkred;
}

#orange-btn {
  background: darkorange;
}

#yellow-btn {
  background: yellow;
  color: black;
}

#green-btn {
  background: seagreen;
}

#blue-btn {
  background: darkblue;
}

#purple-btn {
  background: purple;
}

.navbar-btn:hover {
  text-decoration: underline;
  cursor: pointer;
}


.blog-feed {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(10%, auto);
}

.marquee {
  margin: auto;
  background-image: var(--marquee-bg-img);
  background-color: var(--marquee-bg);

  color: var(--marquee-fg);
  font-family: 'Courier New', monospace;

  border-color: var(--marquee-border);
  border-style: solid;
  border-width: 10px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
  text-transform: uppercase;
}

@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

.marquee-text {
  color: var(--marquee-text);
}
.marquee-text-url {
  color: var(--marquee-text-url);
}
.marquee:hover > .marquee-text-url {
  color: var(--marquee-text-url);
  font-style: bold;
  text-decoration: underline;
  cursor: pointer;
  scale: 125%;
}

.footer {
  max-width: 1000px;
  margin: auto;
  text-align: center;
/*  background: purple;*/
  color: var(--light-fg);
}

.footer-container {
  display: flex;
  text-align: left;
  gap: 15%;
}

.footer-explore {
  width: 200%;
}

.footer-support {
  width: 200%;
}

.footer-other {
  width: 200%;
}

.ko-fi-container {
  text-align: center;
}

.ko-fi-btn {
  width: 30%;
}

.ko-fi-btn:hover {
  scale: 105%;
  cursor: pointer;
}


.blog-img {
    height: 50%;
    width: 50%;
}

.blog-img-container {
    text-align: center;
}

/* Button Styles */

/* Large Button */
.btn-lrg-anchor {
  flex-direction:column;
  text-align: center;
  scale: 100%;
}

.btn-lrg-container {
  display: block;
}

.btn-lrg {
  background-color: var(--navbar-btn-bg);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
  border-radius: 9999px;
  scale: 120%;
  border: 0px solid;
  color: var(--navbar-btn-fg);
  cursor: pointer;
  font-weight: 600;
  margin: 1em 1ex;
  padding: 1ex 1em;
  position: relative;
  text-shadow: 0 2px 0.5em #0003;
  transition: all 300ms;
}

.btn-lrg:hover {
  box-shadow: 0 6px 8px rgba(255, 255, 255, 0.4);
}

.btn-lrg:active {
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.4);
  }

.btn-lrg:disabled {
  pointer-events: none;
}