Student Feedback

Direct Feedback

2020 spring

Thank you so much for everything. I've been in college for almost 6 full years now, and this was by far the best class experience I've had.

2020 spring

Before I answer the questions I just want to say this was my favorite class this entire semester and I really enjoyed learning everything you taught us. You are a great teacher and I really appreciate all the extra help you have given me. I'm really sad to see this class end and wish we could continue. Thank you for such a great class!!

Did individual feedback emails on assignments add to your understanding of the topics?

2020 spring

Absolutely. I valued your individual feedback and suggestions. It was encouraging and helpful! I also found that every time I needed help, you were easily reachable through email and willing to go through possible solutions (no matter how lost I was!) I can't say that for a lot of professors, so I appreciate that!.. And I can also tell you that I know a LOT of other people who appreciate your accessibility and patience too!

Official Feedback

Official feedback surveys are anonymous and administered by the college. Open ended responses are a representative subset of the total collected.

The instructor was well organized and prepared for class

4.87 mean score over 17 classes surveyed. Ranked 1-5 from "Strongly Disagree" to "Strongly Agree".

The instructor clearly explained the goals and requirements of this course.

4.84 mean score over 17 classes surveyed. Ranked 1-5 from "Strongly Disagree" to "Strongly Agree".

Level of interest in the subject matter before and after taking the course

Feedback only includes aggregate responses, so it's not possible to track how many students were, say, 2 → 5 vs 3 → 3.

Still, I consider this "watered down" average of averages a positive indicator.

Average student interest: 3.11 before, 3.57 after taking a given course. Ranked 1-5 from "Very Low" to "Very High".

The instructor provided valuable feedback on assignments.

4.75 mean score over 17 classes surveyed. Ranked 1-5 from "Strongly Disagree" to "Strongly Agree".

The instructor returned assignments in a timely manner.

4.49 mean score over 17 classes surveyed. Ranked 1-5 from "Strongly Disagree" to "Strongly Agree".

The instructor was responsive to student needs and concerns.

4.86 mean score over 17 classes surveyed. Ranked 1-5 from "Strongly Disagree" to "Strongly Agree".

The instructor treated all students with respect.

4.92 mean score over 17 classes surveyed. Ranked 1-5 from "Strongly Disagree" to "Strongly Agree".

What aspects of your instructor’s teaching have been most helpful to your learning in this course?

2019 spring

Such a great teacher. Made something I was dreading extremely fun and easy to learn and understand.

2021 spring

He is extremely personable and offered a comfortable environment to ask questions or make mistakes. He is very accessible outside of class time and very helpful.

2020 spring

This professor was one of the absolute best professors I have ever had. His skill to teach and make sure we understood the material was amazing and i am very glad i ended up in his course.

2020 spring

Professor Rodkewitz made a rather challenging course to get into incredibly smooth. I had never coded prior to his class and with each class I was already making websites before I knew it. His pace is rather quick but with how each class progresses it prepares you for the next step. He was very easy to reach if you needed help, and while on campus would make time to show students skills.

2020 spring

I found Brandon to be extremely patient, communicative, and passionate. His unique way of teaching kept everyone engaged and willing to participate/ask questions. He made sure every question was answered and took time out of his own schedule to communicate outside of class to help with specific concerns.

2016 spring

The professor's succinctness in teaching and mastery in the field swayed my career path. He's a valuable professor.

2016 fall

The professor is very easy to talk to, and i never felt weird about asking questions. His style of teaching helped me tremendously. I'm actually happy with the work I've done in that class.

2017 spring

Brandon is the best teacher at this school. He tries his best to break down his lectures so that he could make sure we are all at the same pace. He is always accessible outside of class and easy to reach out to.

2018 spring

The teacher was very hands on and always had not one but two ways for us to fix a problem if something was wrong. He was knowledgeable and helpful.

What aspects of the instructor’s teaching did you find least helpful in this course?

2016 spring

None that I can think of. I loved this class.

2021 spring

None. Instructor asked for improvements and feedback throughout the class and reacted accordingly.

2014 fall

None at all.

2015 spring

None :)

2018 spring

I feel he did a wonderful job and I see extremely little room for improvement in his teaching.

2020 spring

Absolutely nothing... Also, nothing.

2021 spring

There is not much I can think of in terms of improvement. This class was pretty spot on. The goals and assignments were clear, while also engaging and aided in the learning. The assignments were manageable and honestly pretty fun to complete. This class was great and Professor Rodkewitz was awesome.

