styles.css

:root {
	--mdc-cherry-raw: 352, 70%, 50%;
	--mdc-naranjo-raw: 19, 97%, 51%;
	--mdc-mango-raw: 44, 100%, 52%;
	--mdc-lime-raw: 112, 83%, 41%;
	--mdc-turquoise-raw: 171, 62%, 54%;

	--mdc-azul-raw: 217, 100%, 61%;
	--mdc-azul-h: 217;
	--mdc-azul-s: 100%;
	--mdc-azul-l: 61%;
	--mdc-grape-raw: 265, 83%, 57%;
	--mdc-grape-h: 265;
	--mdc-grape-s: 83%;
	--mdc-grape-l: 57%;
	--mdc-bubblegum-raw: 334, 100%, 50%;
	--mdc-bubblegum-h: 334;
	--mdc-bubblegum-s: 100%;
	--mdc-bubblegum-l: 50%;

	--mdc-slate-raw: 60, 1%, 14%;
	--mdc-adobe-raw: 240, 24%, 94%;

	--mdc-cherry: hsl(var(--mdc-cherry-raw));
	--mdc-naranjo: hsl(var(--mdc-naranjo-raw));
	--mdc-mango: hsl(var(--mdc-mango-raw));
	--mdc-lime:  hsl(var(--mdc-lime-raw));
	--mdc-turquoise: hsl(var(--mdc-turquoise-raw));
	--mdc-azul: hsl(var(--mdc-azul-raw));
	--mdc-grape: hsl(var(--mdc-grape-raw));
	--mdc-bubblegum: hsl(var(--mdc-bubblegum-raw));
	--mdc-slate: hsl(var(--mdc-slate-raw));
	--mdc-adobe: hsl(var(--mdc-adobe-raw));
}

* {
	font-family: 'Didact Gothic', sans-serif;
	box-sizing: border-box;
}

.mdc {
	font-weight: 900;
  background: linear-gradient(270deg, var(--mdc-azul), var(--mdc-grape), var(--mdc-bubblegum), var(--mdc-naranjo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html {
	touch-action:  manipulation;
}

body, html {
	background-color: var(--mdc-adobe);
	color:  var(--mdc-slate);
}

body {
	display: flex;
	height: auto;
	max-width: 69ch;
	flex-direction: column;
	margin: 48px auto;
	padding: 32px;
	background-color: white;
	border-radius: 16px;
	box-shadow: -0.25rem 0.25rem 0 var(--mdc-azul), 
		-0.5rem 0.5rem 0 var(--mdc-grape),
		-0.75rem 0.75rem 0 var(--mdc-bubblegum);
}

body {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    body {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    body {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    body {
        font-size: 14px;
    }
}

/*.logo-header {
	width: 100%;
}
*/

#logo {
	max-width: 400px;
	margin: 0 auto;
}

svg .m-bg {
	fill:hsl(var(--mdc-bubblegum-h),var(--mdc-bubblegum-s),calc(var(--mdc-bubblegum-l) * 0.5));
}

svg .m-fg {
	fill:var(--mdc-bubblegum);
}

svg .d-bg {
	fill:hsl(var(--mdc-grape-h),var(--mdc-grape-s),calc(var(--mdc-grape-l) * 0.5));
}

svg .d-fg {
	fill:var(--mdc-grape);
}

svg .c-bg {
	fill:hsl(var(--mdc-azul-h),var(--mdc-azul-s),calc(var(--mdc-azul-l) * 0.5));
}

svg .c-fg {
	fill:var(--mdc-azul)
}

header h1 {
	text-align: center;
	margin: -2rem auto 2rem;
	font-size: 1.6rem;
}

header h2	{
	color: var(--mdc-azul);
	font-size: 2rem;
}

section h1 {
	display: inline-block;
	font-weight: 900;
  background: linear-gradient(270deg, var(--mdc-azul), var(--mdc-grape));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5rem;
  margin: 1rem 0 .3rem 0;
}

section h2 {
	display: inline-block;
	font-weight: 700;
  background: linear-gradient(270deg, var(--mdc-grape), var(--mdc-bubblegum));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-size: 1.25rem;
	color: var(--mdc-grape);
}

h3 {
	color: inherit;
	font-size: 1.25rem;
}

a {
	color: var(--mdc-azul);
	font-weight: 900;
  position: relative;
  text-decoration: none;
  z-index: 10;
}

a::before {
  background: var(--mdc-mango);
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease-in-out;
  z-index: -1;
}

a:hover::before {
  transform: scaleX(1.01);
  transform-origin: left;
}

b {
	color: var(--mdc-bubblegum);
}

ul {
	list-style: none;
}

li::before {
	color: var(--mdc-grape);
	content: "⤧ ";
	position: relative;
	top: -2px;
}

@media all and (min-device-width: 640px){
	section.bio {
		display: grid;
		grid-template-columns: 2fr 1fr;
		column-gap: 2em;
	}
}

.tqb-portrait {
	width: 100%;
	margin: auto;
	filter: sepia(50%) hue-rotate(0);
	animation:change-color 24s ease 4s infinite normal;
	box-shadow: 0 4px 4px 0 hsla(var(--mdc-slate-raw),0.5);
}

@keyframes change-color {
	0% {
		filter: sepia(50%) hue-rotate(0);
	}
	100%{
		filter: sepia(50%) hue-rotate(360deg);
	}
}
footer {
	width: 100%;
	text-align: center;
	margin-top: 5vh;
	font-size: 1rem;
}