* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header {
    font-family: 'Roboto', Verdana, sans-serif;
    /*background-color: rgb(200, 243, 150);*/
    color: #ffffff;
    padding: 15px;
    text-align: center;
  }
  .header h1 {
    color: antiquewhite;
  }
  
  .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  
  .menu li:hover {
    background-color: #0099cc;
  }
  .title {
    font-family: 'Roboto', Verdana, sans-serif;
    font-size: 5rem;
    background-color: #ffffff;  
    text-align: center;
  }
  span {
    margin-left: 1rem;
  }
  .nav {
    margin: 2rem;
  }
  .nav a{
    /*font-family: 'Roboto', Verdana, sans-serif;*/
    font-family: 'Noto Serif', serif;
    font-size: large;
    padding-left: 2rem;
    text-decoration: none;
    color: #fff;            
  }
  .nav a:hover{
    color: #e8abf1;
  }
  .nav a{
    background-color: #741925;
  }
  .container {
    max-width: 960px;
    margin: 20px auto;
    padding: 10px;
    display: grid;
    column-gap: 10px;
    row-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr  1fr;
    /*grid-auto-rows: minmax(200px, auto);*/
    /*grid-template-rows: 200px 100px 200px;*/
    /*align-items: center;*/
    
  }
  .item {
    background: #2f4a5f;
    color: #fff;
    font-size: 20px;
    padding: 20px;
    border: skyblue 1px solid;
    
  }
.one {
  background: #741925;
  
  grid-column-start: 1;
  grid-column-end: 6;
}
.two {
  grid-column-start: 1;
  grid-column-end: 5;
}
.four {
  background-image:url(../img/solnedgangFA_0262.JPG);
  background-repeat: no-repeat;
  background-position:center;
  /*background-attachment: fixed;*/
  background-size: cover;
  
  grid-column-start: 1;
  grid-column-end: 6;
}

  .container .item iframe{
    border-radius: 20px;
  }
  body {
    background-image:url(../img/cykel_sort.jpg);
    background-repeat: no-repeat;
    background-position:center;
    /*background-attachment: fixed;*/
    background-size: cover;
  }
  span{
    color: hsl(59, 100%, 40%);
  }
  .container .four {
    span{
      color: hsl(59, 100%, 40%);
    }
  }
  
  
  .action-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.action-button:hover {
    background-color: #0056b3;
}
.action-button:is(:hover, :active) {
  border-radius: 5px 40px 5px 40px;

}
.two p{
  margin-bottom: 15px;
}
.container .yellow{
  background: #97a4b5;
}
.container .red{
  background: #08a5aa;
}
.container .yellow p{
  color: whitesmoke;
}
.header p span{
  color: yellow;
  font-weight: 600;
}
.container .surfblue{
  background: #448b91;

}
/*.beige{
  background: rgb(0, 255, 42);
}*/