2021 spring

I do not have any feedback because this class was well designed and well thought out. You are a great teacher.

2021 fall

The only thing I can think of is that it's a shame that the class isn't longer, there's a bunch of fields I wish we had more time to cover.

2023 fall

I have nothing bad to say.

Please use additional space to clarify any of your responses on your overall impressions of the course.

2017 spring

He is a phenomenal professor and I am so happy he helped me through Web1. Honestly, this is the type of class that you need a thorough and dedicated professor for --- and he was exactly that. His feedback was always detailed and effective for revising work. His attention to detail and experience made him such a great teacher.

2020 spring

This was one of the best/most beneficial classes I have taken at TCNJ. I believe this was because of Brandon's teaching style and how he interacts with his students. Thank you Brandon for making this class enjoyable and for being a great professor.

2020 fall

I have had Brandon for 2 courses now, and he is wonderful. He is a great human being and a great professor. He provides feedback, shares helpful resources, goes out of his way outside of class time to answer questions/have conversation with students, he's respectful, understanding, and open-minded. He also has a wealth of knowledge about web design and he cares about it a lot. By far, the best class experience I've had at my time at TCNJ!

2022 fall

Best IMM prof ever! I knew it would be a good class from the first meeting and the professor said "there's a lot of toxic masculinity in the tech industry." I've never heard a professor verbally acknowledge that and I was so happy. I'm glad I took this course; I learned a lot about dynamic web applications and it was the perfect combination of both front-end and back-end development.

2021 spring

Not gonna lie, I was super intimidated by this course at first. However, I soon realized that there was no reason to be intimidated because you created such a fun, safe, and comfortable environment for questions and feedback. I wish we had this class in person because you are such a fun and engaging professor.

2015 spring

He was one of the best professors I've had. Definitely a faculty member that should stay in the program because he is really fantastic.

2019 spring

Professor was always prepared and I could tell he was an expert at the topic. He had his agenda planned out to the second and was one of the most organized professors I have ever had. Although I found this to be one of the most difficult classes I have ever taken, I have much respect for my professor

2020 spring

Signing up for this required course, I was extremely worried it was going to be too overwhelming for me. I had VERY little previous experience with coding, so I knew it would be a challenge no matter what. After the first day of class, my nerves were immediately calmed by Brandon's attitude and his genuine love for the subject matter. Throughout the semester, I felt consistently on top of his assignments and confident that I could get things completely regardless of the challenge. This is rare in college courses for me- as many professors overload you with instruction and then give little guidance. This was never an issue in Web 1-- and so far (after experiencing 5 years of college), this has been my best experience in a course. All thanks to a great professor who goes above & beyond !!!

2021 fall

Overall, the instructor's enthusiasm for the class material makes the topic more interesting, despite its difficulty at times. The instructor's open accessibility and lack of mansplaining made it very easy to ask for help and understand the material.10/10 !

2023 fall

I would just like to say that this class was my favorite class to go to this semester and I don't even like coding, but the professor made it so enjoyable and worthwhile that I loved coming here. TCNJ was lucky to have Brandon here teaching us!

@charset "utf-8";

/* ****************************** */
/* RESETS */

* {
	box-sizing: border-box;
	margin-block: initial;
}

body {
	margin: initial;
	padding: initial;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin-inline: initial;
}

blockquote {
	margin-inline: initial;
}

pre {
	tab-size: 4;
}

button {
	cursor: pointer;
}

/* ****************************** */
/* TYPOGRAPHY */

