@font-face {
            font-family: 'Aberus';
            src: url('css/aberus-webfont.woff') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        @-webkit-keyframes zoom {
            from {transform: scale(0)}
            to {transform: scale(1)}
        }
        @keyframes zoom {
            from {transform: scale(0.1)}
            to {transform: scale(1)}
        }
		@keyframes fadeIn {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}
        :root {
            --background-image-1-path: url('img/site/1_1.jpg');
            --background-image-2-path: url('img/site/2_2.jpg');
            --header-image-path: url('img/site/header.jpg');
        }

        a {
            text-decoration: none;
        }

        body {
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            background-image: var(--background-image-1-path);
            background-size: 50px;
            background-repeat: repeat;
            background-attachment: fixed;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        header {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 10px 20px;
              position: relative;
              height: 315px;
              border-width: 5px;
              border-bottom-width: 0px;
              border-style: solid;
              border-radius: 5px;
              border-image-source: var(--background-image-2-path);
              border-image-slice: 10;
              border-image-repeat: round;
              z-index: 1;
        }
        header::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-image: var(--header-image-path);
              background-size: cover;
              background-position: center;
              opacity: 1;
              z-index: -1;
              border-radius: inherit;
        }
        header img {
            height: 200px;
        }

        nav {
            width: 350px;
            text-align: center;
            text-transform: uppercase;
            padding: 2px 0;
            margin: 0;
            height: 100px;
            border-radius: 5px;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: inline-block;
        }
        nav ul li {
            display: inline;
        }
		nav ul li:hover {
			background-image: var(--background-image-2-path);
            background-size: 50px;
            background-repeat: repeat;
            color: rgba(255,255,128,0.9);
		}
        nav ul li a {
            color: rgba(0,255,255,0.5);
			text-shadow: 0px 0px 1px rgba(0,255,128,0.5);
            text-decoration: none;
            font-weight: bold;
            font-size: 20px;
            padding: 8px 15px;
            border-radius: 5px;
            border-width: 5px;
            border-style: solid;
            border-image-source: var(--background-image-2-path);
            border-image-slice: 10;
            border-image-repeat: round;
            background-image: var(--background-image-1-path);
            background-size: 50px;
            background-repeat: repeat;
            border: 1px dashed rgba(255,255,255,0.2);
            display: inline-block;
            width: 250px;
            min-width: 250px;
            max-width: 100%;
            height: 20px;
            text-align: center;
			gap: 5px;
			margin-top: 0px;
        }
        nav ul li a:hover {
            background-image: var(--background-image-2-path);
            background-size: 50px;
            background-repeat: repeat;
            border: 1px dotted black;
            color: rgba(255,255,128,0.9);
        }

		.menu-class,
		.cart-class {
			list-style-type: none; /* Fjern standard punktmerking */
			display: none;
			width: 300px;
			max-width: 500px;
			max-height: 550px;
			margin: 0 auto;
			background-color: rgba(255, 255, 255, 0.8);
			flex-direction: column;
			border-radius: 5px;
			position: relative;
			z-index: 999;
			gap: 10px; /* Avstand mellom boksene */
			text-align: center;
			justify-content: center;
			align-items: center;
			background-image: var(--background-image-1-path);
			background-size: 50px;
			background-repeat: repeat;
		}

		.cart-class-title,
		.menu-class-title {
			color: rgba(0, 0, 255, 0.5);
			text-shadow: 1px 1px 2px pink;
			text-align: center;
			justify-content: center;
			align-items: center;
		}

		.menu-class ul,
		.cart-class ul {
			overflow: auto;
			max-height: 500px;
		}

		.menu-class li,
		.cart-class li {
			background-color: rgba(255, 255, 255, 0.8); /* Bakgrunnsfarge */
			border: 1px solid #ccc; /* Kantlinje */
			border-radius: 5px; /* Runde hjørner */
			padding: 10px 15px; /* Innvendig padding */
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Skygge */
			transition: transform 0.2s, box-shadow 0.2s; /* Glatte overganger */
			max-width: 300px;
			width: 200px;
			text-align: center;
			justify-content: center;
			align-items: center;
			display: flex;
		}

		.menu-class li:hover,
		.cart-class li:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
			color: #007BFF;
			cursor: pointer;
		}

		/* Målrett a-elementet når li-elementet er i hover-tilstand */
		.menu-class li:hover a,
		.cart-class li:hover a {
			color: #007BFF; /* Endre tekstfarge ved hover */
		}

		.menu-class li:first-child,
		.cart-class li:first-child {
			margin-top: 10px; /* Juster denne verdien for ønsket topp-padding */
		}

		.menu-class li a,
		.cart-class li a {
			text-decoration: none;
			color: #333;
			font-weight: bold;
			display: block;
			text-align: center;
			justify-content: center;
			align-items: center;
		}

		.menu-class li a:hover,
		.cart-class li a:hover {
			color: #007BFF; /* Endre tekstfarge ved hover */
		}

		.announcement-nav {
			display: block;
		}
		.announcement {
			display: none;
		}

        .main {
            flex: 1;
            display: flex;
        }
        .content-div {
            border-width: 5px;
            border-style: solid;
            border-image-source: var(--background-image-2-path);
            border-image-slice: 10;
            border-image-repeat: round;
            border-radius: 5px 5px 0px 0px;
            flex: 1;
            background-image: var(--background-image-1-path);
            background-position: center;
            background-repeat: repeat;
            background-size: 50px;
        }
        .content-inside {
            background-color: rgba(0, 0, 0, 0.7);
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px;
            border-radius: 5px;
            height: 100%;
        }
        .content {
            margin: 10px auto;
            text-align: center;
            min-height: 500px;
        }
        #heading {
            letter-spacing: 2px;
            color: rgba(255, 255, 0, 0.5);
            -webkit-text-stroke: 0.1px rgba(0, 0, 255, 0.5);
        }
        #intro-text {
            color: rgba(128, 255, 0, 0.5);
            -webkit-text-stroke: 0.1px rgba(0, 0, 255, 0.5);
        }
        .product-div {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 5px;
            display: none;
            padding: 5px auto;
            margin: auto;
        }
        .products {
            display: flex;
            justify-content: center;
            flex-wrap: wrap; /* Allows products to wrap to the next line if necessary */
            gap: 5px;
        }
        .product {
            flex: 1 0 calc(10% - 5px); /* Adjust width as per your design */
            border: 5px dashed transparent;
            border-radius: 5px;
            padding: 5px auto;
            margin: 5px auto;
			width: 200px;
			min-height: 400px;
            text-align: center;
        }
		.product button {
			border-radius: 5px;
			background-color: rgba(255, 255, 128, 0.3);
			color: black;
			font-weight: bold;
			opacity: 0,5;
			width: 200px;
			height: 30px;
			font-size: 20px;
			font-family: Courier New;
			letter-spacing: 1,5px;
			border: 1px dashed rgba(255,255,255,0.1);
			margin-top: 2px;
			cursor: pointer;
		}
		.product button:hover {
			background-color: yellow;
		}
		.product h2 {
			color: blue;
		}
        .product h3 {
            font-family: 'Courier New', Arial, sans-serif;
            font-size: 12px;
            font-weight: normal;
            margin-bottom: 5px;
			color: yellow;
        }
        .product p {
            font-family: Arial, sans-serif;
            font-size: 12px;
            color: #888;
        }
		.product-carousel-container {
			position: relative;
			margin: auto;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 200px;
			height: 250px;
		}
		.product-carousel-variant-title-container {
					display: inline-block;
					transform: rotate(-90deg);
					transform-origin: left top;
					white-space: nowrap; /* Prevent text wrapping */
					text-shadow: 2px 2px 10px black;
					padding: 1px;
					color: yellow;
					top: 70%;
					left: -41%;
					background-color: black;
					position: relative;
		}
		.product-carousel-picture {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			position: relative;
			/* z-index: 1; /* Ensure the picture is behind the buttons */
			border-radius: 20px;
		}
		.product-carousel-column {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
		}
		.product-carousel-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 35px;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		.product-carousel-picture-header {
			display: flex;
			justify-content: space-between;
			font-size: 30px; /* Adjust font size as needed */
			align-items: center;
			width: 35px;
			background-color: white;
			border: 1px dashed black;
			border-radius: 50%;
			height: 35px;
			position: absolute;
			right: 0;
			top: 0;
			padding: 0px auto;
			align-items: center;
			justify-content: center;
			color: black;
			transform: rotate(45deg);
			margin: 5px;
			opacity: 0.8;
			cursor: pointer;
		}
		.product-carousel-picture-header:hover {
			opacity: 0.9;
		}
		.product-carousel-picture-header::after {
			content: '\21D5';
		}
		.product-carousel-prevPicture, .product-carousel-nextPicture {
			width: 35px;
			height: 35px;
			border-radius: 50%;
			border: 1px dashed white;
			font-size: 20px; /* Adjust font size as needed */
			font-weight: bold;
			cursor: pointer;
			background-color: rgba(0, 0, 0, 0.5); /* Make buttons semi-transparent */
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			text-shadow: 2px 2px 5px black;
			margin-bottom: 25px;
			opacity: 0.9;
		}
		.product-carousel-prevPicture {
			margin-left: 10%;
		}
		.product-carousel-nextPicture {
			margin-right: 10%;
		}
		.product-carousel-variantUp, .product-carousel-variantDown {
			width: 35px;
			height: 35px;
			border-radius: 50%;
			border: 1px dashed white;
			font-size: 20px; /* Adjust font size as needed */
			font-weight: bold;
			cursor: pointer;
			background-color: rgba(0, 0, 0, 0.5); /* Make buttons semi-transparent */
			display: flex;
			align-items: center;
			margin-left: 5px;
			margin-top: 5px; margin-bottom: 5px;
			justify-content: center;
			color: white;
			text-shadow: 2px 2px 5px black;
			z-index: 2; /* Ensure the buttons are in front of the picture */
			opacity: 0.9;
		}
		.product-carousel-variantUp:hover, .product-carousel-variantDown:hover,
		.product-carousel-prevPicture:hover, .product-carousel-nextPicture:hover {
			opacity: 0.8;
		}
		.product-carousel-variantUp::after {
			content: '\21E7';
		}
		.product-carousel-variantDown::after {
			content: '\21E9';
		}
		.product-carousel-nextPicture::after {
			content: '\21E8';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: white;
			text-shadow: 2px 2px 5px black;
		}
		.product-carousel-prevPicture::after {
			content: '\21E6';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: white;
			text-shadow: 2px 2px 5px black;
		}
        .product-carousel-track {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            width: 100%;
        }       .product-carousel-slide {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .product-carousel-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
        }
		.pnPictureText-span {
			text-shadow: 2px 2px 10px black;
            padding: 1px;
			color: yellow;
			opacity: 0.1;
		}

         footer {
			font-size: 12px;
            border-width: 5px;
            border-style: solid;
            border-image-slice: 10;
            border-image-repeat: round;
            border-radius: 0px 0px 5px 5px;
            background-image: var(--background-image-1-path);
            background-position: center;
            background-repeat: repeat;
            background-size: 50px;
            text-align: center;
            border-image-source: var(--background-image-2-path);
        }
        .footer-inside {
            background-color: rgba(255, 255, 200, 0.7);
            padding: 20px;
            border-radius: 0px 0px 5px 5px;
            height: 100%;
        }
        .footer-inside span {
            line-height: 0.7;
        }
        .footer-inside span a {
            color: black;
        }
        .footer-inside img a {
            margin-bottom: 15px;
        }	

        .gdpr-modal {
            display: none;
            position: fixed;
            z-index: 1002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            justify-content: center;
            align-items: center;
        }
        .gdpr-modal button {
            margin-top: 10px;
        }
        .gdpr-close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .gdpr-close:hover,
        .gdpr-close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .gdpr-modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            text-align: center;
            border-radius: 5px;
            position: relative;
        }

		.image-modal {
			display: none;
			position: fixed;
			z-index: 1000;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.9);
			justify-content: center;
			align-items: center;
			overflow: auto;
		}
		.image-modal-content {
			height: 80%;
			min-width: 50%;
			max-width: 90%;
			background-color: rgba(0, 0, 0, 0.9);
			border: 1px solid #000;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			padding: 0px;
			box-sizing: border-box;
			margin: auto; 
			top: 50%;
			transform: translateY(-50%);
			overflow-y: auto;
		}
		.image-modal-title {
			width: 100%;
			height: 50px;
			background-color: lightblue;
			display: flex;
			justify-content: center;
			align-items: center;
			color: black;
			font-size: 1.2em;
			font-weight: bold;
		}
		.image-modal-content-wrapper {
			display: flex;
			width: 100%;
			height: calc(100% - 200px);
			justify-content: center;
			align-items: center;
		}
		.image-modal-left-container {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			margin-right: 0px;
			color: white;
		}
		.image-modal-left-div {
			width: 35px;
			height: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			border-radius: 5px;
			border: 1px dashed white;
		}
		.image-modal-left-div + .image-modal-left-div {
			
		}
		.image-modal-image-container {
			flex-grow: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.image-modal-image {
			height: 100%;
		}
		.image-modal-bottom-container {
			display: flex;
			width: 100%;
			height: 50px;
			justify-content: center;
			align-items: center;
			background-color: white;
			color: black;
			font-size: 1em;
		}
		.image-modal-bottom-nav {
			display: flex;
			width: 100%;
			height: 50px;
		}
		.image-modal-nav-button {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: orange;
			cursor: pointer;
			font-size: 1.5em;
			color: white;
		}
		.image-modal-nav-button + .image-modal-nav-button {
			background-color: yellow;
		}
		.image-modal-close {
			position: absolute;
			top: 10px;
			right: 20px;
			color: #fff;
			font-size: 35px;
			font-weight: bold;
			cursor: pointer;
		}
		.image-modal-caption {
			width: 100%;
			height: 50px;
			background-color: purple;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 1em;
		}

		.measurement-modal {
			position: fixed;
			z-index: 1000;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.9);
			justify-content: center;
			align-items: center;
			overflow: auto;
			display: none;
		}
		.measurement-modal-content {
			height: 80%;
			min-width: 50%;
			max-width: 90%;
			background-color: rgba(0, 0, 0, 0.9);
			border: 1px solid #000;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			transform: translateY(-50%);
			overflow-y: auto;
		}		
		.measurement-container {
			background-image: url('img/site/figure.png');
			background-size: cover;
			width: 290px;
			height: 651px;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.measurement-body-part {
			font-family: 'Courier', monospace;
			position: absolute;
			display: none; /* Initially hidden */
			flex-direction: column;
			align-items: center;
			animation: fadeIn 1s ease forwards;
			text-transform: uppercase;
			z-index: 1;
		}
		.measurement-title {
			background-color: rgba(255, 128, 128, 0.3);
			font-weight: bold;
			text-shadow: 2px 2px 2px rgba(0,0,0, 0.9);
			margin-bottom: 5px;
			font-size: 20px;
			padding-left: 5px;
			padding-right: 5px;
			text-align: center;
			color: white;
			border-radius: 5px;
			white-space: nowrap;
		}
		.measurement-set {
			background-color: black !important;
			color: yellow !important;
		}
		.measurement-title:hover {
			background-color: rgba(255, 128, 128, 0.9);
			color: black;
			text-shadow: 2px 2px 2px rgba(255,255,255, 0.9);
			cursor: pointer;
		}
		.measurement-circle {
			width: 100%;
			height: 5px;
			background-color: transparent;
			border: 3px dashed rgba(255, 128, 128, 0.9);
			border-radius: 50%;
			position: relative;
			z-index: 2;
		}
		.measurement-line {
			width: 100%;
			height: 0px;
			border: 1px dashed rgba(255, 128, 128, 0.9);
			position: relative;
			z-index: 2;
		}
		/* Plassering av innvendige DIV-er */
		.measurement-head { top: 30px; left: 120px; width: 57px; flex-direction: column; }
		.measurement-throat { top: 80px; left: 125px; width: 50px; flex-direction: column; }
		.measurement-shoulder { top: 120px; left: 70px; width: 155px; flex-direction: column; align-items: center; }
		.measurement-chest { top: 175px; left: 95px; width: 110px; flex-direction: column; }
		.measurement-stomach { top: 230px; left: 100px; width: 100px; flex-direction: column; }
		.measurement-left-arm { top: 210px; left: 55px; width: 25px; flex-direction: column; }
		.measurement-hip { top: 270px; left: 90px; width: 120px; flex-direction: column; }
		.measurement-right-arm { top: 305px; left: 40px; width: 20px; flex-direction: column; }
		.measurement-arm-length { top: 85px; left: -10px; width: 200px; height: 380px; flex-direction: column; transform: rotate(85deg); }
		.measurement-left-feet1 { top: 350px; left: 85px; width: 50px; flex-direction: column; }
		.measurement-left-feet2 { top: 550px; left: 70px; width: 25px; flex-direction: column; }
		.measurement-left-knee { top: 430px; left: 80px; width: 45px; flex-direction: column; }
		.measurement-feet-length { top: 280px; left: -90px; width: 280px; height: 380px; flex-direction: column; transform: rotate(85deg); }
		.measurement-body-length { top: 150px; left: -160px; width: 600px; height: 380px; flex-direction: column; transform: rotate(90deg); }
		.measurement-title-left { flex-direction: row-reverse; }
		.measurement-title-right { flex-direction: row; }

		/* Style for measurement input container */
		.measurement-popup {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: rgba(0, 0, 0, 0.8);
			color: white;
			padding: 20px;
			border-radius: 10px;
			z-index: 1000;
			display: none;
		}
		.measurement-popup input {
			width: 100%;
			padding: 8px;
			font-size: 16px;
			margin-bottom: 10px;
			box-sizing: border-box;
		}
		.measurement-popup button {
			padding: 10px 20px;
			background-color: #4CAF50;
			color: white;
			border: none;
			cursor: pointer;
			border-radius: 5px;
		}
		.measurement-popup button:hover {
			background-color: #45a049;
		}

        .url-class {
            display: block;
        }
        .urlbg-class :hover {
            background-color: yellow;
            border-radius: 10px;
        }
        .url-class button {
            font-family: 'Aberus', Arial, sans-serif;
            font-family: 'Courier New', Courier, monospace;
            letter-spacing: 2px;
            font-weight: bold;
            text-decoration: none;
            background-color: transparent;
            border: none;
            cursor: pointer;
            color: #fff;
            font-size: 20px;
            text-transform: uppercase;
            padding: 0;
        }
        .url-class a {
            font-family: 'Aberus', Arial, sans-serif;
            font-family: 'Courier New', Courier, monospace;
            letter-spacing: 2px;
            font-weight: bold;
            text-decoration: none;
            background-color: transparent;
            border: none;
            cursor: pointer;
            color: #fff;
            font-size: 20px;
            text-transform: uppercase;
            padding: 0;
        }
        .url-class a:hover {
            text-decoration: underline;
            color: yellow;
        }
        .url-class button:hover {
            text-decoration: underline;
            color: yellow;
        }
        .close-btn-div {
            position: absolute;
            top: 5px;
            right: 10px;
            cursor: pointer;
            color: #888;
            font-size: 24px;
            font-weight: bold;
            z-index: 1001;
            padding: 5px;
        }
        .close-btn-div:hover {
            color: yellow;
            text-decoration: underline;
        }
        .softhighlight {
            background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
            box-shadow: inset 0 -5px 0 rgba(255, 255, 255, 0.4);
            padding: 0 5px;
            border-radius: 5px;
        }
        .softhighlight:hover {
            background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
            box-shadow: inset 0 -5px 0 rgba(255, 255, 0, 0.4);
            padding: 0 5px;
            border-radius: 5px;
        }
        .highlight {
            background: linear-gradient(to right, rgba(255, 255, 0, 0.4) 0%, rgba(255, 255, 0, 0.4) 100%);
            box-shadow: inset 0 -5px 0 rgba(255, 255, 0, 0.4);
            padding: 0 5px;
            border-radius: 5px;
        }
        .highlight::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                -45deg,
                rgba(128, 128, 255, 0.1),
                rgba(128, 128, 255, 0.1) 5px,
                transparent 10px,
                transparent 20px
            );
            border-radius: 5px;
            pointer-events: none;
        }
        .arrow-button {
            font-size: 24px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .arrow-button::before {			
            content: attr(data-arrow);
            position: absolute;
            color: white;
            font-size: 24px;
            -webkit-text-stroke: 1px white;
            text-stroke: 1px black;
        }
		
		.modal {
            display: none;
            position: fixed;
            z-index: 1002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
		}