body { margin: auto; max-width: 1300px; background-color: #fefefe; box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2);}

            footer { 
                color: black;
                padding: 5px;
                text-align: center;
                margin-top: 60px;
            }

            html {
              background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
            }

.topnav {
  overflow: hidden;
  padding-right: 50px;
}


.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

a.active  {
  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
  border-radius: 0 0 25px 0;
  color: black;
  font-weight: 550;
}


.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  color: black;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: beige;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  max-height: 550px;
  overflow: auto;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  
}


.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown.open .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

h1 { 
  margin-top: 5%; 
}

.disclaimer {
  font-size: 18px;
  
}

p { 
  font-size: 19px;
}
            
            h1, ul, strong, h2, h3, p { margin-right: 7%; margin-left: 7%; text-align: left; }
            .product-list { 
              
                margin: auto; 
                max-width: 777px;
            }
            .product-card { 
                padding: 15px; 
                background-color: #fff; 
                margin: 0px 11px 87px 11px;
             
            }
            .product-photo { 
                height: 250px;
                object-fit: contain;
                width: 100%;
            }
            .product-name { 
                font-size: 1.3em; 
                font-weight: bold; 
                margin-top: auto;
            }

            .product-desc p { 
              margin: 9px;
            }
         
            .product-btn { 
                margin-top: 15px; 
                max-width: 200px;
                margin: auto;
            }
            .product-btn a { 
                text-decoration: none; 
                color: black; 
                background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
                padding: 10px 15px; 
                border-radius: 5px; 
                display: block;
                text-align: center;
                
            }
            .product-btn a:hover { 
              background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
            }
            @media (max-width: 600px) {
                .product-list { grid-template-columns: 1fr; }
            }

            #myBtn {
              display: none;
              position: fixed;
              bottom: 25px;
              right: 2em;
              z-index: 99;
              font-size: 15px;
              border: none;
              outline: none;
              background-color: #69696985;
              color: white;
              cursor: pointer;
              padding: 10px;
              padding-left: 13px;
              padding-right: 13px;
              border-radius: 4px;
            }
            
            #myBtn:hover {
              background-color: #696969d8;
            }

            span {
              font-size: 10px;
              color: #b1b1b1;
            }

            @font-face {
              font-family: 'font'; /* Ge fonten ett namn */
              src: url('font/evening-regular-webfont.woff2') format('woff2'), /* Primärt format */
                   url('font/evening-regular-webfont.woff') format('woff');   /* Backup-format */
              font-weight: normal; /* Normal eller bold */
              font-style: normal;  /* Normal eller italic */
          }
          
          /* Använd fonten på din webbplats */
          body {
              font-family: 'font', sans-serif;
          }