1  <script>
 2    import Paper from 'scattered-papers/Paper.svelte';
 3    import Text from 'scattered-papers/Text.svelte';
 4    import Link from 'scattered-papers/Link.svelte';
 5  </script>
 6  
 7  <div class='missing'>
 8    <Paper>
 9      <div class='content'>
10        <div class='title'>
11          <Text heading>404&mdash;Not found</Text>
12        </div>
13        <Link href='/'>
14          <span class='link-text'><Text sc>Return to homepage</Text></span>
15        </Link>
16      </div>
17    </Paper>
18  </div>
19  
20  <style>
21    .missing {
22      position: absolute;
23      left: 50%;
24      top: 50%;
25      transform: translate(-50%, -50%);
26      max-width: 100%;
27      width: 40rem;
28      height: 7rem;
29    }
30  
31    .content {
32      box-sizing: border-box;
33      display: flex;
34  
35      padding: 0 2rem;
36      width: 100%;
37      height: 100%;
38      justify-content: space-between;
39      align-items: center;
40      flex-direction: row;
41    }
42  
43    .title {
44      font-size: var(--font-size-title);
45    }
46  
47    .link-text {
48      font-size: var(--font-size-body);
49    }
50  </style>