@font-face {
	font-family: "Switzer Variable";
	src: local("Switzer Variable"),
		url("/fonts/Switzer-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Switzer Variable";
	src: local("Switzer Variable Italic"),
		url("/fonts/Switzer-VariableItalic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: local("Source Serif 4"),
		url("/fonts/SourceSerif4-VariableFont_opsz,wght.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: "iA Writer Quattro V";
	src: local("iA Writer Quattro V"),
		url("/fonts/iAWriterQuattroV.woff2") format("woff2");
	font-display: swap;
}

:root {
	/* Base font */
	--font-stack-sans-serif: "Switzer Variable", system-ui, sans-serif;
	--font-stack-serif: "Source Serif 4", Georgia, Times, serif;
	--font-stack-code: "iA Writer Quattro V", Menlo, monospace;
	font-size: 1.0625em;
	font-family: var(--font-stack-sans-serif);
	--font-weight-light-mode: 350;
	--font-weight-dark-mode: 250;
	font-weight: var(--font-weight-light-mode);
	transition: font-weight var(--theme-transition-duration) ease-out;

	/* ***** Vertical rhythm ***** */
	--root-line-height: 1.5;
	line-height: var(--root-line-height);

	/* Block spacing factor. If used, this should be in increments of 0.5 to
	   maintain rhythm */
	--flow-space-multiplier: 0.5;
	--flow-space: calc(var(--flow-space-multiplier) * 1rlh);

	/* Type scale */
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	/* Set up size ratios as raw, unitless numbers */
	--size-ratio: 1.3;
	--size-1: 1;
	--size-2: calc(var(--size-1) * var(--size-ratio));
	--size-3: calc(var(--size-2) * var(--size-ratio));
	--size-4: calc(var(--size-3) * var(--size-ratio));
	--size-5: calc(var(--size-4) * var(--size-ratio));

	/* Assign units for usage */
	--size-1-rem: calc(var(--size-1) * 1rem);
	--size-2-rem: calc(var(--size-2) * 1rem);
	--size-3-rem: calc(var(--size-3) * 1rem);
	--size-4-rem: calc(var(--size-4) * 1rem);
	--size-5-rem: calc(var(--size-5) * 1rem);

	/* Fit headings into our rlh baseline grid.
	
	   The line-height for our headings should be the minimum number of
	   baseline grid units that their font-size fits into.

	   - Calculate how many baseline grid units a given font size fits into
	   - Round up to the nearest whole baseline grid unit
	   - Apply units (rlh) to the final value for usage

	   NOTE: This idiosyncrasy with calc() has bitten me before. Via MDN:
	   > Current implementations require that, when using the * and /
	     operators, one of the operands must be unitless. For /, the right
		 operand must be unitless. For example font-size: calc(1.25rem / 1.25)
		 is valid but font-size: calc(1.25rem / 125%) is invalid.

	   So for simplicity with calculations involving the baseline grid, work
	   exclusively with raw numbers until the final step, and apply length
	   units at the end.
	*/
	--size-1-rlh: calc(
		round(
				up,
				/* font-size into line-height */
					calc(var(--size-1) / var(--root-line-height)),
				/* Round up to nearest whole baseline grid unit */
					var(--flow-space-multiplier)
					/* Apply length units to final value */
			) * 1rlh
	);
	--size-2-rlh: calc(
		round(
				up,
				calc(var(--size-2) / var(--root-line-height)),
				var(--flow-space-multiplier)
			) * 1rlh
	);
	--size-3-rlh: calc(
		round(
				up,
				calc(var(--size-3) / var(--root-line-height)),
				var(--flow-space-multiplier)
			) * 1rlh
	);
	--size-4-rlh: calc(
		round(
				up,
				calc(var(--size-4) / var(--root-line-height)),
				var(--flow-space-multiplier)
			) * 1rlh
	);
	--size-5-rlh: calc(
		round(
				up,
				calc(var(--size-5) / var(--root-line-height)),
				var(--flow-space-multiplier)
			) * 1rlh
	);

	/* Ensure that gutters leave enough space for outside bullets */
	--inline-gutter: 2rem;

	/* Set a readable line length, accounting for gutter (padding) with
	box-sizing border-box. Note that Firefox doesn't currently (250830)
	support rch units. */
	--wrap-width: calc(var(--inline-gutter) * 2 + 72ch);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/* <3 but not licensed for web use 😔 */
	/* font-family: "Hiragino Mincho ProN"; */
	/* font-weight: 600; */

	font-family: var(--font-stack-serif);
	font-feature-settings: "onum";
	font-weight: 500;

	/* Ensure headings have their spacing, even when they're the first item in
	   a flow section (.flow > * + *)
	*/
	margin-block-start: var(--flow-space, 1em);
}

:root[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 450;
}

h1 {
	font-size: var(--size-4-rem, 2rem);
	line-height: var(--size-4-rlh);
	--flow-space: 0;
}

h2 {
	font-size: var(--size-3-rem, 1.5rem);
	line-height: var(--size-3-rlh);
	--flow-space: 3rlh;
}

h3 {
	font-size: var(--size-2-rem, 1.25rem);
	line-height: var(--size-2-rlh);
	--flow-space: 2rlh;
}

h4 {
	font-size: var(--size-1-rem, 1rem);
	line-height: var(--size-1-rlh);
	--flow-space: 0;
}

ul,
ol {
	padding-inline-start: 0;
	list-style-position: outside; /* Default, but being explicit */
}

li > :is(ul, ol, dl) {
	padding-inline-start: var(--inline-gutter, 2em);
}

b,
strong {
	font-weight: 550;
	transition: font-weight var(--theme-transition-duration) ease-out;
}

:root[data-theme="dark"] :is(b, strong) {
	font-weight: 500;
}

button {
	font-size: 0.875rem;
	padding: 0.25em;
}

code {
	font-family: var(--font-family-code);
	font-weight: 400;
}

figcaption {
	padding-inline: var(--inline-gutter, 2em);
}

blockquote {
	font-style: italic;
	/* Italicized block text reads better in standard weight, even in dark
	   mode */
	/* font-weight: var(--font-weight-light-mode); */
	font-weight: calc(var(--font-weight-dark-mode) + 50);
}

main {
	margin-block: 3rlh;
}

@media print {
	:root {
		font-size: 0.875em;
		--wrap-width: 80ch;
	}

	/* Reduce vertical space between sections */
	h2 {
		--flow-space: 2rlh;
	}

	h3 {
		--flow-space: 1rlh;
	}
}

/* ****************************** */
/* COLOR AND THEME */

:root {
	/* Primitive colors */
	--color-soft-pure-white: oklch(97.6% 0 89.9);
	--color-soft-pure-black: oklch(14.9% 0 69.8);
	--color-dark-blue: oklch(36.8% 0.0965 258.5);
	--color-midnight-blue: oklch(31.9% 0.0509 258.7);
	--color-light-blue: oklch(89.9% 0.0186 250.6);
	--color-bone-oatmeal-1: oklch(97.6% 0.0232 90.8);
	--color-bone-oatmeal-2: oklch(98.5% 0.0159 88.4);
	--color-tawny-rust-dark: oklch(61.8% 0.1797 44);
	--color-tawny-rust-light: oklch(70.8% 0.197 46.7);

	/* Semantic colors */
	/* TODO: Try to use semantic variables everywhere outside of this selector.
	         Search --color and see how many special use cases we're dealing
	         with. We may have to compromise to avoid creating too many one-off
	         semantic variables. */
	/* TODO: Make sure we're using the colors consistently (e.g. are we mixing
	         the two bone colors incorrectly?) */
	--color-bg: var(--color-soft-pure-white);
	--color-fg: var(--color-soft-pure-black);
	--color-background: light-dark(var(--color-bone-oatmeal-2), var(--color-midnight-blue));
	--color-base-text: light-dark(var(--color-fg), var(--color-bone-oatmeal-1));
	--color-links-buttons: light-dark(
		var(--color-dark-blue, inherit),
		var(--color-light-blue, inherit)
	);
	--color-accent: light-dark(var(--color-tawny-rust-dark), var(--color-tawny-rust-light));
	--color-selection-fg: light-dark(var(--color-dark-blue), var(--color-light-blue));
	--color-selection-bg: light-dark(var(--color-tawny-rust-light), var(--color-tawny-rust-dark));

	/* Enable dark mode switching */
	color-scheme: light dark;
	--theme-transition-duration: 500ms;
}

/* Enable explicit light-dark toggle */
:root[data-theme="light"] {
	color-scheme: light;
	font-weight: var(--font-weight-light-mode);
}

:root[data-theme="dark"] {
	color-scheme: dark;
	font-weight: var(--font-weight-dark-mode);
	/* Letter spacing also helps dark mode readability but disables
	   ligatures */
	/* letter-spacing: 0.0015em; */
}

body {
	background-color: var(--color-background);
	color: var(--color-base-text);
	transition-property: color, background-color;
	transition-duration: var(--theme-transition-duration);
	transition-timing-function: ease-out;
}

:any-link {
	color: var(--color-links-buttons, initial);
	text-decoration-color: currentColor;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 0.08em;
}

:any-link:hover {
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.09em;
}

::marker {
	color: light-dark(
		var(--color-fg, hsl(0 0% 20%)),
		var(--color-bg, hsl(0 0% 85%))
	);
	transition: color var(--theme-transition-duration) ease-out;
}

::selection {
	color: var(--color-selection-fg);
	background-color: var(--color-selection-bg);
}

button {
	color: var(--color-base-text);
	border: 1px solid var(--color-base-text);
	border-radius: 0.5em;
}

@media print {
	/* Undo *all* dark mode changes. The print media query only changes
	   light-dark() colors to light - it doesn't affect anything else we've
	   changed for dark mode.

	   `color-scheme: light` handles resetting all the color variables, which
	   will not only set text to light mode, but i.e. the svg logo as well.

	   Note we don't have to reset the toggle button because it's hidden for
	   print.
	*/
	:root[data-theme="dark"] {
		color-scheme: light;
		font-weight: 350;
	}

	:root[data-theme="dark"] :is(b, strong) {
		font-weight: 550;
	}

	:root[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) {
		font-weight: 500;
	}

	/* Render link urls in markdown syntax when printing */
	/* ...we can, but do we want to? Some of the links are long. */
	/*
	:any-link::before {
		content: "[";
	}

	:any-link::after {
		content: "](" attr(href) ")";
	}
	*/
}

/* ****************************** */
/* UTILITIES */

.wrapper {
	max-width: var(--wrap-width);
	padding-inline: var(--inline-gutter, 2rem);
	margin-inline: auto;
}

@media print {
	/* Reduce margin; there will already be print margins */
	.wrapper {
		max-width: 100%;
		margin-block: var(--flow-space);
	}
}

.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
}

.text-align-start {
	text-align: start;
}

.text-align-center {
	text-align: center;
}

.text-align-end {
	text-align: end;
}

.text-serif {
	font-family: var(--font-stack-serif);
	font-feature-settings: "onum";
}

.text-sans {
	font-family: var(--font-stack-sans-serif);
	/* font-feature-settings: "onum"; */
}

/* ****************************** */
/* COMPONENT: Site Nav */

.site-nav {
	display: flex;
	flex-flow: row wrap;
	justify-content: end;
	align-items: center;
	gap: 0.5rlh;
	padding-block: 0.2rlh;
	padding-inline: 1rlh;
	position: sticky;
	top: 0;

	color: var(--color-links-buttons);
	background-color: var(--color-background);
	/* background-image: linear-gradient(
		135deg,
		var(--color-background) 0rlh, 0.5rlh,
		light-dark(var(--color-dark-blue), var(--color-bone-oatmeal-1)) 0.5rlh, 1.5rlh,
		var(--color-light-blue) 1.5rlh, 2.5rlh,
		var(--color-tawny-rust-dark) 2.5rlh, 3.5rlh,
		var(--color-background) 3.5rlh
	); */
	/* background-image: linear-gradient(
		135deg,
		var(--color-background) 0rlh, 0.75rlh,
		light-dark(var(--color-dark-blue), var(--color-bone-oatmeal-1)) 0.75rlh, 1.5rlh,
		var(--color-light-blue) 1.5rlh, 2.25rlh,
		var(--color-tawny-rust-dark) 2.25rlh, 3rlh,
		var(--color-background) 3rlh
	); */
	transition-property: color, background-color;
	transition-duration: var(--theme-transition-duration);
	transition-timing-function: ease-out;

	/* Layering system:
	   Base content gets z-index 0-9
	   Nav gets 10-19
	   Modals etc get 20+
	*/
	z-index: 10;
}

.site-nav > * {
	flex: 0 0 auto;
}

.site-nav .current-page {
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.09em;
}

.site-nav button {
	width: 2.25rem;
	height: 2.25rem;
	color: inherit;
	padding: 0.15em;
	text-align: inherit;
	font: unset;
	border: none;
	background-color: inherit;
}

/* Dark mode toggle button */
button#themeToggle {
	--theme-icon-rotation: 0deg;
}

:root[data-theme="dark"] button#themeToggle {
	--theme-icon-rotation: -180deg;
}

