@font-face {
  font-family: "Norse";
  src: url("fonts/Norse-KaWl.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body {
    background-color: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Sidebar */
.sidebar-container {
    position: fixed;
    height: 100vh;
    width: 260px;
    background: #303030;
    transition: width 0.35s ease;
    overflow: hidden;
    border-right: 1px solid #646464;
    box-shadow: 3px 0px 14px #222222;
}

/* Lukket sidebar */
.sidebar-container.closed {
    width: 80px;
}

/* Liste */
.sidebar-container ul {
    list-style: none;
    padding: 10px;
}

/* Header */
#title_sidebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    color: white;
}

.logo {
    font-size: 18px;
    white-space: nowrap;
    transition: opacity 0.3s;
    font-family: Norse;
}

.sidebar-container.closed .logo {
    opacity: 0;
}

/* Toggle */
#toggle-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

/* Links */
.sidebar-container a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.25s;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
}

.sidebar-container a:hover{
    background: #3f504c;
}

/* Icons */
.sidebar-container i {
    min-width: 25px;
    text-align: center;
}
.sidebar-container .active a {
    background: #415534;
    box-shadow: 0px 0px 7px #4d4d4d;
}

.text-container {
    margin-left: 260px;
    padding: 30px;
    color: white;
    transition: margin-left 0.35s ease;
}
/* Når sidebaren er lukket */
.sidebar-container.closed ~ .text-container {
    margin-left: 80px;
}

.sidebar-container.closed a span {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
}

.sidebar-container a span {
    white-space: nowrap;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.sidebar-container.closed #title_sidebar {
    justify-content: center;
}

.sidebar-container.closed .logo {
    display: none;
}

.text-container {
    color: black;
}