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

body {
  font-family:  Arial, Helvetica, sans-serif;
  background-color: #EDEADA; 
 
}

 p {
 font-size: 40px;
  color: #444444;
}  

h1 {
  
  font-size: 32px;
  text-decoration: none;
  color: #444444;
 /* word-break: break-all; */
  font-weight: normal;
}

H2 
{ 
  /* text-align: center; */
  font-size: 22px; 
  color: #444444;
  font-weight: normal;
  line-height: 27px;
}
H3 
{ 
  /* text-align: center; */
  font-size: 18px; 
  color: #444444;
  font-weight: normal;
  line-height: 27px;
}

H4 
{ 
  /* text-align: center; */
  font-size: 14px; 
   color: #444444;
  font-weight: normal;
  line-height: 27px;
}


.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'footer footer footer footer footer footer';

  gap: 10px;
  background-color: transparent; 
  padding: 10px;
}

.grid-container > div {
  padding: 10px;
  font-size: 16px;
}

.item1 {
  grid-area: header;
  background-color: transparent; 
  text-align: center;
  color: #444444;
}

.item1 > h1 {
  font-size: 40px;
}

/* Menu  */

.item2 {
  grid-area: menu;
 /* border: 1px solid #2A2A2A; */
  }
  
.item2 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #EDEADA; /* färg bakom menu */
  

}

.item2 li {

  display: block;
  color: #000000;
  text-align: center;
  padding: 20px;
  text-decoration: none;

  padding: 0px;
  margin-bottom: 3px;
  background-color: #E3E0D0; /* färg på vilande knapp */
  color: #000000;
  font-size: 14px; /* menu font size */
}

.item2 li a {    /* gör hela menyområdet klickbart */
  display: block;
  color: #000000; 
  text-align: center;
  padding: 10px;
  text-decoration: none;
}

li a.active {
  background-color: #F7F4E4; /* färg på aktiv knapp */
  color: rgb(0, 0, 0);
}

li a:hover:not(.active) {
  background-color: #F7F4E4; /* färg på hoover */
  color: rgb(0, 0, 0);
}



/* Menu end */
  
.item3 {
  grid-area: main;
  background-color: transparent;
}

.item3 > h1 {
  font-size: 30px;
  margin-bottom: 7px;
}

.item3 > p {
  margin-bottom: 7px;
}

.item4 {
  grid-area: right;
  /* border: 1px solid #000000; */
  padding: 15px;
  background-color: transparent;
 
  color: #C8C8C8;
}

.item4 > h2 {
  font-size: 15px;
  padding-bottom: 10px;
}

.item4 li {
  padding: 5px;
  margin-bottom: 5px;
}

/* FOOTER */

.item5 {
  grid-area: footer;
  background-color: #EDEADA; 
  color: #C8C8C8;
  text-align: center;
  font-size: 12px;
}

@media only screen and (max-width: 600px) {
.grid-container {grid-template-columns: auto auto auto auto;} 
}

.player{
  aspect-ratio: 16 / 9;
  width: 100%;
}

/*
@media only screen and (min-width: 600px) {
  .grid-container {grid-template-columns: auto auto auto auto;}
}

@media only screen and (min-width: 768px) {
  .grid-container {grid-template-columns: auto auto auto auto;}
}
  
@media only screen and (min-width: 768px) {
  .grid-container {grid-template-columns: auto auto auto auto;}
} */


 

    

@media only screen and (max-width: 600px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 6;}
  .item3 {grid-area: 3 / span 6;}
  .item4 {grid-area: 4 / span 6;}
  .item5 {grid-area: 5 / span 6;}
}

@media only screen and (min-width: 600px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 1;}
  .item3 {grid-area: 2 / span 4;}
  .item4 {grid-area: 3 / span 6;}
  .item5 {grid-area: 4 / span 6;}
}

@media only screen and (min-width: 768px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 1;}
  .item3 {grid-area: 2 / span 4;}
  .item4 {grid-area: 2 / span 1;}
  .item5 {grid-area: 3 / span 6;}
}

/* [FLEX-BOX] */

.flex-container {
  display: flex;
  padding: 0px;
  justify-content: center;
  background: transparent;
}

.flex-container > div {
  background: transparent;
  color:#C8C8C8;
  max-width:1200px;
  margin-right: 1px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  text-align: left;
  line-height: 25px;
  font-size: 15px; 
}


/*--- TWEAKS --*/

/*-- BUTTON --*/

.btn {
  background-color: #3B0107;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 14px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
}

.btn:hover {opacity: 1}

/*-- BUTTON STOP --*/


img {
    max-width: 100%;
    height: auto;
  }

  div.center {
    text-align: center;
  }

  /* Center items in lists */
  ul.myUL {
    display: inline-block;
    text-align: left;
  }

  /* bildtext */
div.date {
  font-size: 12px;
   
}

 

  /*---Links in the body ---*/
  a:link {
    color: #000000;
    text-decoration: bold;
  }
  
  a:visited {
    color: #000000;
    text-decoration: bold;
  }
  
  a:hover {
    color: #000000;
    text-decoration: bold;
   
  }
  
  a:active {
    color: #000000;
    text-decoration: bold;
  
  }
 /*---Links in the body END---*/

 /* [FOOTER] */
.footer {
  width: 100%;
  text-align: center;
  font-family:'Courier New', Courier, monospace, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color:#444444;
    background-color: #EDEADA;
  padding-top: 0px;
  
}

/* END FOOTER */