body{
    font-family: Arial, sans-serif;
    color: white;
    }

    html {
        background: radial-gradient(circle, #800080, #090909);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #090909;
      }

      * {
        box-sizing: border-box;  
    }

    .SvartKonteiner {                 
        top: 0;
        left: 0;
        border: 2px solid #030000;
        padding: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        background-color: black;
        position: fixed;
        }
        
    .SvartKonteiner a{
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
        padding: 10px 20px;
        border: 2px solid transparent;
        transition: all 0.3s ease;
        border-radius: 5px;
        font-size: 1.5vw;
        }
        
    .SvartKonteiner a:hover {
        border-color: #fff;
        background-color: rgba(255, 255, 255, 0.2);
        }
        
    #Logo{
        color: red;
        font-family:'Courier New', Courier, monospace;
        font-size: 2vw;
        }
    
        .Hamburger {
            display: none;       /* skjules på PC */
            font-size: 6vw;
            background: none;
            border: none;
            color: rgb(249, 247, 247);
            cursor: pointer;  
        }
    
        .NavMeny {
            display: flex;
            gap: 110px;
        }
    
        .DropdownMeny {
            display: none;                     /* skjult som start */
            flex-direction: column;
            background-color:grey;
            border-top: 2px solid #300000;
            width: 30vw;
            padding: 2vw 0;
            top: 100%;
            right: 5vw;
            position: absolute;
            align-items: center;
            }
    
        .DropdownMeny a {
            color: rgb(245, 243, 243);
            padding: 12px 20px;
            text-decoration: none;
            font-weight: bold;
            font-size: 3vw; 
            }
    
    .DropdownMeny a:hover {
        background-color: rgba(255, 255, 255, 0.2);
        }

  .container {
    width: min(90%, 700px);
    margin: 11% auto;
    padding: 24px;
    background: rgba(0, 0, 0, 0.504);
    border-radius: 16px;
  }

  h1 {
    margin-top: 0;
    text-align: center;
    color: #ff4d4d;
    font-size: clamp(2rem, 4vw, 3rem);
  }

  p {
    text-align: center;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  form {
    display: grid;
    gap: 14px;
  }

  label {
    font-weight: bold;
    margin-bottom: 4px;
    display: block;
  }

  input,
  textarea,
  .bookBtn {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: none;
    font-size: 1rem;
  }

  input,
  textarea {
    background: rgba(255, 255, 255, 0.9);
    color: black;
  }

  textarea {
    min-height: 140px;
    resize: vertical;
  }

  .bookBtn {
    background: #1fdf69;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }

  .bookBtn:hover {
    opacity: 0.9;
  }

  .footerSection{
    display: flex; 
    justify-content: center; 
 }
 footer h3{
     font-size: 2vw;
     color: rgb(248, 8, 8);
     display: flex; 
     margin: 0;
 }
 ul{
     padding: 10%;
     margin: 0%;
 }
 
 a {
     text-decoration: none;
     color: white;
 }
 p{
     margin: 0;
 }
 
  .FooterLi{
    font-size: 1.5vw;
     display: flex;
     margin-top: 5vh;
     justify-content: center;
     color: white;
     white-space: nowrap;
 }
 
 .footerSection .FooterLi a img.instagram{
     width: 3.5rem;
     display: block;
     object-fit: contain;  
 }
 
 
 .footerSection .FooterLi a img.facebook{
     width: 2rem;
     display: block;
     object-fit: contain; 
    margin-right: 0.5rem;
    margin-left: 0.4rem; 
 }
 
 
 
 .footerSection .FooterLi a{
     display: flex;          /* gjør at ting legger seg på rad */
     align-items: center;    /* sentrer vertikalt */
    
 }

  
     
         /*kode under til tlf*/
     
     
         
     
         
     @media (max-width: 1000px) {
          
    body{
        background-attachment: fixed;
        margin-top: clamp(80px, 13vh, 120px);
       }
     
     .container {
        width: min(90%, 700px);
        margin: 120px auto 40px auto;
        padding: 24px;
        background: rgba(0, 0, 0, 0.504);
        border-radius: 16px;
      }
    
      h1 {
        margin-top: 0;
        text-align: center;
        color: #ff4d4d;
        font-size: clamp(2rem, 4vw, 3rem);
      }
    
      p {
        text-align: center;
        line-height: 1.5;
        margin-bottom: 24px;
      }
    
      form {
        display: grid;
        gap: 14px;
      }
    
      label {
        font-weight: bold;
        margin-bottom: 4px;
        display: block;
      }

      input[type="date"] {
        appearance: inherit;
        padding: 25px; 
      }
    
      input,
      textarea,
      .bookBtn {
        width: 100%;
        padding: 14px;
        border-radius: 10px;
        border: none;
        font-size: 1rem;
        box-sizing: border-box;
        
      }
    
      input,
      textarea {
        background: rgba(255, 255, 255, 0.9);
        color: black;
      }
    
      textarea {
        min-height: 140px;
        resize: vertical;
      }
    
      .bookBtn {
        background: #1fdf69;
        color: white;
        font-weight: bold;
        cursor: pointer;
      }
    
      .bookBtn:hover {
        opacity: 0.9;
      }
    
      /* Vis hamburger */
     .Hamburger {
        display: block;
      }
      
      /* Skjul vanlige menylenker i navbar */
      .NavMeny {
        display: none;
      }
      
      /* Når container har "open", vis dropdown-boksen */
      .SvartKonteiner.open .DropdownMeny {
        display: flex;
      }
      
      #Logo{
        font-size: 7vw;
      }
      
      .DropdownMeny {
        width: 30vw;
        }
      
      .DropdownMeny a {
        font-size: 3vw; 
        }
     
     .footerSection{
     display: flex; 
     justify-content: center; 
     margin-top: 40%;
     }
     footer h3{
     font-size: 3.5vw;
     color: rgb(248, 8, 8);
     display: flex; 
     margin: 0;
     }
     ul{
     padding: 4%;
     }
     
     .Meny a{
     margin-top: 35%;
     padding: 3%;
     }
     .Kontakt p {
         margin-top: 11%; 
     }
     
     a {
     text-decoration: none;
     color: white;
     }
     p{
     margin: 0;
     }
     
     .FooterLi{
     font-size: 3vw;
     display: flex;
     margin-top: 5vh;
     justify-content: center;
     color: white;
     white-space: nowrap;
     }
     
     .footerSection .FooterLi a img.instagram{
     width: 3.4rem;
     display: block;
     object-fit: contain;  
     }
     
     
     .footerSection .FooterLi a img.facebook{
     width: 2rem;
     display: block;
     object-fit: contain; 
     margin-right: 0.5rem;
     margin-left: 0.4rem; 
     }
     
     .footerSection .FooterLi a{
     display: flex;          /* gjør at ting legger seg på rad */
     align-items: center;    /* sentrer vertikalt */
     
     }
     }