@font-face {
  font-family: blur;
  src: url("../fonts/Blur.ttf");
}

@font-face {
  font-family: dubellay;
  src: url("../fonts/dubellay.ttf");
}

body{
 width:100%; 
 max-width:1000px;
 background-image:url("images/purplewater.jpg");
 margin-left:auto;
 margin-right:auto;
}

#title{
 font-family:dubellay;
 color:white;
 text-shadow: 2px 2px 5px #483866;
 font-size:40px;
 width:200px;
 margin-left:auto;
 margin-right:auto;
 text-align:center;
}

#catalog{
 list-style-type:none;
 width:100%;
 max-width:1000px;
 height:100%;
 max-height:600px;
 overflow: scroll;
 margin-left:auto;
 margin-right:auto;
 scrollbar-color: blue;
 scrollbar-width: thin;
}

#catalog li{
 border-style:solid;
 padding:10px;
 margin-left:auto;
 margin-right:auto;
}

.quote{
 font-family:blur; 
 font-size:20px;
 opacity:1;
 color:white;
 text-shadow: 2px 2px 5px #483866;
 background-image:url("images/medpool.jpg");
}

.quote:hover{
 opacity:0.9;
}

#nav{
 width:100%;
 max-width:60px;
 margin-left:auto;
 margin-right:auto;
 text-align:center;
 color:white;
 font-family:dubellay;
 font-size:18px;
 text-shadow: 2px 2px 5px #483866;
}

#nav a{
 color:white;
 font-family:dubellay;
 font-size:18px;
 text-decoration:none;
}

#nav a:hover{
 text-decoration-line: underline;
 text-decoration-style: wavy;
 text-decoration-thickness: 1px; 
}