/* General */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    color: #333;
    background-color: #f4f4f4;
}

/* Header */
header {
    background-color: #3498db;
    color: #fff;
    padding: 20px;
    text-align: center;
    position: relative; /* For navikort */
}

nav {
    display: flex;
    justify-content: center;
    padding: 10px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s;
}

nav a:hover {
    color: #f0f0f0;
}

/* Main Content */
main {
    padding: 20px;
    max-width: 960px;
    margin: 0 auto;
}

.container {
    width: 80%;
    margin-bottom: 20px;
    padding: 20px;
}

/* Menu */
#menu {
    padding: 10px;
    background-color: #eee;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

#menu-item-1 {
    margin-right: 20px;
}

#menu-item-2 {
    margin-right: 20px;
}

#menu-item-3 {
    margin-right: 20px;
}

#menu-item-4 {
    margin-right: 20px;
}

/* Content */
.content {
    padding: 20px;
}

.content h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

.content p {
    font-size: 1.2em;
}

/* Footer */
footer {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    text-align: center;
}

/* WCAG Compliance -  Basic Styling */
/*  Important:  You'll need to add more detailed CSS rules for full WCAG compliance.  See the WCAG guidelines for details.
  *  Use sufficient color contrast (minimum 4.5:1 ratio for normal text and 3:1 for large text).
  *  Ensure sufficient color contrast between text and background.
  *  Make sure content is legible for users with low vision.
  *  Use semantic HTML.
  */