Compare commits

..

49 Commits

Author SHA1 Message Date
Greg Shuflin
aa1875cc75 add <wbr> tag in email
h/t wolf from noisebridge infra meetup
2024-10-21 19:19:14 -07:00
Greg Shuflin
d8e3848563 Rename files 2024-10-18 17:31:00 -07:00
Greg Shuflin
cd37aa2a0d Final css fixes 2024-10-18 17:28:03 -07:00
Greg Shuflin
d3446bffcc Final fixes - mobile and desktop versions both look decent now 2024-10-18 13:21:21 -07:00
Greg Shuflin
a37d820ab3 Continuing 2024-10-18 04:11:27 -07:00
Greg Shuflin
5115117ccd More work on responsive site 2024-10-16 02:15:50 -07:00
Greg Shuflin
d738c3510b Continue work 2024-10-16 01:48:23 -07:00
Greg Shuflin
8d30893be7 Start working on responsive website 2024-10-16 00:45:41 -07:00
Greg Shuflin
165dc32ae5 viewport tag 2024-10-16 00:45:18 -07:00
Greg Shuflin
c46ba96e15 Fixing several html validation issues 2024-10-15 21:08:15 -07:00
Greg Shuflin
c6103f41be Remove this it looks bad 2024-10-15 21:05:28 -07:00
Greg Shuflin
a7d9275438 Fix resume filename 2024-10-15 21:03:29 -07:00
Greg Shuflin
95c1405d90 Update resume flake 2024-10-15 21:02:10 -07:00
Greg Shuflin
bf4aeab0e7 Some css tweaks 2024-10-15 20:47:14 -07:00
Greg Shuflin
903473d135 change gitea -> code 2024-09-01 22:40:41 -07:00
Greg Shuflin
b22fdebde5 Add (ichigo) ssh pubkey 2024-07-16 01:12:40 -07:00
Greg Shuflin
5c0ff2c436 Update resume flake 2024-01-31 23:57:11 -08:00
Greg Shuflin
4663400a0c Add nostr public key 2023-11-07 21:39:06 -08:00
Greg Shuflin
95a562e70b Add note about leipzig-glossing 2023-10-04 02:10:22 -07:00
Greg Shuflin
9e83defe8a Update resume 2023-10-02 16:59:29 -07:00
Greg Shuflin
ee56e7fb39 Hopefully fix flake.nix for resume 2023-08-03 01:48:19 -07:00
Greg Shuflin
851f599101 Fix flake.nix 2023-08-03 01:44:09 -07:00
Greg Shuflin
294a1efe73 Update resume flake again 2023-08-03 01:41:56 -07:00
Greg Shuflin
db5b2306e1 Update flake 2023-07-25 19:17:26 -07:00
Greg Shuflin
1415f482a2 Update website text 2023-07-01 01:32:32 -07:00
Greg Shuflin
164b66bb05 Update resume 2023-07-01 01:31:00 -07:00
Greg Shuflin
d2b99b10d3 Fix the way I was accessing the resume flake 2023-06-17 02:58:52 -07:00
Greg Shuflin
ac011a40ef Use resume flake as input 2023-06-17 02:07:48 -07:00
Greg Shuflin
6588b1d220 Convert to nix flake 2023-06-17 01:11:27 -07:00
Greg Shuflin
95b48ed751 Resume filename has capital letter 2023-03-27 02:32:51 -07:00
Greg Shuflin
76cabc152d Add nix derivation 2023-03-27 02:17:02 -07:00
Greg Shuflin
023ab8508c Make site look good on mobile 2023-03-07 16:53:21 -08:00
Greg Shuflin
4049a811c8 Add favicon 2023-02-19 03:39:18 -08:00
Greg Shuflin
d5fa32562d Change http -> https 2023-02-19 03:28:26 -08:00
Greg Shuflin
e09508c315 Add a bit about parser-combinator library 2023-02-03 16:18:28 -08:00
Greg Shuflin
3c65349df2 Some layout tweaks 2023-01-27 14:58:18 -08:00
Greg Shuflin
263deab59d Add link 2022-11-24 02:23:24 -08:00
Greg Shuflin
32c5ce097b Tweak font css 2022-11-04 23:50:45 -07:00
Greg Shuflin
239892ba69 Change fonts; change verbiage a bit 2022-11-04 23:48:22 -07:00
Greg Shuflin
8675e429c1 Update verbiage on website 2022-11-04 23:43:13 -07:00
Greg Shuflin
b14b3e59bd Make red link color brighter 2022-09-29 15:36:43 -07:00
Greg Shuflin
edd7a8f1ba Add default to justfile 2022-07-29 16:03:54 -07:00
Greg Shuflin
b84100cee1 Change location of resume folder 2022-04-15 12:08:56 -07:00
Greg Shuflin
c68ca7209f Building resume from source now, don't need a copy here 2021-10-07 01:51:07 -07:00
Greg Shuflin
c273f1cb37 Add command to auto-build resume 2021-10-06 15:57:55 -07:00
Greg Shuflin
5202f0124f Minor change 2021-10-06 15:32:06 -07:00
Greg Shuflin
82da355a9e Add code repos + Koka contribution 2021-09-23 02:42:39 -07:00
Greg Shuflin
49c5d746da Fix link to Untrusted 2021-09-23 02:27:05 -07:00
Greg Shuflin
d58f32b537 Use variable in justfile 2021-09-23 02:26:58 -07:00
8 changed files with 428 additions and 155 deletions

