* {box-sizing: border-box}
[hidden] {display: none !important}
[disabled] {pointer-events:none; opacity: 0.3}

:root {
	--font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
	'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;

	--color-background: #fbfbfb;
	--color-accent: #d10053;
	--color-text-light: #8b54ff;
	--color-text: #3c1533;
	--color-text-dark: #393737;
	--color-primary: #f8095a;
	--color-secondary: #FF4470;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #17191e;
		--color-text: #c0c0c0;
		--color-text-dark: white;
		--color-accent: #56c9a3;
		--color-primary: #11bd8f;
	}

    #wcb_2{
        color: var(--color-primary);
    }
}

html {
    color:var(--color-text);
    font-family: Arial,sans-serif;
    letter-spacing: 0.05em;
    line-height: 2;
    font-size: 100%;
    position: relative;
    background:var(--color-background)
}
body{
    padding:0 0.5rem
}
section{
    margin:0 auto 8rem auto;
}
h1{
    font-weight:500;
    margin:0;
    padding: 2rem 0 2rem 0;
    font-size: clamp(2rem, -0.875rem + 8.333vw, 3rem);
    text-transform:capitalize;
    line-height:1
}

header,main{
    display:flex;
    flex-direction: column;
}

@media screen and (min-width:25em){
    html{
        padding:0.5rem
    }
    header,main{
        margin:0 auto;
        width: 100%;
	    max-width:39em
    }
}

a{
    padding:2px 1px;
    font-weight:bold;
    color: var(--color-accent);
    border-bottom:1px solid transparent;
    transition:color 0.5s, border 0.5s;
    text-decoration:none;
    position: relative
}
a:after{
    content:"";
    width:100%;
    height:1px;
    background: currentColor;
    position: absolute;
    bottom: -1px;
    left: 0;
    transition:all 0.5s
}
a:hover{
    border-color:#8b54ff;
    color:#8b54ff
}
a:hover:after{
    background: transparent
}

::selection{
    background:#D4E1FF
}
::-moz-selection{
    background:#D4E1FF
}

.screen-reader-text{
    border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.screen-reader-text:focus{
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

img.me {
    align-self: center;
    margin: 12vh 0 0 0;
    height: 260px;
}