/* 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." */

.opening-body, .homepage-body {
  background-image: url('/images/background.jpg'); /* Specifies the image file */
  background-size: cover; /* Scales the image to cover the entire container, maintaining aspect ratio */
  background-position: center center; /* Centers the image both horizontally and vertically */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-attachment: fixed; /* Keeps the background image fixed while the content scrolls */
  min-height: 100vh; /* Ensures the body takes up at least the full viewport height */
  margin: 0; /* Removes default body margin to prevent whitespace */
  padding: 0; /* Removes default body padding */
  
}

@font-face {
  font-family: header-font;
  src: url(fonts/categories_elegant.ttf);
}

@font-face {
  font-family: sidebar-font;
  src: url(fonts/Suncos.ttf);
}

h1, h2, h3, h4, h5, h6, .opening-text {
  font-family: header-font;
  font-size: 50px;
  color: white;
}

.opening-text {
  display: flex;
  justify-content: center; /* Centers content horizontally */
  align-items: center;   /* Centers content vertically */
  height: 100vh; /* Example: Centers within the viewport height */
}

.open-link {
  text-decoration: none;
}  

.open-link:hover {
  letter-spacing: 2px;
}

.container {
    display: flex;
    width: 700px;
    height: 500px;
    box-shadow: -10px 10px 0px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 100;
    cursor: url('/img/icon1.png'), auto;
}

.header {
    font-family: Kurale;
    background-color: #7F7176;
    color: #424242;
    padding: 10px;
    text-align: center;
    transform: translate(110px, -320px) rotate(3deg);
    width: 300px;
    box-shadow: -10px 10px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease-in-out;
    text-decoration: none;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 700;
    cursor: url('/img/icon1.png'), auto;
}

.sidebar {
    width: 170px;
    background-color: #b05f89;
    color: #424242;
    padding: 20px;
    cursor: url('/img/icon1.png'), auto;
}

.sidebar a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: block;
    height: 25px;
    line-height: 30px;
    padding: 5px 10px 5px 10px;
    font-size: 20px;
    cursor: url('/images/cursor.png'), auto;
    font-family: sidebar-font;
}

.sidebar a:hover {
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
}

.content {
    flex: 1;
    padding: 20px;
    background-color: rgba(185, 67, 127, 0.5);
    overflow-x: hidden;
    overflow-y: auto;
    color: #ffffff;
    font-size: 20px;
    cursor: url('/images/cursor.png'), auto;
    font-family: sidebar-font;
}