@media only screen and (min-width: 1110px) {
	#site-wrapper {
		overflow-x: hidden;
	}
	body {
		margin: 0;
		padding: 0;
		background: var(--body-background);
		color: var(--content-foreground);
		font-family: var(--primary-font), sans-serif;
		overflow-x: hidden;
	}
	#preloader {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1000;
		background: #708090;
	}
	header {
		height: 100vh;
		background: #282828;
		/* fallback */
		transition: 1s all linear;
	}
	#canvas, canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 60vh;
        z-index: 0;
    }
    headmenu {
        position: fixed;
        width: 100%;
        z-index: 1000;
        padding: 0;
        margin: 0;
        background: linear-gradient(#00000076, #00000030, transparent);
    }
	nav {
		display: flex;
		height: 175px;
		padding: 0 10vw;
		
		transition: all ease-in .75s;
	}
	mnav {
		display: none;
	}
	main {
		height: auto;
	}
	section {
		position: relative;
		height: auto;
	}
	footer {
		height: 200px;
		padding: 35px 0;
		color: var(--footer-foreground);
		background: var(--footer-background);
	}
	aside {
		height: 15px;
		padding: 20px 0;
		color: var(--aside-foreground);
		background: var(--aside-background);
		font-size: 0.8rem;
	}
	.transition-mobile {
		display: none;
	}
	.nav-container {
		display: flex;
		position: relative;
		width: calc(100% - 177.5px);
		height: auto;
		z-index: 999;
		margin: 0 0 0 35px;
		padding: 64px 0 64px 0;
		gap: 40px;
		list-style-type: none;
		
		transition: all ease-in .5s;
	}
	.nav-logo {
		width: 60px;
		height: 47px;
		border-radius: 30px;
	}
	.nav-container>li {
		padding-top: 15px;
	}
	.nav-container>li:hover {
		animation: 1s focusShake linear;
	}
	.nav-container>li>a {
		color: var(--nav-idle);
		text-decoration: none;
		font-family: var(--headnav-font);
		transition: 0.25s all ease-in;
	}
	.nav-container>li>a:hover {
		color: var(--nav-hover);
	}
	.soc-container {
		display: flex;
		position: relative;
		width: 207px;
		height: auto;
		z-index: 999;
		margin: 0 35px 0 0;
		padding: 64px 0 64px 0;
		gap: 20px;
		font-size: 20px;
		list-style-type: none;
		
		transition: all ease-in .5s;
	}
	.soc-container>li {
		padding-top: 12px;
	}
	.soc-container>li:hover {
		animation: 1s focusShake ease-in-out;
	}
	.soc-container>li>a {
		color: #fff;
		text-decoration: none;
		font-family: var(--primary-font);
		transition: 0.25s all ease-in;
	}
	.soc-container>li>a:hover {
		color: var(--nav-hover);
	}
	#welcome-container {
		position: absolute;
		margin: 0;
		top: 40%;
		left: 50%;
		width: 55.5vw;
		height: auto;
		transform: translateX(-50%);
		z-index: 998;
	}
	.welcome-title {
		margin: 0;
		padding: 0;
		color: var(--w-title);
		font-family: var(--tertiary-bold), sans-serif;
		font-weight: inherit;
		font-size: 5.5vw;
		text-shadow: var(--site-textshadow) 1px 1px 15px;
	}
	.welcome-subtitle {
		margin: 0;
		padding: 15px 0;
		text-align: center;
		color: var(--w-subtitle);
		font-family: var(--tertiary-font);
		font-weight: bold;
		font-size: 1.75vw;
	}
	.based-in {
	    color: #000;
	    padding-top: 20px;
	    margin: 10px 0;
	    border-top: 1px solid #000;
	    max-width: fit-content;
	    letter-spacing: 1px;
	}
	#top-corner {
		position: relative;
		fill: var(--content-background);
		width: 100%;
		height: 100vh;
		z-index: 997;
	}
	.side-margin {
		height: inherit;
		margin-left: 15%;
		margin-right: 15%;
	}
	article {}
	h1,
	h2,
	h3,
	h4 {
		font-family: var(--secondary-bold);
		font-weight: inherit;
		color: var(--site-title);
	}
	h1 {
		font-size: 3rem;
	}
	h2 {
		font-size: 2.5rem;
	}
	h3 {
		font-size: 1.5rem;
	}
	h4 {
		font-size: 1.75rem;
	}
	p {
		font-size: 1.1rem;
	}
	span.bubble-caption {
	    background: #fc5e39;
        padding: 2px 6px;
        border-radius: 6px;
        font-size: 0.75rem;
	}
	article>p {}
	.transition {
		width: 100vw;
		height: 200px;
		background-image: linear-gradient(0deg, var(--body-background), var(--content-background));
	}
	.justify {
		text-align: justify;
	}
	.hash-bitcoin {
		color: var(--orange-highlight);
	}
	.items-collection {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 12px;
	}
	.portfolio-item {
		/*display: inline-block;*/
		padding: 15px;
		border-radius: 4em;
		width: max-content;
		height: min-content;
		min-width: 19.2px;
		text-align: center;
		font-family: var(--secondary-font);
	}
	.portfolio-item:hover {
		/*color:white;*/
		filter: hue-rotate(-50deg);
		animation: 1s focusShake infinite;
	}
	.language {
		color: black;
		background-color: var(--language-highlight);
	}
	.technology {
		color: white;
		background-color: var(--technology-highlight);
	}
	.library {
		color: white;
		background-color: var(--library-highlight);
	}
	#s-about_me {
		margin-bottom: 10%;
	}
	#s-projects {
		background: linear-gradient(var(--site-secondary) 10%, var(--body-background) 100%);
	}
	#s-p_topcorner {
		position: relative;
		width: 100vw;
		height: 15vh;
		top: 0;
		fill: var(--body-background);
	}
	#s-p_article {
		width: 100%;
	}
	.s-project_collection {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}
	.project-box {
		width: 30.5%;
		height: 15vw;
		padding: 10px;
	}
	.project-card {
		position: relative;
		width: 100%;
		height: 100%;
		background: var(--project-background);
		border: 1px solid var(--project-border);
		border-radius: 3%;
		box-shadow: 1px 1px 10px var(--site-shadow);
		transition: .25s all ease-in;
	}
	.project-card:hover {
		/*
            	    animation: 1s riseUp;
                    animation-timing-function: ease;
                    */
		background: var(--project-background-onhover);
		box-shadow: 1px 1px 30px var(--site-shadow);
	}
	.project_label {
		position: relative;
		font-size: .75rem;
		width: 100%;
		text-align: center;
		display: block;
		margin-top: 5%;
		margin-bottom: 10%;
	}
	.card-thumbnail {
		position: relative;
		width: 100%;
		height: 25%;
		background: var(--project-thumb-background);
		border-radius: 3px 3px 0 0;
	}
	.p-logo {
		position: absolute;
		width: 6vw;
		height: 6vw;
		/*background: white;*/
		border-radius: 6vw;
		top: 15%;
		left: 50%;
		transform: translateX(-50%);
	}
	.p-description {
		position: relative;
		font-size: 0.8rem;
		width: 100%;
		text-align: center;
		margin-top: 30%;
		color: white;
		font-family: var(--tertiary-bold);
	}
	.p-link {
		font-family: var(--code-font);
		font-size: 0.8rem;
		color: white;
		text-decoration: none;
		transition: 0.25s all ease-in-out;
	}
	.p-link:hover {
		color: gray;
	}
	a>i {
	    margin-right: 6px;
	}
	.git_wrapper {
		display: flex;
		position: relative;
		flex-direction: row;
		z-index: 3;
	}
	.left-half,
	.right-half {
		position: relative;
		width: 70%;
		height: auto;
	}
	.bigger-p {
		width: 70%;
		font-size: 1.2rem;
	}
	.left-half {
		margin-left: 15%;
	}
	.right-half {
		margin-right: 15%;
	}
	.personal-info {}
	.pi-title {
		text-align: center;
		margin-bottom: 0;
	}
	.pi-location {
		text-align: center;
		margin-top: 0;
		font-family: var(--code-font);
	}
	.contact-wrapper {
		display: inline-flex;
		position: relative;
		padding-top: 55px;
		left: 50%;
		transform: translateX(-50%);
		gap: 10px;
	}
	.contact-bubble {
		width: 64px;
		height: 64px;
		border: 1px solid var(--misc-border);
		border-radius: 32px;
		color: var(--misc-foreground);
		background: var(--misc-background);
		transition: 0.25s all ease-in;
	}
	.contact-bubble:hover {
		border-color: indigo;
		background: var(--misc-background-onhover);
	}
	.bubble-icon {
		position: relative;
		width: 32px;
		height: 32px;
		padding: 16px;
		/*border-radius: 32px;*/
	}
	#footer-container {
		display: flex;
		width: 100%;
		height: 100%;
	}
	.col-container {
		display: inherit;
		width: calc(100% - 125px);
		height: 100%;
		/*padding-left: 22px;*/
		padding-right: 22px;
		background: none;
	}
	.qr-container {
		width: 125px;
		height: 100%;
	}
	.qr_site {
		width: 100%;
	}
	.qr_label {
		position: relative;
		font-size: .75rem;
		top: 5px;
		padding-left: 21px;
		padding-right: 21px;
	}
	.c-col {
		position: static;
		width: 25%;
		height: 100%;
	}
	.col-header {
		margin: 0;
		margin-bottom: 13px;
		font-size: 1.2rem;
		color: var(--site-title-alt);
	}
	.col-nav {
		position: relative;
		display: grid;
	}
}

