:root {
  --base-color: #4D5D6F;
  --text-color: #222222;
  --color-1: #F9F6F3;
  --color-2: #F3F7F9;
  --color-3: #F6F3F9;
}

html {
  font-family: Arial, Geneva, Verdana, sans-serif;
  color: var(--text-color);
}

body {
  padding: 1em;
  background-color: var(--color-1);
}

a {
    text-decoration: none;
    color:#49877A;
}

.box{
  width: 120px;
  height: 120px;
  text-align: center;
  font-size: 19px;
  align-content: center;
}

.bluebox {
  background-color: #4D5D6F;
  a {
    color: white;
  }
}

.yellowbox {
  background-color:#f8c300;
  a {
    color:var(--base-color);
  }  
}

.greenbox {
  background-color:#49877A;
  a {
    color: white;
  }
}

.menubox {
  width:98px;
  height: 25px;
  text-align: center;
  font-size: 16px;
  align-content: center;
  justify-content: center;
  margin: 1px;
}

.boxfot {
  width: 120px;
  height: 40px;
  
  text-align: center;
  font-size: 20px;
  align-content: center;
  
}

.startmenu-container {
  display: flex;
  justify-content: center;
  /* margin-bottom: 5px; */
  background-color: var(--color-1);
  /* width:1024px; */
  margin: 0 auto;
}

.menu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  margin-bottom: 5px;
  margin-left: 2px;
  margin-right: 2px;
  width: 800px;
  margin: 0 auto;
  background-color: var(--color-1);
  gap:0px;
}

.reflist {
  tr:nth-child(even) { background: #eee; }
}

td.table_text {
		font-family: "Arial";
		font-size: 16px;
    color: var(--base-color);
    padding: 10px;
}

.menu-rubrik {
  font-size: 24px;
  width: 100%;
  text-align: left;
  color: var(--color-1);
  background-color: var(--base-color);
}

.menu-rubrik2 {
  font-size: 20px;
  width: 100%;
  text-align: left;
  color: var(--color-1);
  background-color: var(--base-color);
  padding: 4px;
}

.galleri {
  text-align: center;
  width: 300px;
}

.logo-img {
  width:100%
}

.imagesize {
  width: auto;
}

.imagesizehide {
  width: auto;
}

.td1 {
  width: 55%;
  vertical-align: top;
}

.td2 {
  text-align: center;
  vertical-align: top;
}

@media(max-width: 800px) {
  .menu-container{
    width:100%;
  }

  .box {
    width:100px;
    height: 100px;
  }
  .boxfot {
    width: 100px;
    height: 34px;
  }

  .menubox {
    font-size: 12px;
  }

  .galleri {
    width: 150px;
  }

  .imagesize {
  width:100%
  }

.imagesizehide {
  width: 0px;
}

.td1 {
  width: 100%;
}

.td2 {
  width: 0%;
}

}
