alinamarquardt.com/public_html/style.css

/*
https://github.com/murtaugh/HTML5-Reset/
*/

html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

main,
article,
aside,
figure,
footer,
header,
nav,
section,
details,
summary {
	display: block;
}

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

img {
	max-width: 100%;
}

ul {
	list-style: none;
}

/* we'll restore bullets as needed for content */

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

del {
	text-decoration: line-through;
}

abbr[title],
dfn[title] {
	border-bottom: 1px dotted #000;
	cursor: help;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
}

th {
	font-weight: bold;
	vertical-align: bottom;
}

td {
	font-weight: normal;
	vertical-align: top;
}

td img {
	vertical-align: top;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #999;
	margin: 1rem 0;
	padding: 0;
}

input,
select {
	vertical-align: middle;
}

pre {
	white-space: pre-line;
}

input[type="radio"] {
	vertical-align: text-bottom;
}

input[type="checkbox"] {
	vertical-align: bottom;
}

small {
	font-size: .8rem;
}

strong {
	font-weight: bold;
}

sub,
sup {
	font-size: .8rem;
	line-height: 0;
	position: relative;
}

sup {
	top: -0.5rem;
}

sub {
	bottom: -0.25rem;
}

pre,
code,
kbd,
samp {
	font-family: monospace, sans-serif;
}

label,
input[type=button],
input[type=submit],
input[type=file],
button {
	cursor: pointer;
}

button,
input,
select,
textarea {
	margin: 0;
}

ins {
	background-color: var(--highlight-color);
	color: #000;
	text-decoration: none;
}

mark {
	background-color: var(--highlight-color);
	color: #000;
	font-style: italic;
	font-weight: bold;
}

blockquote {
	padding: 2rem;
	border-left: 1px solid #333;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/* https://css-tricks.com/snippets/css/clear-fix/ */

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance
}

p {
	text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
	:has(:target) {
		scroll-behavior: smooth;
	}
}

/* ———— END THE GENERIC RESETS ———— */

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-Regular.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 400;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-It.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 200;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLight.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 200;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-ExtraLightIt.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-Light.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 300;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-LightIt.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 600;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-Semibold.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 600;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-SemiboldIt.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 700;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-Bold.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 700;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-BoldIt.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 900;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-Black.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 900;
	src: local('Source Sans Pro'), url('fonts/SourceSansPro-BlackIt.woff') format('woff');
	font-display: swap;
}

:root {
	/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */
	--font-system: 'Source Sans Pro', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	/* https://css-tricks.com/snippets/css/system-font-stack */
	--text-color: #000;
	--link-color: #3b7885;
	--link-color-hover: #63a8b8;
	--button-color: #63a8b8;
	--button-color-hover: #333;
	--highlight-color: #a3d5d5;
	--placeholder-color: #a9a9a9;
}

html {
	font-size: 18px;
}

body {
	font-size: 1rem;
	font-family: var(--font-system);
}

a {
	color: var(--link-color);
}

a:hover {
	color: var(--link-color-hover);
}

body,
select,
input,
textarea {
	color: var(--text-color);
}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
	background: var(--highlight-color);
	text-shadow: none;
}

::selection {
	background: var(--highlight-color);
	text-shadow: none;
}

/* j.mp/webkit-tap-highlight-color */
a:link {
	-webkit-tap-highlight-color: var(--highlight-color);
}

ins {
	background-color: var(--highlight-color);
	color: var(--text-color);
	text-decoration: none;
}

mark {
	background-color: var(--highlight-color);
	color: var(--text-color);
	font-style: italic;
	font-weight: bold;
}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder {
	color: var(--placeholder-color);
}

textarea:-moz-placeholder {
	color: var(--placeholder-color);
}

body {
	background-color: black;
	/* background-image: url('img/bg.webp'); */
	background-repeat: no-repeat;
	background-position: top left;
	background-attachment: fixed;
}

.elementshadow {
	box-shadow: 0 2px 1px rgba(0, 0, 0, 1);
}

.headlineshadow {
	text-shadow: 0 2px 1px rgba(0, 0, 0, 1);
}

.spaceup {
	margin-top: 4rem;
}

a {
	text-decoration: underline;
	transition: all 0.2s ease-in-out;
}

#background_wrap {
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url('img/bg.webp');
	background-repeat: no-repeat;
	background-position: top left;
	background-attachment: fixed;
}

/* Alternative solution without adding a container */

#wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0rem;
	margin: 1.5rem;
}

.nowrap {
	white-space: nowrap;
}

/* Mobile layout (default) - Elements stacked in desired order */
#greeting {
	width: 100%;
	order: 1;
}

#iam {
	width: 100%;
	order: 2;
}

#music {
	width: 100%;
	order: 3;
}

#experiments {
	width: 100%;
	order: 3;
}

#findme {
	width: 100%;
	order: 99;
}

/* sidebar */

.sidebaritem {
	width: 235px;
	color: white;
	font-size: 1.125rem;
	font-style: italic;
	font-weight: 300;
	transition: margin 0.25s, padding 0.25s;
}

