* {
  box-sizing: border-box;
}
@font-face {
  font-family: midnight;
  src: url("fonts/KGMidnightMemories.ttf");
}
@font-face {
  font-family: michland;
  src: url("fonts/Michland Script.otf");
}
@font-face {
  font-family: squids;
  src: url("fonts/Game Of Squids.otf");
}
body {
  margin: 0;
  font-family: midnight;
  color: white;
  background-image: url("https://i.pinimg.com/736x/b3/36/72/b33672eb5122df63d3bd8c793ed23683.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
  cursor: url("https://cdn-icons-png.flaticon.com/128/2662/2662800.png"), auto;
}

#container {
  max-width: 950px;
  margin: 0 auto;
}

#header {
  width: 100%;
  height: 200px;
  background-image: url("https://i.pinimg.com/736x/9a/55/42/9a5542c55ab7acff8e4f44800ec32b04.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.logo {
  font-family: michland;
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 90px;
  text-shadow: 5px 5px 1px #DA70D6;
}

#navbar {
  width: 100%;
  height: 40px;
  background-color: #363636;
}

#navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}

#navbar a {
  color: white;
  font-size: 22px;
  text-decoration: none;
  font-weight: bold;
}

#navbar a:hover {
  color: #F0E68C;
  text-decoration: underline;
}

#marquee {
  margin-top: 5px;
  margin-bottom: 5px;
  border: 4px double white;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
}

#flex {
  display: flex;
  gap: 5px;
}

aside {
  width: 300px;
  background-color: #1C1C1C;
  padding: 20px;
  font-size: smaller;
}

main {
  flex: 1;
  background-color: #363636;
  padding: 20px;
  font-family: midnight;
}

h1, h2, h3 {
  color: white;
}

strong {
  color: #D8BFD8;
}

a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
  font-style: italic;
  cursor: url("https://cdn-icons-png.flaticon.com/128/1806/1806528.png"), pointer;
}

.box {
  width: 100%;
  border: none;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: none;
}

.box img {
  width: 100%;
  display: block;
}

.box1 {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: 10px;
  background-color: white;
}

.box2 {
  width: 100%;
  height: 250px;
  overflow: hidden;
    margin-bottom: 10px;
  background-color: white;
}
.box3 {
  width: 100%;
  height: 100px;
  overflow: hidden;
  background-color: white;
}

#leftSidebar {
  width: 200px;
  background-color: #1C1C1C;
  padding: 20px;
}

#rightSidebar {
  width: 200px;
  background-color: #1C1C1C;
  padding: 20px;
}

footer {
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}