23
default.nix Normal file
View File

@ -0,0 +1,23 @@
{ pkgs ? import (fetchTarball "https://github.com/NixOS/nixpkgs/archive/5f9d1bb572e08ec432ae46c78581919d837a90f6.tar.gz") {}}:
let
resumePackage = pkgs.callPackage ../resume/default.nix {};
in pkgs.stdenv.mkDerivation {
name = "greg.everydayimshuflin.com-website";
src = ./.;
buildInputs = [resumePackage];
installPhase = ''
mkdir $out
cp index.html $out
cp style.css $out
cp self.jpg $out
cp favicon.png $out
mkdir $out/resume/
cp ${resumePackage}/*.pdf $out/resume
'';
}

BIN
favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

126
flake.lock Normal file
View File

@ -0,0 +1,126 @@
{
"nodes": {
"flake-utils": {
"inputs": {
"systems": "systems"
},
"locked": {
"lastModified": 1689068808,
"narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
"owner": "numtide",
"repo": "flake-utils",
"rev": "919d646de7be200f3bf08cb76ae1f09402b6f9b4",
"type": "github"
},
"original": {
"owner": "numtide",
"repo": "flake-utils",
"type": "github"
}
},
"flake-utils_2": {
"inputs": {
"systems": "systems_2"
},
"locked": {
"lastModified": 1685518550,
"narHash": "sha256-o2d0KcvaXzTrPRIo0kOLV0/QXHhDQ5DTi+OxcjO8xqY=",
"owner": "numtide",
"repo": "flake-utils",
"rev": "a1720a10a6cfe8234c0e93907ffe81be440f4cef",
"type": "github"
},
"original": {
"owner": "numtide",
"repo": "flake-utils",
"type": "github"
}
},
"nixpkgs": {
"locked": {
"lastModified": 1689477032,
"narHash": "sha256-tcVslINoIDszgc5cES0Y1k0Lq1HHPla9PSALU+Y8jkY=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "66c990850b878437510cc6096e6babce86de5dcb",
"type": "github"
},
"original": {
"id": "nixpkgs",
"type": "indirect"
}
},
"nixpkgs_2": {
"locked": {
"lastModified": 1686949509,
"narHash": "sha256-52OTWmIjf5t5VcoGhSjRsCWHlwSf/mPhY+0fpaiA1hs=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "992ccdd822ecff0712ed0004f89df9e96f6a4963",
"type": "github"
},
"original": {
"id": "nixpkgs",
"type": "indirect"
}
},
"resume-flake": {
"inputs": {
"flake-utils": "flake-utils_2",
"nixpkgs": "nixpkgs_2"
},
"locked": {
"lastModified": 1729051312,
"narHash": "sha256-pq+bm0dRjSKzZm7rgeKkRYsxmNrhHMo6LX+JMxMszgM=",
"ref": "refs/heads/master",
"rev": "ecb83eb0d21a9fae7c4d70859030852cb12a3d34",
"revCount": 61,
"type": "git",
"url": "file:///home/greg/code/active/resume"
},
"original": {
"type": "git",
"url": "file:///home/greg/code/active/resume"
}
},
"root": {
"inputs": {
"flake-utils": "flake-utils",
"nixpkgs": "nixpkgs",
"resume-flake": "resume-flake"
}
},
"systems": {
"locked": {
"lastModified": 1681028828,
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
"owner": "nix-systems",
"repo": "default",
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
"type": "github"
},
"original": {
"owner": "nix-systems",
"repo": "default",
"type": "github"
}
},
"systems_2": {
"locked": {
"lastModified": 1681028828,
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
"owner": "nix-systems",
"repo": "default",
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
"type": "github"
},
"original": {
"owner": "nix-systems",
"repo": "default",
"type": "github"
}
}
},
"root": "root",
"version": 7
}

43
flake.nix Normal file
View File

@ -0,0 +1,43 @@
{
description = "Professional website";
inputs = {
flake-utils.url = "github:numtide/flake-utils";
resume-flake.url = "/home/greg/code/active/resume";
};
outputs = { self, nixpkgs, flake-utils, resume-flake }:
{
formatter.x86_64-linux = nixpkgs.legacyPackages.x86_64-linux.nixpkgs-fmt;
} //
flake-utils.lib.eachDefaultSystem (system:
let
pkgs = import nixpkgs { inherit system; };
resume = resume-flake.packages.x86_64-linux.default;
in
{
packages.default = pkgs.stdenv.mkDerivation {
name = "greg.everydayimshuflin.com-website";
src = ./.;
installPhase = ''
mkdir -p $out/resume
cp index.html $out
cp style.css $out
cp self.jpg $out
cp favicon.png $out
cp ${resume}/*.pdf $out/resume
'';
};
}
);
}

View File

@ -1,82 +1,130 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Greg Shuflin - Software Developer</title> <title>Greg Shuflin — Software Developer</title>
<meta charset='utf-8'/> <meta charset='utf-8'>
<link href="style.css" rel="stylesheet"/> <meta name='viewport' content='width=device-width'>
</head> <link href="style.css" rel="stylesheet">
<body> <link rel="icon" type="image/x-icon" href="favicon.png">
<div id='main'> </head>
<body>
<div class="container">
<header> <header>
<div> <div class="links">
<h1>Greg Shuflin - Software Developer</h1> <h1>Greg Shuflin — Software Developer</h1>
<ul>
<p>Contact me via <a class="emailLink" href="mailto:greg.shuflin+developerportfolio@protonmail.com">greg.shuflin@protonmail.com</a> <li>Download <a href="./resume/Greg-Shuflin-Resume.pdf">my resume</a></li>
or <a href='https://www.linkedin.com/in/gregshuflin/'>LinkedIn</a>. <li>Contact me:
<ul>
<p>Download a copy of <a href="./resume/Greg Shuflin resume.pdf">my resume</a>. <li><a class="emailLink" href="mailto:greg.shuflin+developerportfolio@protonmail.com">greg.shuflin<wbr/>@protonmail.com</a></li>
</div> <li><a href='https://www.linkedin.com/in/gregshuflin/'>LinkedIn</a></li>
<li><a href="nostr:npub1t4tqw45837fzs0589jqqna0s5wcmzstnsvw2vlrj7934w9l25sgsgnjcsl">Nostr </a>
<div id='selfPhoto'> <code class="nostrPubkey">npub1t4tqw45837fzs0589jqqna0s5wcmzstnsvw2vlrj7934w9l25sgsgnjcsl</code>
<img src='self.jpg' alt='Self-photo' width='240'/> </li>
<!--
<li>
<p>SSH public key:
<code>ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBYZzw9jdXezBuENVPZ+p3FipNN2gT9BUo7nlCTIqLhE</code>
</li>
-->
</ul>
</div> </div>
</header> </header>
<main>
<div class="photo">
<img src='self.jpg' alt='Self-photo'>
</div>
<section>
<h2>About me</h2> <h2>About me</h2>
<p>I'm a software engineer with broad expertise across several different <p>I'm a software engineer with broad expertise across several different
disciplines of industry software development, particularly network disciplines of industry software development, particularly network
programming, full-stack web development, and modern cloud-focused devops/Unix programming, full-stack web development, all things cryptocurrency, and
systems administration. I dabble in 3d graphics, functional programming/type modern cloud-focused devops/Unix systems administration. On the side, I
theory, programming language design, and mucking about with microcontrollers dabble in 3d graphics, functional programming/type theory, programming
on the side, and one or another of these skillsets has come in handy before. language design, and mucking about with microcontrollers.
<p>I've shipped code in Rust, Python, C, C++, Ruby on Rails, Scala, Elm, and <p>I've shipped code in <strong>Rust</strong>, <strong>Python</strong>,
Haskell. My educational credentials are a BA in Linguistics, Computer <strong>C/C++</strong>, <strong>Ruby</strong> (on Rails),
Science and Japanese from the University of California, Berkeley. I used to <strong>Scala</strong>, <strong>Elm</strong>, and <strong>Haskell</strong>.
have a line here that said "Also if you're hiring for a Rust position I'd My educational credentials are B.A.s in <strong>Linguistics</strong>,
love to talk to you.", but since I now have a position where I spend a lot <strong>Computer Science</strong> and <strong>Japanese</strong> from the
of my time writing Rust, I suppose it worked. <strong>University of California, Berkeley</strong>. My language of choice
for most sorts of software project is Rust these days, but there's a whole
wide world out there of interesting developments in programming language
research - I'd love to write, say, <a href="https://www.idris-lang.org/">Idris</a> for a living one day.
<h2>Open-source work</h2> <p>My passion as a software developer is software correctness - I think the
industry as a whole places too little emphasis on writing software that does
<p>As part of my work at Toolchain Labs, I the right thing from the beginning. I want to use the best tools and
<a href="https://github.com/pantsbuild/pants/commits?author=gshuflin">contribute</a> practices available to write software that is easily maintainable and
to the <a href="https://www.pantsbuild.org/">Pants</a> build system. Much of my work minimizes bugs from the start of a project onwards.
on this project has involved porting the codebase from a legacy Python execution engine </section>
to a modern and more performant Rust execution engine. <section>
<h2>Open-source contributions</h2>
<p>I wrote a simple Rust command line program for <a href="https://github.com/neunenak/hilite">
for highlighting stderr console output</a>, inspired by Mike Schiraldi's hilite utility, which
I used at Meraki for making the actual errors more obvious in lengthy C++ compiler output. It
is published on <a href="https://crates.io/crates/hilite">crates.io</a>.
<p>My professional Github profile is <a href="https://github.com/gshuflin">@gshuflin</a>. I have <p>My professional Github profile is <a href="https://github.com/gshuflin">@gshuflin</a>. I have
used <a href="https://github.com/neunenak">@neunenak</a> as a personal Github profile in the past, used <a href="https://github.com/neunenak">@neunenak</a> as a personal Github profile in the past, and still use it
and am in the process of moving my personal code to a <a href="https://gitea.everydayimshuflin.com/greg">self-hosted Gitea for contributing to projects that use Github as their main git repository host. I've moved most of my personal code
instance</a>. to a self-hosted <a href="https://gitea.com">Gitea</a> instance at <a href="https://code.everydayimshuflin.com/greg">code.everydayimshuflin.com</a>, to
reduce my dependency on cloud services I have no control over.
<ul>
<li>As part of my work at Toolchain Labs, I was a <a href="https://github.com/pantsbuild/pants/commits?author=gshuflin">contributor</a>
to the <a href="https://www.pantsbuild.org/">Pants</a> build system.
Much of my work on this project involved porting the codebase from a
legacy Python execution engine to a modern and more performant Rust
execution engine.</li>
<li>I maintain a <a href="https://github.com/typst/typst">typst</a> package
<a href="https://code.everydayimshuflin.com/greg/typst-lepizig-glossing">leipzig-glossing</a>
for typesetting linguistic interlinear glosses according to the Leipzig Glossing
Rules.</li>
<li>I'm a user of and <a href="https://github.com/casey/just/commits?author=neunenak">occasional
contributor to</a> the <a href="https://github.com/casey/just">just</a>
command runner, written in Rust.</li>
<li>A wrote a quick and dirty <a href="https://code.everydayimshuflin.com/greg/rust-parser-combinator">parser combinator
library</a> in Rust, mostly as a proof of concept. I'd like to see if I can incorporate some of the
ideas from the paper <a href="https://research.rug.nl/en/publications/efficient-parsing-with-parser-combinators">
Efficient parsing with parser combinators</a> to make it faster.</li>
<li>I contributed a basic <a href="https://github.com/koka-lang/koka/pull/193/commits/ab290a41a4249450d9934a4c23d2b8ed7e98b448">Vim
plugin</a> for the <a href="https://koka-lang.github.io/koka/doc/book.html">Koka</a> language,
an research programming language experimenting with the very neat idea of
algebraic effect systems.</li>
<li>I wrote a simple Rust command line program for <a href="https://github.com/neunenak/hilite">
for highlighting stderr console output</a>, inspired by Mike Schiraldi's hilite utility, which
I used at Meraki for making the actual errors more obvious in lengthy C++ compiler output. It
is published on <a href="https://crates.io/crates/hilite">crates.io</a>.</li>
</ul>
</section>
<section>
<h2>Some personal projects</h2> <h2>Some personal projects</h2>
<p>A few side projects I've worked on <p>A few side projects I've worked on that I think are particularly interesting.</p>
that I think are particularly interesting.
<div> <section>
<h3>Schala</h3> <h3>Schala</h3>
<p>I've been interested in programming language implementations since my college compilers class, <p>I've been interested in programming language implementations since my college compilers class,
and interested in type theory ever since I learned about Haskell. <a href="https://gitea.everydayimshuflin.com/greg/schala"> and interested in type theory ever since I learned about Haskell. <a href="https://code.everydayimshuflin.com/greg/schala">
Schala</a> is a Rust framework I've been sporadically working on to give me a place to experiment with multiple programming Schala</a> is a Rust framework I've been sporadically working on to give me a place to experiment with multiple programming
language ideas, and also the name of the language I'm using this framework to implement. Schala is intended to be an language ideas, and also the name of the language I'm using this framework to implement. Schala is intended to be an
expression-based functional-encouraging programming language using ML-style types with Rust-like syntax. expression-based functional-encouraging programming language using ML-style types with Rust-like syntax.
</div> </section>
<div> <section>
<h3>Browser games</h3> <h3>Browser games</h3>
<p> These are all open-source collabrations with <p> These are all open-source collabrations with
<a href='https://github.com/AlexNisnevich'>Alex Nisnevich</a> and several <a href='https://github.com/AlexNisnevich'>Alex Nisnevich</a> and several
other occasional contributors. other occasional contributors.
<ul> <ul>
<li><a href="http://alex.nisnevich.com/untrusted/">Untrusted</a> <li><a href="https://alexnisnevich.github.io/untrusted/">Untrusted</a>
<a href="https://github.com/AlexNisnevich/untrusted" class='codeLink'>(code)</a> <a href="https://github.com/AlexNisnevich/untrusted" class='codeLink'>(code)</a>
- a Javascript roguelike. Every level is deliberately unbeatable, and - a Javascript roguelike. Every level is deliberately unbeatable, and
the player must edit the source code of the level in order to progress. the player must edit the source code of the level in order to progress.
@ -93,12 +141,12 @@
where the player takes on the role of a corrupt public transit bureaucrat where the player takes on the role of a corrupt public transit bureaucrat
who is paid-off by an evil ride-sharing corporation, and tasked with who is paid-off by an evil ride-sharing corporation, and tasked with
making the public bus system worse. Written in making the public bus system worse. Written in
<a href='http://elm-lang.org/'>Elm</a>, a Haskell-like pure functional <a href='https://elm-lang.org/'>Elm</a>, a Haskell-like pure functional
language that compiles to Javascript/HTML. language that compiles to Javascript/HTML.
</li> </li>
<li> <li>
<a href='http://alexnisnevich.github.io/kalevala/'>Kalevala</a> <a href='https://alexnisnevich.github.io/kalevala/'>Kalevala</a>
<a href='https://github.com/AlexNisnevich/kalevala' class='codeLink'> <a href='https://github.com/AlexNisnevich/kalevala' class='codeLink'>
(code) (code)
@ -108,18 +156,18 @@
is a <a href='https://github.com/neunenak/voluspa-server' class='codeLink'>fairly-simple Haskell server.</a> is a <a href='https://github.com/neunenak/voluspa-server' class='codeLink'>fairly-simple Haskell server.</a>
</li> </li>
</ul> </ul>
</div> </section>
<section>
<div>
<h3>Other projects</h3> <h3>Other projects</h3>
<ul> <ul>
<li><a href="https://gitea.everydayimshuflin.com/greg/SNES-ASM">SNES Assembly language</a>: some experiments in writing <li><a href="https://code.everydayimshuflin.com/greg/SNES-ASM">SNES Assembly language</a>: some experiments in writing
custom ROMs in the assembly language used by the Super Nintendo/Super Famicom/SNES. custom ROMs in the assembly language used by the Super Nintendo/Super Famicom/SNES.
</li> </li>
</ul> </ul>
</section>
</section>
</main>
</div> </div>
</body> </body>
</html> </html>

View File

@ -1,4 +1,18 @@
default:
just --list
deploy: server := "realname-server.everydayimshuflin.com"
scp index.html style.css self.jpg greg@realname.everydayimshuflin.com:"/srv/greg.everydayimshuflin.com/" resume_dir := "/home/greg/code/active/resume"
scp -r resume greg@realname.everydayimshuflin.com:"/srv/greg.everydayimshuflin.com/" resume_filename := "Greg Shuflin resume.pdf"
update-resume:
nix flake lock --update-input resume-flake
deploy-html:
scp index.html favicon.png style.css self.jpg greg@{{server}}:"/srv/greg.everydayimshuflin.com/"
deploy-resume-pdf:
just {{resume_dir}}/build_resume
scp -r "{{resume_dir}}/{{resume_filename}}" greg@{{server}}:"/srv/greg.everydayimshuflin.com/resume"
deploy: deploy-html deploy-resume-pdf

Binary file not shown.

View File

@ -1,55 +1,74 @@
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic); * {
box-sizing: border-box;
h1 {
font-family: Ubuntu;
}
header {
display: flex;
justify-content: space-between;
}
#selfPhoto {
margin-top: 20px;
margin-right: 30px;
}
#main {
margin-left:auto;
margin-right:auto;
width:960px;
} }
body { body {
padding: 0em 0.5em;
background-color:#2B2B4D; background-color:#2B2B4D;
color: white; color: white;
font-family: Ubuntu; font-family: "Fira Sans", sans-serif;
font-size: 20px;
line-height: 1.5;
display: flex;
flex-direction: column;
align-items: center;
} }
b { .container {
font-weight:bolder; width: 100%;
max-width: 961px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
text-align: center;
margin: 0;
}
code.nostrPubkey {
display: none;
} }
a { a {
color:#ff3333; color: #f74848;
font-weight:bolder; font-weight:bolder;
} }
a:visited { a:visited {
color:#ff3333; color:#f74848;
}
li {
font-family: Ubuntu;
margin-bottom:10px;
} }
a.codeLink { a.codeLink {
color:#31E631; color:#31E631;
font-weight:normal; font-weight:normal;
} }
a.emailLink { a.emailLink {
color:#31E631; color:#31E631;
font-family: "monospace"; font-family: "monospace";
text-decoration: none; text-decoration: none;
} }
.photo {
width: 100%;
}
.photo img {
width: 100%;
}
/* Desktop */
@media only screen and (min-width: 961px) {
code.nostrPubkey {
display: revert;
}
.photo {
float: right;
width: 400px;
margin: 1em;
}
}