@media print {
	.site-nav {
		display: none;
	}
}

/* ****************************** */
/* COMPONENT: Homepage */

.homepage-main {
	--wrap-width: 120ch;
	font-size: var(--size-2-rem);
	--flow-space: 1rlh;

	display: grid;
	grid-template-columns: 1fr;
	gap: 2rlh;
	align-items: start;
	justify-items: center;
}

.homepage-main .homepage-bio-image {
	max-width: 24rem;
	margin-inline: auto;
}

.homepage-main header h1 {
	font-size: var(--size-5-rem);
	line-height: var(--size-5-rlh);

	/* Avoid wrapping on most phones and all the way up.
	   Scale to upper bound asap. */
	font-size: clamp(var(--size-3-rem), calc(var(--size-1-rem) + 3.8vw), var(--size-5-rem));
	/* We can stray from the vertical rhythm here */
	line-height: 1;
}

/* Make homepage h2 subheading look like body text */
.homepage-main header h2 {
	font-size: var(--size-1-rem);
	line-height: var(--size-1-rlh);
	margin-block-start: 0.5rlh;
}

:root[data-theme="light"] .homepage-main header h2 {
	font-weight: var(--font-weight-light-mode);
}

:root[data-theme="dark"] .homepage-main header h2 {
	font-weight: var(--font-weight-dark-mode);
}

