Body{
    margin: 0px;
    background-color: #443f50;
}
a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: calc(font-size*10);/*calc virker ikke med font-size rn, forsøg at fix*/
}
a:active {
  color: white;
  background-color: transparent;
  text-decoration: none;
}/*-----------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1200px)
{
  Header{
      background-color:blue;
      position:sticky;
      width: 40vw;/*706px*/
      height: 4vw;/*63px*/
      top:0;
      z-index: 100;
      margin-left: auto;
      margin-right: auto;
      border-end-start-radius: 0.5vw;
      border-end-end-radius: 0.5vw;
      /*inline-size:auto;*/
  }
  #Header_table{
    width:100%;
    height: 100%;
    font-size: 2vw;
    background-color: #13c15a;
    border-end-start-radius: 0.5vw;
    border-end-end-radius: 0.5vw;
  }
  #Header_cell{
    border-radius:0.4vw;
  }
  #Header_cell:hover{
    background-color: #333;
    color: white;
    text-decoration: underline;
    text-decoration-color: red;
    
  }
  #Content{
    width: 576px;
    margin-left: auto;
    margin-right: auto;
    
  }
  #Category{
    height: 324px; 
    background-size:100%;
    background-color: darkgreen;
    border-radius: 10px; 
    font-size: 40px;
    font-weight: bold;
    text-align: left;
  }
  /*#Category:hover{
    filter: grayscale(100%);  forsøgte at påvirke billedet men ikke teksten. den gjorde begge
    background-color: #333;
  }*/
  #Category a:visited{
    color: white;
    background-color: transparent;
    text-decoration: underline;
  }
  #Category a:hover{
    color: red;
    background-color: transparent;
    text-decoration: underline;
  }
  /*#Adverts{}*/
}
@media only screen and (max-width: 1199px){/*-------------------------------------------------------------------------------------*/
  Header{
      background-color:blue;
      position:sticky;
      width: 100vw;
      height: 10vw;
      top:0;
      z-index: 100;
      margin-left: auto;
      margin-right: auto;
      /*inline-size:auto;*/
  }
  #Header_table{
    width:100%;
    height: 100%;
    font-size: 4.5vw;
    background-color: #13c15a;
    border-end-start-radius: 0.5vw;
    border-end-end-radius: 0.5vw;
  }
  #Header_cell{
    border-radius:0.4vw;
  }
  #Header_cell:hover{
    background-color: #333;
    color: white;
    text-decoration: underline;
    text-decoration-color: red;
  }
  #Content{
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
  }
  #Category{
    height: 45vw; 
    background-size:100%;
    background-color: darkgreen;
    border-radius: 1.5vw; 
    font-size: 6vw;
    font-weight: bold;
    text-align: left;
  }
  /*#Category:hover{
    filter: grayscale(100%);  forsøgte at påvirke billedet men ikke teksten. den gjorde begge
    background-color: #333;
  }*/
  #Category a:visited{
    color: white;
    background-color: transparent;
    text-decoration: underline;
  }
  #Category a:hover{
    color: red;
    background-color: transparent;
    text-decoration: underline;
  }
  /*#Adverts{}*/
  ul{list-style-type: none; 
      border: 0;
      margin: auto;
      padding:0; 
      overflow: hidden;  
      position: sticky; top:0; width: 100%;
      font-family: cursive;/*Arial, Helvetica, sans-serif;*/
      font-size: 1.98vw; /*formerly36px*/
      z-index: 100;
      /*float: left;*/
      text-align: center;
  }
}
#Grid_Content{/*---------------------------------------------------Grid---------------------------------------------------------*/
  width: 75vw;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 600px){/*-------------------------------------------600-*/
#Grid{
  display: grid;
  grid-template-columns: calc(100%);
  background-color: transparent;
}
#Grid_Cell{
  background-color: darkgreen;
  background-size: 100%;
  padding: 0px;
  text-align: left;
  height: 45.3125vw;
  border-radius: 0.5vw;
  font-size: 6vw;
  font-weight: bold;
}
#Grid_Cell :hover{
  text-decoration-thickness: 6vw;
}
}
@media only screen and (min-width: 601px){/*-------------------------------------------600+*/
  #Grid{
  display: grid;
  grid-template-columns: calc(100%/2) calc(100%/2);
  background-color: transparent;
}
#Grid_Cell{
  background-color: darkgreen;
  background-size: 100%;
  padding: 0px;
  text-align: left;
  height: 21.875vw;
  border-radius: 0.5vw;
  font-size: 3vw;
  font-weight: bold;
}
#Grid_Cell :hover{
  text-decoration-thickness: 3vw;
}
}
@media only screen and (min-width: 1200px){/*-----------------------------------------1200+*/
#Grid{
  display: grid;
  grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
  background-color: transparent;
}
#Grid_Cell{
  background-color: darkgreen;
  background-size: 100%;
  padding: 0px;
  text-align: left;
  height: 14.0625vw;
  border-radius: 0.5vw;
  font-size: 2vw;
  font-weight: bold;
}
#Grid_Cell :hover{
  text-decoration-thickness: 2vw;
}
}
/*
ul{list-style-type: none; 
    border: 0;
    margin: auto;
    padding:0; 
    overflow: hidden;  
    position: sticky; top:0; width: 100%;
    font-family: cursive;
    font-size: 1.98vw;
    z-index: 100;
    text-align: center;
  }
li{float: left; border-right: 0.05vw solid white;background-color: #13c15a;}

li:first-child{border-end-start-radius: 0.5vw;}

li:last-child{border-right: none;border-end-end-radius: 0.5vw;}

li a{display: block; color:white; padding: 0.5vw 1.25vw; text-align: right;}

li a:hover {background-color: #333;}

li:first-child a:hover{border-end-start-radius: 0.5vw;}

li:last-child a:hover{border-right: none;border-end-end-radius: 0.5vw;}*/