@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');

body {
    background-color: darkblue;
    background-image: url(files/img/bg.gif);
    font-family: "Tiny5", sans-serif;
    display: flex;
    color:rgb(208, 218, 229);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}

#banner {
    width: 1000px;
    height: 146px;
    border: 2px dashed rgb(208, 218, 229);
    border-radius: 5px;
}

main {
  background-color: #1f1b29;
  border: 2px dashed #d0dae5;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 980px;
  margin-top: 5px;
  gap: 5px;
  padding: 10px;
  text-align: center;
}

#content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 950px;
  height: 150px;
  gap: 5px;
  padding: 10px;
  text-align: center;
}

#content img {
    width: 150px;
    height: auto;
}

h1, p {
    margin: 2px;
}

hr {
    border-top: 2px dashed #d0dae5;
    border-bottom: none;
    margin: 4px;
    width: 80%;
}