/* The most outer element in the website's tree, it contains , which contains */ :root { /* Define some colors to use across the entire website */ /* Try playing with these to quickly change the look of the site */ --background: #1d134d; --background-strong: #02010d; --surface: #ac30ff; --foreground: #ebeeff; --foreground-strong: #f8b5ff; --foreground-weak: #71948f; --color-border: #7c54ff; --color-accent: #ac30ff; /* var(x) gets you the value of the variable x, which must be declared in this or an outer element */ color: var(--foreground); background-color: var(--background-strong); /* You can set multiple font-families in order of priority, also called a font-stack */ /* It's very good for when a certain platform might not have a certain font, so you can add a fallback */ /*font-family: Inter, 'comic-sans', system-ui, sans-serif*/ font-family: Inter, 'Lucida Console', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--foreground); letter-spacing: -0.5px; word-spacing: 5px; line-height: 1.5; text-decoration: none; text-transform: none; } body { width: auto; /* Makes it so the page doesn't stretch to dsadasdextreme widths on wide monitors & also adds some nice side margins */ max-width: 720px; margin: 64px auto; line-height: 1.5; } section { background-color: var(--background); border-radius: 0.2px; width: auto; padding: .7em 4em; margin: 1em; box-sizing: border-box; box-shadow: inset 0 0 0 1px #fff1, 0 1px 0 0 #0002, 0 3px 3px 0 #0002, 0 4px 5px 3px #0002; } /*yu_pop_gun.png should be here? idk lol*/ #gun img { max-width: 50%; position: absolute; bottom: 0; left: 0; z-index: 4; object-fit: cover; height: auto; /*img end*/ } h1 { /* Since h1's font size is larger, you can use the rem unit to get the root */ /* text size (text size of the :root element basically) */ margin: 1rem; line-height: 1; color: var(--foreground-strong); font-size: 1.5em; } h2 { /* em units are relative to the current text size, so you could change the text size of the entire site by changing it in :root */ font-size: 1em; margin: 0; line-height: 1; color: var(--foreground-strong); } p, ul, ol { margin: 1em 0; } ul, ol { padding-left: 1em; } /* Let's change how hyperlinks look */ a { color: #ff4db8; text-decoration: wavy 0.1em; } /* You can use modifiers like :hover to change how your website's elements look when in different situations */ a:hover { text-decoration-line: underline; color: #dc7aff} /* Some adjustments to make the table look cleaner */ table { /* Since we have no borders, we don't wanna think about the space they would occupy, so we remove it */ border-spacing: 20; border-collapse: collapse; width: 100%; } .grid { display: grid; grid-template-columns: 50% 50%; } /* Some more specific adjustments */ #me{ margin-left: auto; margin-right: auto; margin-top: 75px; height: auto; width: auto; max-width: 700px; /* You must make #me a positioned element, so that you can position your avatar image properly */ position: relative; /* Apparantly positioning isn't enough to center the image */ display: flex; flex-direction: column; flex-wrap: nowrap; /* Add the necessary space for the avatar */ padding-top: 30px; } #me img{ position: absolute; height: 155px; inset: -40px auto auto; right:-100px; border-radius: 900px; display: inline-block; /* Apparantly inset isn't enough to center it */ align-self: flex-end; top:-44px; } #me > #lfish { position:absolute; color: #4e33bd; top: 4px; right:450; font-size:20px; } #me > #rfish { position:absolute; color: #4e33bd; top: 50px; right:-5px; font-size:20px; } /* Adjust the data table specifically (the one with the pronouns and stuff) */ table.data td { text-align: left; } /* Add a colon after text in the first column of the table */ table.data td:first-child::after { content: ":"; margin-right: 1ch; } #webrings { margin-left: auto; margin-right: auto; max-width: 420px; padding: .5em; } #webrings > table td:last-child { text-align: right; } #webrings > table td:nth-child(2) { text-align: center; } #webrings > table td:nth-child(2) a { margin: 0 3ch; color: var(--color-fg); width: max-content; }