.homepage-main .homepage-intro-text {
	/* Use with serif */
	--wrap-width: 58ch;
	/* Use with sans-serif */
	/* --wrap-width: 50ch; */
	/* Use with serif */
	margin-block-start: 4rlh;
	/* Use with sans-serif */
	/* margin-block-start: 2rlh;	 */

	padding-inline: 0;
	--flow-space: 1rlh;
}

@media (min-width: 52em) {
	.homepage-main {
		grid-template-columns: 2fr 3fr;
		justify-items: start;
	}

	.homepage-main header {
		margin-block-start: 4rlh;
	}

	.homepage-main .homepage-bio-image {
		margin-inline-end: 0;
	}
}

/* ****************************** */
/* COMPONENT: Resume */

/* Use Grid so we don't have to style the child elements as well */
.resume-header {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rlh;
	align-items: start;
}

.logo-svg {
	max-width: 6rem;
	margin-inline: auto;
}

@media (min-width: 24em) {
	.resume-header {
		grid-template-columns: minmax(5rem, 1fr) 4fr;
		gap: 1rlh;
	}

	.logo-svg {
		max-width: 100%;
	}
}

@media screen and (min-width: 60em) {
	.resume-main.wrapper {
		margin-inline: 15% auto;
	}
}

/* Workaround: markdown lists don't have flow class */
.resume-main li {
	margin-block-start: var(--flow-space, 1em);
}

