body{
background: url('images/mat-5.jpg');
background-size:170%;
background-position:top center;
background-color:black;
background-repeat:repeat-x;
margin:0;
}

.header{
display:flex;
justify-content:center;
}

.nav{
display:flex;
flex-direction: column;
justify-content:center;
flex-wrap: wrap;
}

.logo {
margin: 0 auto;
max-width:100%;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border-radius:30px;
padding:10px;
margin-top:40px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.52);
}

ul.hmenu {
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:center;
margin-top:40px;
margin-bottom:40px;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius:10px;}

ul.hmenu li {
font-size: 20px;
margin:10px;
font-family: Georgia;
text-transform:uppercase;
padding:10px;
background-color:rgba(50, 0, 0, 0.8);
border-radius:10px;
color: goldenrod;
}

ul.hmenu>li>a.active {
color: gold;
}

ul.hmenu>li>a:hover{
color: gold;
}

ul.hmenu>li>a {
color: moccasin;
text-decoration:none;
}

img {
display: block;
}

.ikon {
height: 32px;
vertical-align: bottom;
margin-right: 10px;
display: inline-block;
}

.papper {
width: 80%;
background-color: white;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.52);
background: linear-gradient(to right, rgb(251, 248, 234) 0%, 
rgb(255, 255, 255) 10%, rgb(255, 255, 255) 90%, rgb(251, 248, 234) 100%);
border-collapse: separate;
display: block;
border-spacing: 0;
margin: 0 auto;
line-height: 0;
overflow:hidden;
margin-top:20px;
margin-bottom:20px;
}

.smal {
width: 800px;
}

.frigg {
padding: 30px;
line-height: 1.5em;
flex:1;
box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li {
margin: 0;
padding: 0;
font-family: Georgia, 'Times New Roman', Times, 'Noto Serif', serif;
}

h1 {
  font-size: 2rem;
  color: #17476D;
  line-height: 1.2; 
  font-weight:normal}

h2 {
  font-size: 1.5rem;
  color: #17476D;
  font-weight: 600;
  line-height: 1.3; }

h3 {
  font-weight: 600;
  line-height: 1.5;
  font-size: 1.25rem; 
  margin: 2em 0 0 0; }
  

h4 {
  font-size: 1rem; }

h5 {
  font-size: 0.9rem; }

h6 {
  font-size: 0.7rem; }

p {
margin: 10px 0;
font-family: Georgia, 'Times New Roman', Times, 'Noto Serif', serif;
font-weight: 400;
font-size: 1.2rem;
line-height: 1.65;
}

a {
  color: #2C85CE;
text-decoration: none }


a:hover{
color: seagreen;
}

ul {
list-style-type: none;
}

ol {
list-style-position: inside;
}

hr {
  border: 0;
  border-bottom: dashed 1px steelblue;
  margin: 2rem 0; }

.row {
display: flex;
flex-shrink: 0
}

.menyrad
{
display: flex;
flex-shrink: 0;
justify-content:space-between;
margin-top:20px;
margin-bottom:20px;
}

.menyrad p {
font-weight: bold}

.menyrad p.beskrivning {
font-weight: normal;
font-style:italic;
margin-top:0px}

.oppettider {
display: grid;
grid-template-columns: 30% 70%;}


@media screen and (max-width: 750px) {

.papper {
width: auto !important;

margin:0;
}

.frigg {
padding: 10px;
flex:1;
}


.svidur {
padding: 5px;
}

.row{

display: flex;
flex-shrink: 0;
flex-direction: column;
}

.row:after	{
clear: both;
}

.oppettider {
display: grid;
grid-template-columns: 50% 50%;
}

}


@media screen and (max-width: 400px) 
{
.logo {
max-width:100%;
border-radius:0px;
padding:0px;
}
}


@media (prefers-color-scheme: dark) {

.papper {
background:black;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, p {
color:snow;
}

a {
  color: skyblue;
}