body{
    margin: 0px;
    background-color: beige;
    background-image: url(background.svg);
    background-size:100px;

}
#headbox{
    margin-top:20px;
    font-family: "Amarante", serif;
    align-items: left;
}
.serbian-background{
    background: linear-gradient(
        180deg,
         #C6363C 0%,
          #C6363C 33.33%,
           #0C4076 33.33%,
            #0C4076 66.66%,
             #FFFFFF 66.66%,
              #FFFFFF 100%
              );
}
.menu-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  top:5px;
  left:10px;
  position:relative;
  z-index: 11;
}
.line {
  fill: none;
  stroke: beige;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    stroke-width: 9;
    stroke-linecap:round;
    z-index: 10;
}
.line1 {
  stroke-dasharray: 60 207;
}
.line2 {
  stroke-dasharray: 60 60;
}
.line3 {
  stroke-dasharray: 60 207;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke:white;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke:white;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke:white;
}

#side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background-color: #0C4076;
  background-image: url(menu-background.svg);
  color: white;
  padding: 2rem 1rem;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
  transform: translateX(-100%);
  transition: transform 300ms ease-in-out;
  z-index: 9;


  /* Make sure it's not visible at all */
  overflow: hidden;
}

#side-menu.open {
  transform: translateX(0);
}

#side-menu ul {
  list-style: none;
  padding: 0;
  position:relative;
  top:30px;
  left:10px;
  font-size:30px;
}

#side-menu li {
  margin: 5px;
  font-family: "Amarante", serif;
}

#side-menu a {
  color: white;
  text-decoration: none;
}
#content {
    min-height:50vh;
    max-width:90%;
    color:#0C4076;
    font-family: "Amarante", serif;
    margin: 15px;
    
}
.bottom{
    background-color:#0C4076;
    background-image: url(menu-background.svg);
    background-size:150px;
    font-family: "Amarante", serif;
    color:white;
    align-content:center;
}
.bottom #bottominfo {
    display: flex;
    justify-content: center;
    margin-top:20px;
    gap:20px;
}
.bottom #bottominfo div {
    text-align:left;
}
.bottom #bottominfo p {
    margin:5px;
}
.link a {
    color:white;
    text-decoration:none;
    transition: text-shadow 0.3s ease;
}
.link a:hover{
    text-shadow:
        0 0 5px #fff,
        0 0 10px #0ff,
        0 0 20px #0ff,
        0 0 30px #0ff;
}
@media (max-width: 768px) {
    .bottom #bottominfo {
        flex-direction: column;
        align-items: center;
    }
}