* {box-sizing: border-box; margin:0; padding: 0;}

body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr;
    font-size: 16px;
}

/*  links  */
a {text-decoration: none;}
a:link {color:#4499FF; font-size: 1.2rem;} 
a:visited {font-family:"verdana"; color:#4499FF;} 
a:hover {color:#b70000; text-decoration:none;} 

nav{
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    padding-left: 20px;
    font-family: "comic sans MS", georgia;
    background-color: rgb(151, 185, 247);
}
  
main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: cornflowerblue;
      gap: 5rem;
}

.h1{
  width: 200px; margin: auto; padding: 4px 6px; border-radius: 6px;
  text-align: center; font-family: verdana; font-size: 1.2rem; font-weight: bold;     color:#808080; background-color: #FFA;
}

p+p{
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;

  a{
  display: inline-block; text-align: center;
  margin: 2px; padding: 10px;}

  a:link{color: white;}
  a:visited{color: white;}
  a:hover{color: #b70000;}

  .adsl2022{color: rgb(197, 189, 189); font-size: 0.8rem;}
}


@media screen AND (max-width: 500px){
  main{gap: 3rem;}
  div:first-child{margin-top: 50px;}
  p+p{display: flex; flex-direction: column;}
}