custom.css (2720B)
1 @import url('https://rsms.me/inter/inter.css'); 2 html { font-family: 'Inter', sans-serif; } 3 @supports (font-variation-settings: normal) { 4 html { font-family: 'Inter var', sans-serif; } 5 } 6 7 .container { 8 max-width: 800px; 9 } 10 11 .blog-container { 12 font-family: serif; 13 } 14 15 a { 16 text-decoration: underline; 17 font-family: -system-ui, sans-serif; 18 color: white; 19 } 20 21 a:visited { 22 color: #eee; 23 } 24 25 label { 26 white-space: nowrap; 27 } 28 29 blockquote { 30 font-style: italic; 31 } 32 33 blockquote:before { 34 color: #ccc; 35 content: open-quote; 36 display: block; 37 position: relative; 38 left: -0.6em; 39 top: 0.3em; 40 font-size: 4em; 41 line-height: 0.1em; 42 vertical-align: -0.4em; 43 } 44 45 blockquote:after { 46 color: #ccc; 47 content: close-quote; 48 font-size: 4em; 49 position:relative; 50 top: 0.2em; 51 left: -0.1em; 52 line-height: 0.1em; 53 vertical-align: -0.4em; 54 } 55 56 .author { 57 font-weight: bold; 58 } 59 60 label input { 61 margin-left: 10px; 62 margin-right: 10px; 63 } 64 65 ul.socials { 66 margin: 0; 67 padding: 0; 68 list-style-type: none; 69 overflow: hidden; 70 } 71 72 .profile { 73 display: flex; 74 align-content: center; 75 align-items: center; 76 } 77 78 .socials-container { 79 display: flex; 80 margin: auto; 81 justify-content: space-evenly; 82 width: 110px; 83 } 84 85 ul.socials > li { 86 float: left; 87 display: block; 88 text-align: center; 89 } 90 91 .socials-container img { 92 color: #ff0000; 93 width: 20px; 94 } 95 96 .row { 97 margin-bottom: 8rem; 98 } 99 100 .hero { 101 margin-top: 5rem; 102 text-align: center; 103 clear: left; 104 } 105 106 .header { 107 display: flex; 108 margin-left: 50px; 109 align-items: center; 110 } 111 112 .portrait { 113 border-radius: 50%; 114 width: 100%; 115 text-align: center; 116 box-shadow: 0px 0px 10px #aaa; 117 border: 2px solid white; 118 } 119 120 .centered { 121 text-align: center; 122 } 123 124 .value-img { 125 margin: 2.5rem auto 2.5rem auto; 126 width: 100px; 127 display: block; 128 text-align: center; 129 } 130 131 .credits { 132 margin-top: 10rem; 133 text-align: center; 134 color: #252D3A; 135 } 136 137 .code-example { 138 width: 80%; 139 } 140 141 .value-prop { 142 margin-top: 3rem; 143 } 144 145 .value-props { 146 margin-bottom: 7rem; 147 } 148 149 .damus { 150 font-size: 4rem; 151 letter-spacing: -0.08em; 152 font-weight: 100; 153 margin-bottom: 20px; 154 } 155 156 .title { 157 font-size: 8rem; 158 font-weight: 500; 159 letter-spacing: -0.055em; 160 } 161 162 163 .logo { 164 margin-bottom: 0; 165 letter-spacing: -0.05em; 166 } 167 168 .logo img { 169 padding-right: 18px; 170 width: 60px; 171 } 172 173 .wizards { 174 font-size: 1.5rem; 175 top: -2em; 176 left: 0.2em; 177 position: relative; 178 color: #999; 179 } 180 181 body { 182 letter-spacing: -0.044em; 183 margin: 3rem 0 10em 0; 184 color: white; 185 background: linear-gradient(45deg, rgba(28,85,255,1) 0%, rgba(127,53,171,1) 59%, rgba(255,11,214,1) 100%); 186 } 187 188 input { 189 color: #252D3A; 190 } 191