@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@import url('https://rsms.me/inter/inter.css');

:root {
  --100: #f7fafc;
  --200: #edf2f7;
  --300: #e2e8f0;
  --400: #cbd5e0;
  --500: #a0aec0;
  --600: #718096;
  --700: #4a5568;
  --800: #2d3748;
  --900: #1a202c;
}
html, body {
    margin: 0;
    font-size: 1rem;
    color: var(--800);
    background-color: var(--200);
}
p {
    font-family: Inter, sans-serif;
}
a {
    color: var(--400);
}
.top {
    margin: 20px auto;
    max-width: 50rem;
    padding:20px;
}
.main {
    margin:0 auto;
    max-width: 50rem;
    line-height: 30px;
    padding:20px;
}
footer {
    margin:auto;
    max-width: 50rem;
    line-height: 30px;
    color:var(--800);
    fill:var(--800);
    padding:20px;
    display: flex;
    align-items: center;
}
.title {
    font-family: 'Libre Baskerville', serif;
    font-size: 2rem;
    letter-spacing: 3px;
}
.heading {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
}
.logo {
    margin-top: 20px;  
}
img {
    margin: 0 auto;
    max-width: 70%;
}
.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.line {
    margin-left: 10px;
}

#download {
    width:200px;
    padding:1rem;
    margin: 1rem;
    font-weight: bold;
    border: 1px solid var(--600);
    color: var(--600);
    border-radius: 5px;
    display: block;
    text-decoration: none;
    font-family: Inter, sans-serif;
}
#download:hover {
  color: var(--700);
  border-color: var(--700);
}