html{
    font-size: large;
}
#end {
    color: black;
    font-family:cursive;
    text-align: center;
}

* { box-sizing: border-box; }

a { color: #7aa7ff; }
a:hover { color: #a9c4ff; }

.container {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 24px 16px;
}

.site-header {
  margin-bottom: 16px;
}
.site-header h1 {
  margin: 0 0 4px 0;
}
.tagline {
  margin: 0;
  color: #b7c4d6;
}

.card {
  background: #121a23;
  border: 1px solid #223041;
  border-radius: 12px;
  padding: 16px;
}

.layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 16px;
  align-items: flex-start;
}

/* Left column */
.links {
  margin: 0;
  padding-left: 18px;
}

/* Right column */
.chat-frame {
  width: 100%;
  height: 520px;
  border: 0;
  border-radius: 10px;
  background: #0b0f14;
}

.chat-placeholder {
  height: 520px;
  border: 2px solid #34465d;
  border-radius: 10px;
  display: flex;
  place-items: center;
  color: #b7c4d6;
  background: rgba(0,0,0,0.15);
}

.pics {
  background: #121a23;
  border: 1px solid #223041;
  border-radius: 10px;
  padding: 13px;
}


.site-footer {
  margin-top: 16px;
  color: #8ea1b8;
}

/* Mobile: stack columns */
@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

body {
    min-height: 100%;
    height: 100%;
    margin: 8px;
    background: #0b0f14;
    line-height: 1.5;
    background-color: #333333;
    color: #00fffa;
    font-family: 'Arial', sans-serif;
    background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.3)), url('green_mountains.jpg');
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


#header1 {
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#main {
background-color:black;
border: 1px solid;
border-color:darkgrey;
color: blanchedalmond;
padding: 5px 5px 5px 5px;
width: 30%;
height:auto;
margin-left: 14%;
margin-right: 20%;
margin-top: 440%;
}