body {
  background-image: url(background.png);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-color: black;
  padding: 1rem;
  margin: 0;
  color: white;
  font-family: Kode Mono;
  text-align: center;
}

a {
  color: white;
  font-weight: bold;
  background: #46B60A;
  border-radius: 5px;
  padding: 5px;
}

a:hover {
  background: #86C934;
}

ul {
  list-style-image: url('graphics/cd.gif');
  line-height: 1.5rem;
  text-align: left;
}

hr {
  width: 100%;
  margin-top: 25px;
  margin-bottom: 15px;
  color: transparent;
  border-top: rgba(255,255,255,0.1) dotted 4px;
}

p {
  margin: 0;  
}

img {
  max-width: 100%;
  height: auto;
}

.header {
  top: 0;
  left: 0;
}

.title-block {
  padding: 5px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  max-width: 100%;
}

.title {
  font-size: 1.7rem;
  font-weight: bold;
  margin: 10px;
  --alignment: center;
  position: relative;
  text-align: center;
  max-width: 100%;
}

.subheading {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.menu-item {
  border-radius: 5px;
  padding: 5px;
  color: white;
}

.menu {
  text-align: center;
  line-height: 2rem;
}

.menu-divider {
  margin-bottom: 10px;
}

.body {
  max-width: 70%;
  width: 600px;
  margin: auto;
  background-color: rgba(255,255,255,0.031);
  border-radius: 20px;
  backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: dotted rgba(255,255,255,0.1) 4px;
	padding: 20px;
}

.art-gallery {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

.column {
  flex: 40%;
  padding-right: 4px;
  padding-left: 4px;
  max-width:70%;
}

.divider {
  max-width: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
}

.link {
  line-height: 1.25rem;
}

.big-img {
  max-width: 30%;
}

.art {
  margin-top: 4px;
  margin-bottom: 4px;
  background:none;
  vertical-align: middle;
  width:100%;
}

.img_link {
  background: none;
}

.img_link:hover {
  background:none;  
}

.center {
  text-align: center;  
}

#machine-loves {
  width: 300px;
}

#button {
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  color: white; /* Text color */
  background: #46B60A;
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 4px 10px 4px 10px; /* Some padding */
  border-radius: 5px; /* Rounded corners */
  font-size:1rem;
  font-family: Kode Mono;
}

#button:hover {
  background: #86C934;
}

@media (max-width: 780px) {
  .big-img {
    max-width: 100%;
  }
  
  .title-block {
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
  }
  
  .title {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px;
    --alignment: center;
    position: relative;
    text-align: center;
  }
  
  .title1 {
    display:none;
  }
  
  .title3 {
    display:none;  
  }
  
  .art {
    margin-top: 4px;
    margin-bottom: 4px;
    background:none;
    vertical-align: middle;
    width:100%;
  }
  
  .column {
    flex: 100%;
    max-width: 100%;
  }
}