*{
    box-sizing: border-box;
    text-align: center;
}

body{
    
}

header{
    
    background-color: blueviolet;
    position: sticky;
    top: 0;
}

a:link, a:visited {
  color: cyan;
  text-decoration: none;
}

a:hover {
  color: hotpink;
  text-decoration: underline;
}

section::after {
  content: "";
  display: table;
  clear: both;
}

vasen {
    float: left;
    width: 45%;
    margin-left: 5%;
    background-color: pink;
}

oikea{
    float: left;
    width: 45%;
    margin-right: 5%;
    background-color: pink;
}

@media (max-width: 820px) {
  vasen, oikea {
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 30px;
  }
}

vasen:hover{
    border: 3px solid #777;
}

oikea:hover{
    border: 3px solid #777;
}

galleria{
    width: 20%;
    float: left;
    margin-left: 4%;
    background-color: pink;
}

tiedot{
  width: 20%;
  float: left;
  background-color: pink;
}

@media (max-width: 820px) {
  galleria {
    width: 45%;
    height: auto;
    margin-left: 1;
    margin-right: 1;
    margin-bottom: 30px;
  }
}