/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

  h1, h2, h3, h4, h5, h6 {
  
  font-family: 'Fredoka One', cursive;
  font-weight: bolder;
}

body {
  margin: 0;
 font-family: 'Fredoka One', sans-serif;
 font-weight: 500;

  background-image: url("wallpaper, Naruto.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.panel {
  width: 850px;
  border-radius: 30px;
  overflow: hidden;

  background: linear-gradient(to bottom, #5c7cff, #3a4edb);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.4),
    inset 0 2px 6px rgba(255,255,255,0.3);
}

.panel-top {
  padding: 25px;
  background: linear-gradient(to bottom, #8fb4ff, #4f6df5);
  border-bottom: 3px solid #2e45c7;
  box-shadow: inset 0 4px 8px rgba(255,255,255,0.4);
}

.panel-top h1 {
  margin: 0;
}

.panel-top p {
  margin: 5px 0 0 0;
}

.panel-body {
  display: flex;
  padding: 20px;
  gap: 20px;
}

.sidebar {
  width: 220px;
}

.menu-section {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 14px;
  border: 2px solid #2e45c7;

  background: linear-gradient(to bottom, #5f7cff, #3a4edb);
}

.section-title {
  font-weight: bold;
  padding: 8px;
  margin-bottom: 8px;
  border-radius: 10px;

  background: linear-gradient(to bottom, #8fb4ff, #4f6df5);
  border: 2px solid #2f49d1;
}

.sidebar a {
  display: block;
  padding: 8px;
  margin-bottom: 6px;

  color: white;
  text-decoration: none;
  font-weight: bold;

  border-radius: 10px;
  border: 2px solid #2f49d1;

  background: linear-gradient(to bottom, #7ea6ff, #4f6df5);

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.4),
    0 2px 0 rgba(0,0,0,0.3);
}

.sidebar a:hover {
  background: linear-gradient(to bottom, #9bbcff, #5f7cff);
  transform: translateX(4px);
  transition: 0.2s ease;
}

.content {
  flex: 1;
  background: rgba(255,255,255,0.1);
  padding: 20px;
  border-radius: 20px;
}
.imagetop{
  width: 100px; transform: rotate(340deg)
}
p {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.bold {
  font-weight: bold;
  display: flex;
}
.container p {
  margin: 1px;
}