.sidebaritem a {
	color: white;
	display: block;
	text-decoration: none;
}

.sidebaritem a,
.sidebaritem .bigline {
	font-size: 1.5rem;
	line-height: 1em;
}

.sidebaritem a:hover {
	text-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
}

.sidebaritem em {
	font-weight: 600;
}


.sidebaritem#greeting {
	font-size: 1.75rem;
}

.sidebaritem#greeting #icosahedron-container {
	margin-left: 1rem;
	margin-bottom: 1.2rem;
	width: 95px;
	height: 95px;
	position: relative;
}

.sidebaritem#greeting #icosahedron-container canvas {
	width: 100%;
	height: 100%;
}

.sidebaritem#greeting span {
	display: block;
	line-height: 1em;
}

.sidebaritem#greeting .line1 {
	margin-left: 1.375rem;
}

.sidebaritem#greeting .line2 {
	font-weight: 400;
	line-height: 0.8em;
	margin-left: 2rem;
}

.sidebaritem#greeting .line3 {
	font-weight: 600;
	line-height: 1.2em;
	margin-left: 0rem;
}


.sidebaritem#iam {
	margin-top: 2.8rem;
	line-height: 1.1em;
}

.sidebaritem#iam .line1 {
	margin-left: 2.7rem;
	line-height: 0.9em;
}

.sidebaritem#iam .line2 {
	margin-left: 0.3rem;
	line-height: 1em;
}

.sidebaritem#iam .line3 {
	margin-left: 1rem;
	line-height: 1.1em;
}

.sidebaritem#iam .line4 {
	margin-left: 0.4rem;
}

.sidebaritem#iam span {
	display: block;
}


.sidebaritem#findme {
	margin-top: 2.8rem;
	line-height: 1.1em;
}

.sidebaritem#findme .line1 {
	margin-left: 2rem;
}

.sidebaritem#findme .line2 {
	margin-left: 0rem;
}

.sidebaritem#findme .line3 {
	margin-left: 1.7rem;
}

.sidebaritem#findme span.line4 a {
	margin-left: 3.375rem;
	font-size: 1.125rem;
}

/* content */

.contentitem {
	color: white;
	font-size: 1.125rem;
	font-style: italic;
	font-weight: 300;
	width: 100%;
	margin: 0 0 3rem 0;
}

.contentitem header {
	height: 3rem;
	margin-bottom: 1rem;
	padding: 0 0 0 1.25rem;
	position: relative;
}

.contentitem header h1 {
	color: white;
	font-size: 2.125rem;
	font-weight: 300;
	text-shadow: 0 2px 1px rgba(0, 100, 125, 1);
}

.contentitem header.whitebg h1 {
	color: #4e8595;
	text-shadow: none;
}

.contentitem header h1 em {
	font-style: normal;
	font-weight: 400;
}

.contentitem div.opaque {
	padding: 1.25rem;
}

.contentitem div.opaque article {
	margin-bottom: 1.5rem;
}

.contentitem div.opaque h2 {
	font-size: 1.3rem;
	font-weight: 300;
	margin-bottom: 1rem;
	width: 100%;
	position: relative;
}

.contentitem div.opaque h2 em {
	font-weight: 500;
}

h2 span.halfbubble {
	height: 22px;
	width: 11px;
	border-bottom-right-radius: 11px;
	border-top-right-radius: 11px;
	display: inline-block;
	margin: 0 0.7rem -0.25rem 0;
}

div.opaque h2 span.halfbubble {
	margin: 0 0.7rem -0.25rem -1.25rem;
}

.contentitem header .icon {
	float: right;
	margin-right: 1.25rem;
	margin-top: -1rem;
}

.contentitem#experiments header .icon {
	margin-top: -2.5rem;
}

.paused-animation {
	position: relative;
	margin: 0.5em 0;
	/* height: 7rem; */
	cursor: pointer;
}