@media only screen and (min-width: 651px) and (max-width: 1109px) {
	#site-wrapper {
		overflow-x: hidden;
	}
	body {
		width: 100%;
		margin: 0;
		padding: 0;
		background: var(--body-background);
		color: var(--content-foreground);
		font-family: var(--primary-font), sans-serif;
		overflow-x: hidden;
	}
	#preloader {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1000;
		background: #708090;
	}
	header {
		height: 477.5px;
		background: indigo;
		/* fallback */
		/*background: linear-gradient(-30deg, aqua 5%, indigo 60%, palevioletred 100%);*/
		background: linear-gradient(-100deg, aqua -30%, indigo 40%, palevioletred 90%);
		transition: 1s all linear;
	}
	#canvas, canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        z-index: 0;
    }
	nav {
		display: none;
	}
	mnav {}
	main {
		height: auto;
	}
	section {
		position: relative;
		height: auto;
	}
	footer {
		height: 200px;
		padding: 35px 0;
		color: var(--footer-foreground);
		background: var(--footer-background);
	}
	aside {
		height: 15px;
		padding: 20px 0;
		color: var(--aside-foreground);
		background: var(--aside-background);
		font-size: 0.75rem;
	}
	/* Mobile Stylesheet */
	.bubble-desktop {
		display: none;
	}
	.desktop-only {
		display: none;
	}
	.transition-mobile {
		position: relative;
		background: linear-gradient(rgba(0, 0, 0, 0), var(--body-background));
		width: inherit;
		height: inherit;
		z-index: 4;
	}
	.mnav-container {
		display: flex;
		position: fixed;
		width: 100vw;
		height: 60px;
		top: 0;
		z-index: 1000;
		gap: 40px;
		list-style-type: none;
		line-height: 60px;
		color: var(--mnav-foreground);
		background: var(--mnav-background);
		
		transition: all ease-in .5s;
	}
	.mnav-logo {
		position: relative;
		width: 45px;
		height: 45px;
		top: 7.5px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 30px;
	}
	.mnav-logo__img {
		width: inherit;
	}
	.mnav-burger {
		padding-left: 43px;
		position: absolute;
		display: block;
		height: 57px;
		width: 58px;
		margin: 0;
		top: 0;
		transition: 0.25s all ease-in;
	}
	.burger-showmenu {
		position: absolute;
		width: 18px;
		height: 7px;
		left: 15px;
		top: 26px;
	}
	.mnav-burger:hover {}
	.burger-innerline {
		position: absolute;
		background: var(--mnav-foreground);
		width: 18px;
		height: 1px;
		left: 0;
	}
	.burger-innerline:first-child {
		top: 0;
	}
	.burger-innerline:nth-child(2) {
		top: 3px;
	}
	.burger-innerline:nth-child(3) {
		top: 6px;
	}
	#welcome-container {
		position: absolute;
		margin: 0;
		top: 20%;
		left: 50%;
		width: 65.5vw;
		height: auto;
		transform: translateX(-50%);
		z-index: 998;
	}
	.welcome-title {
		margin: 0;
		padding: 0;
		color: var(--w-title);
		font-family: var(--tertiary-bold), sans-serif;
		font-weight: inherit;
		font-size: 6.5vw;
		text-shadow: var(--site-textshadow) 1px 1px 15px;
	}
	.welcome-subtitle {
		margin: 0;
		padding: 15px 0;
		text-align: center;
		color: var(--w-subtitle);
		font-family: var(--primary-bold);
		font-weight: bold;
		font-size: 2.5vw;
	}
	.based-in {
	    color: #FFF;
	    padding-top: 20px;
	    margin: 10px 0;
	    border-top: 1px solid #FFF;
	    max-width: fit-content;
	    letter-spacing: 1px;
	}
	#top-corner {
		display: none;
		position: relative;
		fill: var(--content-background);
		width: 100%;
		height: 100vh;
		z-index: 997;
	}
	.side-margin {
		height: inherit;
		margin-left: 5%;
		margin-right: 5%;
	}
	article {
		padding-top: 35px;
	}
	h1,
	h2,
	h3,
	h4 {
		font-family: var(--secondary-bold);
		font-weight: inherit;
		color: var(--site-title);
	}
	h1 {
		margin-top: 0;
		padding-top: 25px;
		font-size: 2rem;
	}
	h2 {
		font-size: 1.5rem;
	}
	h3 {
		font-size: 1.25rem;
	}
	h4 {
		font-size: 1rem;
	}
	p {
		font-size: 0.9rem;
	}
	span.bubble-caption {
	    background: #fc5e39;
        padding: 2px 6px;
        border-radius: 6px;
        font-size: 0.75rem;
	}
	article>p {}
	.transition {
		display: none;
		width: 100%;
		height: 200px;
		background-image: linear-gradient(0deg, var(--body-background), var(--content-background));
	}
	.justify {
		text-align: justify;
	}
	.hash-bitcoin {
		color: #F7931A;
	}
	.items-collection {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 12px;
	}
	.portfolio-item {
		display: inline-block;
		padding: 10px;
		border-radius: 4em;
		width: max-content;
		height: min-content;
		min-width: 19.2px;
		text-align: center;
		font-size: 0.7rem;
		transition: 0.25s all ease-in;
	}
	.portfolio-item:hover {
		/*color: white;*/
		filter: hue-rotate(-50deg);
		animation: 1s focusShake infinite;
	}
	.language {
		color: black;
		background-color: aquamarine;
	}
	.technology {
		color: white;
		background-color: crimson;
	}
	.library {
		color: white;
		background-color: slateblue;
	}
	#s-about_me {
		margin-bottom: 10%;
	}
	#s-projects {
		background: linear-gradient(var(--site-secondary) 10%, var(--body-background) 100%);
	}
	#s-p_topcorner {
		position: relative;
		width: 100%;
		height: 15vh;
		top: 0;
		fill: var(--body-background);
	}
	#s-p_article {
		width: 100%;
	}
	.s-project_collection {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.project-box {
		width: auto;
        height: 15vw;
        padding: 8px;
	}
	.project-card {
		position: relative;
		width: 100%;
		height: 100%;
		background: var(--project-background);
		border: 1px solid var(--project-border);
		border-radius: 3%;
		box-shadow: 1px 1px 10px var(--site-shadow);
		transition: .25s all ease-in;
	}
	.project-card:hover {
		background: var(--project-background-onhover);
		box-shadow: 1px 1px 30px var(--site-shadow);
	}
	.project_label {
		position: relative;
		font-size: .75rem;
		width: 100%;
		text-align: center;
		display: block;
		margin-top: 5%;
		margin-bottom: 10%;
	}
	.card-thumbnail {
		position: absolute;
		width: 60%;
		height: 100%;
		right: 0;
		/*background: var(--project-thumb-background);*/
		background: linear-gradient(100deg, rgba(0, 0, 0, 0) 20%, cadetblue 180%);
		border-radius: 3px 3px 0 0;
	}
	.p-logo {
		position: absolute;
		width: 10vw;
		height: 10vw;
		/*background: white;*/
		border-radius: 6vw;
		top: 15%;
		left: 12%;
		transform: translateX(-50%);
	}
	.p-description {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: left;
		margin: 0;
		padding-left: 22%;
		box-sizing: border-box;
		line-height: 14vw;
		color: white;
		font-size: 1.2rem;
		font-family: var(--tertiary-bold);
	}
	.p-link {
		position: absolute;
		top: 15%;
		right: 5%;
		font-family: var(--code-font);
		font-size: 0.8rem;
		color: white;
		text-decoration: none;
		transition: 0.25s all ease-in-out;
	}
	.p-link:hover {
		color: gray;
	}
	a>i {
	    margin-right: 6px;
	}
	.s-c_methods {
		width: 100%;
	}
	.s-c_method {
		position: relative;
		padding: 1vw;
		border-radius: 1vw;
		color: white;
		background: linear-gradient(45deg, #2bdeff, #2b94ff);
		font-size: 0.9rem;
	}
	.c_m_discord {
		background: linear-gradient(45deg, #2b6594, #2b306e);
	}
	.c_m_three {
		background: linear-gradient(45deg, #2b94ff, #2b6392);
	}
	.git_wrapper {
		display: flex;
		position: relative;
		flex-direction: column;
		z-index: 3;
	}
	.left-half,
	.right-half {
		position: relative;
		width: 70%;
		height: auto;
		margin-left: 15%;
		margin-right: 15%;
	}
	.contact-container {
		position: relative;
		margin-top: 5vh;
	}
	.personal-info {}
	.pi-title {
		text-align: center;
		margin-bottom: 0;
	}
	.pi-location {
		text-align: center;
		margin-top: 0;
		font-family: var(--code-font);
	}
	.contact-wrapper {
		display: inline-flex;
		position: relative;
		padding-top: 55px;
		left: 50%;
		transform: translateX(-50%);
		gap: 10px;
	}
	.contact-bubble {
		width: 64px;
		height: 64px;
		border: 1px solid var(--misc-border);
		border-radius: 32px;
		color: var(--misc-foreground);
		background: var(--misc-background);
		transition: 0.25s all ease-in;
	}
	.contact-bubble:hover {
		border-color: indigo;
		background: var(--misc-background-onhover);
	}
	.bubble-icon {
		position: relative;
		width: 32px;
		height: 32px;
		padding: 16px;
		/*border-radius: 32px;*/
	}
	#footer-container {
		display: flex;
		width: 100%;
		height: 100%;
	}
	.col-container {
		display: inherit;
		width: calc(100% - 125px);
		height: 100%;
		/*padding-left: 22px;*/
		padding-right: 22px;
		background: none;
	}
	.qr-container {
		width: 125px;
		height: 100%;
	}
	.qr_site {
		width: 100%;
	}
	.qr_label {
		position: relative;
		font-size: .75rem;
		top: 5px;
		padding-left: 21px;
		padding-right: 21px;
	}
	.c-col {
		position: static;
		width: calc(50% - 10px);
		height: 100%;
		margin-right: 10px;
	}
	.col-header {
		margin: 0;
		margin-bottom: 13px;
		color: var(--footer-header);
		font-size: 2.8vw;
	}
	.col-nav {
		position: relative;
		display: grid;
	}
	.cc-navitem {
		font-size: 2.5vw;
		color: #464953;
	}
	.cc-navitem:hover {
		color: #bbb;
	}
	.made-in-czechia-label {
		display: none;
	}
}

@media only screen and (max-width: 650px) {
	#site-wrapper {
		overflow-x: hidden;
	}
	body {
		width: 100%;
		margin: 0;
		padding: 0;
		background: var(--body-background);
		color: var(--content-foreground);
		font-family: var(--primary-font), sans-serif;
		overflow-x: hidden;
	}
	#preloader {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1000;
		background: #708090;
	}
	header {
		height: 477.5px;
		background: indigo;
		/* fallback */
		/*background: linear-gradient(-30deg, aqua 5%, indigo 60%, palevioletred 100%);*/
		background: linear-gradient(-100deg, aqua -30%, indigo 40%, palevioletred 90%);
		transition: 1s all linear;
	}
	#canvas, canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        z-index: 0;
    }
	nav {
		display: none;
	}
	mnav {}
	main {
		height: auto;
	}
	section {
		position: relative;
		height: auto;
	}
	footer {
		height: 200px;
		padding: 35px 0;
		color: var(--footer-foreground);
		background: var(--footer-background);
	}
	aside {
		height: 15px;
		padding: 20px 0;
		color: var(--aside-foreground);
		background: var(--aside-background);
		font-size: 0.75rem;
	}
	/* Mobile Stylesheet */
	.bubble-desktop {
		display: none;
	}
	.desktop-only {
		display: none;
	}
	.transition-mobile {
		position: relative;
		background: linear-gradient(rgba(0, 0, 0, 0), var(--body-background));
		width: inherit;
		height: inherit;
		z-index: 4;
	}
	.mnav-container {
		display: flex;
		position: fixed;
		width: 100vw;
		height: 60px;
		top: 0;
		z-index: 1000;
		gap: 40px;
		list-style-type: none;
		line-height: 60px;
		color: var(--mnav-foreground);
		background: var(--mnav-background);
	}
	.mnav-logo {
		position: relative;
		width: 45px;
		height: 45px;
		top: 7.5px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 30px;
	}
	.mnav-logo__img {
		width: inherit;
	}
	.mnav-burger {
		padding-left: 43px;
		position: absolute;
		display: block;
		height: 57px;
		width: 58px;
		margin: 0;
		top: 0;
		transition: 0.25s all ease-in;
	}
	.burger-showmenu {
		position: absolute;
		width: 18px;
		height: 7px;
		left: 15px;
		top: 26px;
	}
	.mnav-burger:hover {}
	.burger-innerline {
		position: absolute;
		background: var(--mnav-foreground);
		width: 18px;
		height: 1px;
		left: 0;
	}
	.burger-innerline:first-child {
		top: 0;
	}
	.burger-innerline:nth-child(2) {
		top: 3px;
	}
	.burger-innerline:nth-child(3) {
		top: 6px;
	}
	#welcome-container {
		position: absolute;
		margin: 0;
		top: 20%;
		left: 50%;
		width: 65.5vw;
		height: auto;
		transform: translateX(-50%);
		z-index: 998;
	}
	.welcome-title {
		margin: 0;
		padding: 0;
		color: var(--w-title);
		font-family: var(--tertiary-bold), sans-serif;
		font-weight: inherit;
		font-size: 6.5vw;
		text-shadow: var(--site-textshadow) 1px 1px 15px;
	}
	.welcome-subtitle {
		margin: 0;
		padding: 15px 0;
		text-align: center;
		color: var(--w-subtitle);
		font-family: var(--primary-bold);
		font-weight: bold;
		font-size: 2.5vw;
	}
	#top-corner {
		display: none;
		position: relative;
		fill: var(--content-background);
		width: 100%;
		height: 100vh;
		z-index: 997;
	}
	.side-margin {
		height: inherit;
		margin-left: 5%;
		margin-right: 5%;
	}
	article {
		padding-top: 35px;
	}
	h1,
	h2,
	h3,
	h4 {
		font-family: var(--secondary-bold);
		font-weight: inherit;
		color: var(--site-title);
	}
	h1 {
		margin-top: 0;
		padding-top: 25px;
		font-size: 2rem;
	}
	h2 {
		font-size: 1.5rem;
	}
	h3 {
		font-size: 1.25rem;
	}
	h4 {
		font-size: 1rem;
	}
	p {
		font-size: 0.9rem;
	}
	span.bubble-caption {
	    background: #fc5e39;
        padding: 2px 6px;
        border-radius: 6px;
        font-size: 0.75rem;
	}
	article>p {}
	.transition {
		display: none;
		width: 100%;
		height: 200px;
		background-image: linear-gradient(0deg, var(--body-background), var(--content-background));
	}
	.justify {
		text-align: justify;
	}
	.hash-bitcoin {
		color: #F7931A;
	}
	.items-collection {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 12px;
	}
	.portfolio-item {
		display: inline-block;
		padding: 10px;
		border-radius: 4em;
		width: max-content;
		height: min-content;
		min-width: 19.2px;
		text-align: center;
		font-size: 0.7rem;
		transition: 0.25s all ease-in;
	}
	.portfolio-item:hover {
		/*color: white;*/
		filter: hue-rotate(-50deg);
		animation: 1s focusShake infinite;
	}
	.language {
		color: black;
		background-color: aquamarine;
	}
	.technology {
		color: white;
		background-color: crimson;
	}
	.library {
		color: white;
		background-color: slateblue;
	}
	#s-about_me {
		margin-bottom: 10%;
	}
	#s-projects {
		background: linear-gradient(var(--site-secondary) 10%, var(--body-background) 100%);
	}
	#s-p_topcorner {
		position: relative;
		width: 100%;
		height: 15vh;
		top: 0;
		fill: var(--body-background);
	}
	#s-p_article {
		width: 100%;
	}
	.s-project_collection {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.project-box {
		width: auto;
		height: 24vw;
		padding: 8px;
	}
	.project-card {
		position: relative;
		width: 100%;
		height: 100%;
		background: var(--project-background);
		border: 1px solid var(--project-border);
		border-radius: 3%;
		box-shadow: 1px 1px 10px var(--site-shadow);
		transition: .25s all ease-in;
	}
	.project-card:hover {
		background: var(--project-background-onhover);
		box-shadow: 1px 1px 30px var(--site-shadow);
	}
	.project_label {
		position: relative;
		font-size: .75rem;
		width: 100%;
		text-align: center;
		display: block;
		margin-top: 5%;
		margin-bottom: 10%;
	}
	.card-thumbnail {
		position: absolute;
		width: 60%;
		height: 100%;
		right: 0;
		/*background: var(--project-thumb-background);*/
		background: linear-gradient(100deg, rgba(0, 0, 0, 0) 20%, cadetblue 180%);
		border-radius: 3px 3px 0 0;
	}
	.p-logo {
		position: absolute;
		width: 10vw;
		height: 10vw;
		/*background: white;*/
		border-radius: 6vw;
		top: 15%;
		left: 12%;
		transform: translateX(-50%);
	}
	.p-description {
		position: relative;
		width: 100%;
		text-align: left;
		margin-top: 20%;
		padding-left: 5%;
		box-sizing: border-box;
		color: white;
		font-size: 0.9rem;
		font-family: var(--tertiary-bold);
	}
	.p-link {
		position: absolute;
		top: 15%;
		right: 5%;
		font-family: var(--code-font);
		font-size: 0.8rem;
		color: white;
		text-decoration: none;
		transition: 0.25s all ease-in-out;
	}
	.p-link:hover {
		color: gray;
	}
	a>i {
	    float: right;
	    margin-left: 6px;
	}
	.s-c_methods {
		width: 100%;
	}
	.s-c_method {
		position: relative;
		padding: 1vw;
		border-radius: 1vw;
		color: white;
		background: linear-gradient(45deg, #2bdeff, #2b94ff);
		font-size: 0.9rem;
	}
	.c_m_discord {
		background: linear-gradient(45deg, #2b6594, #2b306e);
	}
	.c_m_three {
		background: linear-gradient(45deg, #2b94ff, #2b6392);
	}
	.git_wrapper {
		display: flex;
		position: relative;
		flex-direction: column;
		z-index: 3;
	}
	.left-half,
	.right-half {
		position: relative;
		width: 70%;
		height: auto;
		margin-left: 15%;
		margin-right: 15%;
	}
	.contact-container {
		position: relative;
		margin-top: 5vh;
	}
	.personal-info {}
	.pi-title {
		text-align: center;
		margin-bottom: 0;
	}
	.pi-location {
		text-align: center;
		margin-top: 0;
		font-family: var(--code-font);
	}
	.contact-wrapper {
		display: inline-flex;
		position: relative;
		padding-top: 55px;
		left: 50%;
		transform: translateX(-50%);
		gap: 10px;
	}
	.contact-bubble {
		width: 64px;
		height: 64px;
		border: 1px solid var(--misc-border);
		border-radius: 32px;
		color: var(--misc-foreground);
		background: var(--misc-background);
		transition: 0.25s all ease-in;
	}
	.contact-bubble:hover {
		border-color: indigo;
		background: var(--misc-background-onhover);
	}
	.bubble-icon {
		position: relative;
		width: 32px;
		height: 32px;
		padding: 16px;
		/*border-radius: 32px;*/
	}
	#footer-container {
		display: flex;
		width: 100%;
		height: 100%;
	}
	.col-container {
		display: inherit;
		width: calc(100% - 125px);
		height: 100%;
		/*padding-left: 22px;*/
		padding-right: 22px;
		background: none;
	}
	.qr-container {
		width: 125px;
		height: 100%;
	}
	.qr_site {
		width: 100%;
	}
	.qr_label {
		position: relative;
		font-size: .75rem;
		top: 5px;
		padding-left: 21px;
		padding-right: 21px;
	}
	.c-col {
		position: static;
		width: calc(50% - 10px);
		height: 100%;
		margin-right: 10px;
	}
	.col-header {
		margin: 0;
		margin-bottom: 13px;
		color: var(--footer-header);
		font-size: 2.8vw;
	}
	.col-nav {
		position: relative;
		display: grid;
	}
	.cc-navitem {
		font-size: 2.5vw;
		color: #464953;
	}
	.cc-navitem:hover {
		color: #bbb;
	}
	.made-in-czechia-label {
		display: none;
	}
}