/* БАЗА */
@font-face {
  font-family: 'Cross-Stitch-Initials'; 
  src: url('fonts/unscii-16.ttf') format('truetype'); 
  font-weight: 400; 
  font-style: normal; 
  font-display: swap; 
}
body {
  margin: 0;
  background: #0a0a0a;
  color: #ccc;
  font-family: 'Cross-Stitch-Initials', Arial;
}

.layout {
  min-height: 100vh; /*тянется вниз*/
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  padding: 20px;
}

.menu {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  background: #111;
}

.menu a {
  color: #ccc;
  text-decoration: none;
}

.container {
  flex: 1; /*растягивает контент вниз */
  display: flex;
  width: 1000px;
  margin: auto;
  gap: 15px;
}

.sidebar {
  width: 250px;
}

.content {
  width: 500px;
}

.box {
  background: #111111;
  margin-bottom: 15px;
  border-radius: 10px;
}

.box-title {
    margin-bottom: 7px;
    padding-left: 5px;
    text-shadow: 0 0 3px black;
    color: white;
    border-radius: 4px;
    background: linear-gradient(180deg, #290000 0%, #570d0d 45%, #290000 47%, #290000 60%, #a12727 100%);
    border: solid 2px gray;
    filter: drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0.5px gray) drop-shadow(0.5px 0.5px 1px gray) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black);
}


.box-content {
  padding: 10px;

}

.btn {
  background: #222;
  border: 1px solid #444;
  color: #ccc;
  padding: 5px 10px;
}

.footer {
  text-align: center;
  padding: 10px;
  background: #111;
}
.image-of-site{
  border-radius: 10px;
}