* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
font-family: 'Ubuntu', sans-serif;
overflow: auto;
}
#bild1{
  width: 100%;
  position: relative;
  top:55px;
  z-index: -1;
} 
p{
line-height: 1.5rem;
}

#h1{
position: relative;
font-size: 30px;
top: 7.5px;
left:8px ;
margin-bottom: 10px;
}
h2{
text-align: center;
}
#utx{
padding: 10px;
line-height: 1rem;
}
#underr{
font-size:x-small;
margin-bottom: 5px;
padding: 5px;
}
h1{
font-size: 25px;
} 
#s1{
grid-area: a;
overflow: auto;
padding: 5px;
}

body {
margin: 0;
overflow-x: hidden;
max-width: 100%;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 3;
}

.topnav {
overflow: hidden;
background-color: #333;
}

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

.topnav a:hover {
background-color: #ddd;
color: black;

}

.topnav a.active {
background-color: antiquewhite;
color: #333;
}

.topnav .icon {
display: none;
}

.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48,
}
footer {
position: relative;
background-color: #333;
bottom: 0;
text-align: center;
font-size:x-large;
height: 20%;
width: 100%;
color: antiquewhite;
padding: 25px;
position:bottom;
top: 0;
z-index: -1;
}
#wrapper {
margin:10px;
margin-top: 100px;
margin-bottom: 0%;     /* footern ska vara högre upp */
display: grid;
gap: 1vh;
grid-template-columns: 1fr;
grid-template-rows: repeat(3,1fr);
grid-template-areas: "a";   
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {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;
}

}
/*Mobil*/
@media only screen and (min-width: 600px) {
/* #s1{
  position:relative;
  left: 15%;
  width: 70%;
}
#s2{
  position:relative;
  left: 15%;
  width: 70%;
}   */
#rubrik {
  background-color: hsla(0, 0%, 0%, 0.696);
  color: aliceblue; 
}
/* #bild1{
  width: 100%;
  position: relative;
  top:30px;
  z-index: -1;
}  */
  /*Tablet*/
}

@media only screen and (min-width: 769px) {
   /*Desktop*/
   #s1{
    grid-area: a;
    padding:10px;
  }

#wrapper {
  /* top: -50px;
  position: relative; */
  display: grid;
  margin-bottom: 100px;
  width: 100%;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: repeat(1,1fr);
  grid-template-areas: ". .  a a a . .";   
} 
} 

.topnav a:first-child {
  background-color: #333;
  color: white;
}