/* Dialog element */
.resume-css-dialog {
	position: fixed;
	/* Be on top of the nav */
	z-index: 20;
	top: max(1rlh, env(safe-area-inset-top, 1rlh));
	left: 0;
	padding: 0;
	/* max-width: 85em; */
	height: 100%;
	max-height: calc(
		100% - max(1rlh, env(safe-area-inset-top, 1rlh)) -
			max(1rlh, env(safe-area-inset-bottom, 1rlh))
	);
	border: 3px solid var(--color-fg);
	border: none;
	box-shadow: 0 0 2.5em -0.5em light-dark(var(--color-midnight-blue), var(--color-light-blue));

	background-color: #1e1e2e; /* catppuccin-mocha bg */
	background-color: #22272e; /* github-dark-dimmed bg */
}

/* Dialog when it's in modal state */
.resume-css-dialog:modal {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

button#closeStylesheet {
	margin: 0.5rlh;
}

.resume-css-dialog .shiki {
	padding: 0.5rlh;
	overflow: auto;
	scrollbar-gutter: stable;
	max-inline-size: 100%;
	max-block-size: 100%;
}

@media print {
	.resume-header {
		grid-template-columns: 5rem 1fr;
		gap: 1rlh;
	}
}

/* ****************************** */
/* COMPONENT: Student Feedback */

.student-feedback-main blockquote p:nth-child(2) {
	position: relative;
	--flow-space: 0;
}

.student-feedback-main blockquote p:nth-child(2)::before {
	content: "“";
	font-size: 5rem;
	line-height: 1rem;
	/* I like the light blue in both modes, but it's not enough contrast
	   on the bone/oatmeal background (white was fine) */
	/* color: var(--color-light-blue); */
	color: light-dark(var(--color-dark-blue), var(--color-light-blue));
	position: absolute;
	left: -0.5em;
	top: 0.3em;
}

.student-feedback-main article {
	--flow-space: 1rlh;
}

.blockquote-semester::before {
	display: none;
}

.chart-container {
	aspect-ratio: 2;
}

.chart-canvas {
	background-color: var(--color-bone-oatmeal-2);
	max-width: 100%;
}

.chart-caption {
	font-size: 0.875em;
}