@font-face{
font-family:Staatliches;
src: url(0_resources/Staatliches-Regular.ttf)
}

@font-face{
font-family:Lexend;
src: url(0_resources/Lexend-VariableFont_wght.ttf)
}

h1{
font-family: Staatliches;
font-size: 3rem;
margin: 0.5rem;
}

a, a:active{
  color: darkblue;
}

a:visited{
  color: darkred;
}

a:visited h1{
  color: darkblue !important;
}

ul{
  width: fit-content;
  margin: auto;
}

li *{
text-align: initial;
}

body {
  text-align: center;
  max-width: 1000px; 
  margin: auto;
  background-color: oldlace;
  color: darkblue;
  font-family: Lexend;
  box-sizing: border-box;
  padding: 16px;
}

.grid {
  display: grid;
  gap: 16px;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.catalog{
border: 8px solid darkblue;
border-radius: 16px;
padding: 16px;
align-self: stretch;
}

.catalog img{
  margin-top: 1rem;
  max-height: 250px;   
  max-width: 100%;
}

.pages img{
width: 100%}

img.logo{
  width: 50%;
}

@media only screen and (max-width: 600px) {
  img.logo{
  width: 80%;
}
  
}