@font-face {
    font-family: 'OPTIKorinna-Agency';
    src: url('fonts/OPTIKorinna-Agency.woff2') format('woff2'),
        url('fonts/OPTIKorinna-Agency.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
body {background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/seattlebg.jpg'); background-size: auto; background-position: center;}
.wrapper {width: 60%; margin: 0 auto;}
.header {width: 100%; margin: 0 auto; text-align: center;}
.header img {max-width: 40%;}
.quote-container {backdrop-filter: blur(7px) saturate(170%); -webkit-backdrop-filter: blur(7px) saturate(170%); background-color: rgba(239, 246, 247, 0.78); border-radius: 12px;border: 1px solid rgba(255, 255, 255, 0.125);padding: 1.5em; text-align: center; margin-top: 1em; -webkit-box-shadow: 10px 10px 33px -9px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 33px -9px rgba(0,0,0,0.75); box-shadow: 10px 10px 33px -9px rgba(0,0,0,0.75);}
#new-quote {background: #333; padding: 1em; color: #fff; border-radius: 1em; font-family: 'OPTIKorinna-Agency', serif; text-transform: uppercase;}
h1.quote {font-style: italic; font-family:;}
p.details {margin-top: 0;}
footer {width: 100%; margin: 0 auto; font-size: 0.7em; color: #fff; text-align: center;}
footer a {color: #ccc;}