.paused-animation .play-btn {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(99, 150, 180, 0.2);
	background-image: url('img/play-btn.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}

.paused-animation img {
	display: block;
	width: auto;
	height: 100%;
	margin: 0;
}

.paused-animation .anim {
	display: none;
}

.paused-animation.active {
	height: auto;
}

.paused-animation.active .poster-frame,
.paused-animation.active .play-btn {
	display: none;
}

.paused-animation.active .anim {
	display: block;
}

.watchface {
	width: calc((100% / 2) - 0.6rem);
	margin: 0.325rem 0.3rem;
	height: auto;
	display: block;
	float: left;
}

/* music */

article.album {
	height: auto;
	margin-bottom: 0.5rem;
}

article.album a {
	display: block;
	width: 100%;
	height: 120px;
	color: var(--text-color);
	text-decoration: none;
}

article.album h2 {
	display: inline-block;
	margin-top: 1rem;
	font-size: 1.1rem;
	transition: margin 0.25s;
}

article.album h2 em {
	display: block;
	font-style: normal;
	font-weight: 600;
	font-size: 1.2em;
}

article.album .listenbuy {
	position: relative;
	color: white;
	font-size: 1.1em;
	line-height: 1.2em;
	font-weight: 400;
	display: block;
	margin-top: 0.5em;
	margin-left: 0em;
	margin-right: 1em;
	padding: 0.25em 1em;
	opacity: 0;
	background-color: var(--button-color-hover);
	background-image: url('img/bg_blur.webp');
	background-repeat: no-repeat;
	background-attachment: fixed;
	transition: opacity 0.25s, margin 0.25s, height 0.25s;
	z-index: 1;
}

article.album .listenbuy em {
	font-style: normal;
	font-weight: 600;
}

article.album a:hover .listenbuy {
	margin-top: 1em;
	opacity: 1;
}

article.album a .listenbuy:hover {
	background-image: none;
}

img.albumcover {
	position: relative;
	width: auto;
	height: 100%;
	float: left;
	margin-right: 1.4rem;
	z-index: 10;
	box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.15);
}

article.album a:hover {
	height: 160px;
}

.track h2 {
	font-size: 1.2em;
}

.track .halfbubble {
	margin-bottom: -0.125em;
}

.track-player {
	position: relative;
	margin: 0.5rem 0 1.5rem;
}

.track-player .track-container {
	width: 400px;
	max-width: calc(100% - 95px);
	height: 80px;
	border-radius: 0.3rem;
}

.track-player .track-played,
.track-player .track-unplayed {
	height: 100%;
	width: 100%;
	float: left;
	background-repeat: no-repeat;
	background-size: 400px 80px;
}

.track-player .play-button {
	display: block;
	height: 80px;
	width: 80px;
	float: right;
	position: relative; /* Needed for the ::before positioning */
	cursor: pointer;
	border-radius: 100%;
}

.track-player .play-button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none; /* so it doesn’t block clicks */
}

.track-player .play-button.play::before {
	background-image: url('img/track-play.svg');
}

.track-player .play-button.pause::before {
	background-image: url('img/track-pause.svg');
}

.track-player .track-played {
	width: 0%;
	background-position: top left;
	background-image: none;
}

.track-player .track-unplayed {
	background-position: top right;
	width: 100%;
	background-image: none;
}

/* backgrounds */

.whitebg {
	background-color: white;
	color: var(--text-color);
}

.blurgreen {
	background-color: #1e3f2d;
	background-image: url('img/bg_blur.webp');
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: white;
}


/* Print styles
-------------------------------------------------------------------------------*/
@media print {}


/* Media queries
-------------------------------------------------------------------------------*/

/* Media query for desktop */
@media screen and (min-width: 1245px) {
	#wrapper {
		margin: 4rem 3rem;
		flex-wrap: nowrap;
		gap: 5rem;
	}

	/* Create sidebars "column" */
	#greeting,
	#iam,
	#findme {
		width: 235px;
		flex: 0 0 auto;
	}

	/* Stack the sidebar items vertically with margins */
	#greeting {
		order: 1;
		margin-bottom: 0;
	}

	#iam {
		position: absolute;
		top: calc(4rem + 235px);
		order: 1;
		margin-top: 2.8rem;
	}

	#findme {
		position: absolute;
		top: calc(4rem + 235px + 150px);
		order: 1;
		margin-top: 2.8rem;
	}

	/* Right column */

	.contentitem {
		max-width: 495px;
	}

	#music {
		flex: 1;
		order: 2;
	}

}

/* Media query for mobile */
@media screen and (max-width: 1244px) {

	#wrapper {
		margin: 1em auto;
		max-width: 550px;
		padding: 0 1em;
	}

	#background_wrap {
		background-size: 100%;
	}

	article.album a .listenbuy {
		margin-top: 1em;
		opacity: 1;
	}

	article.album a {
		height: 160px;
	}

	.contentitem {
		max-width: 500px;
		min-width: 340px;
		margin-top: 3rem;
	}

	.sidebaritem {
		margin-left: calc((100% - 210px) / 2);
	}

	.sidebaritem#greeting #icosahedron-container {
		margin-left: 3.5rem;
		margin-top: 1.5rem;
	}

	.sidebaritem#greeting .line1 {
		margin-left: 4rem;
	}

	.sidebaritem#iam {
		padding-left: 0.75rem;
		margin-top: 1.75rem;
	}

	.sidebaritem#iam .line2 {
		padding-left: 0.25rem;
	}

	.sidebaritem#iam .line3 {
		padding-left: 0.25rem;
	}

	.sidebaritem#findme {
		margin-top: 0rem;
		margin-bottom: 2rem;
		padding-left: 1rem;
	}

	.sidebaritem#findme .line2,
	.sidebaritem#findme .line3 {
		margin-top: 0.2em;
	}
}

/* Media query for hoverless */
@media (hover: none) {

	article.album a .listenbuy {
		margin-top: 1em;
		opacity: 1;
	}

	article.album a {
		height: 160px;
	}

}

/* Media query for mobile */
@media screen and (max-width: 550px) {

	html {
		font-size: 16px;
	}

	article.album a {
		height: 140px;
	}

	article.album a .listenbuy {
		margin-top: 0.5em;
	}
}


@media print {}