home

file archive

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

.container {
  padding: 0 2rem;
}


.main {
  min-height: 100vh;
  padding: 4rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.footer {
  display: flex;
  flex: 1;
  padding: 2rem 0;
  border-top: 1px solid #eaeaea;
  justify-content: center;
  align-items: center;
}


.footer a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}


.title a {
  color: #0070f3;
  text-decoration: none;
}


.title a:hover,
.title a:focus,
.title a:active {
  text-decoration: underline;
}


.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
}


.title,
.description {
  text-align: center;
}


.description {
  margin: 4rem 0;
  line-height: 1.5;
  font-size: 1.5rem;
}


.code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace;
}


.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
}


.card {
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  max-width: 300px;
}


.card:hover,
.card:focus,
.card:active {
  color: #0070f3;
  border-color: #0070f3;
}


.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}


.card p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}


.logo {
  height: 1em;
  margin-left: 0.5rem;
}


@media (max-width: 600px) {
  .grid {
    width: 100%;
    flex-direction: column;
  }
}


@media (prefers-color-scheme: dark) {
  .card,
  .footer {
    border-color: #222;
  }
  .code {
    background: #111;
  }
  .logo img {
    filter: invert(1);
  }
}