:root {
	--box-shadow-patch: 0 1px 1px hsl(0deg 0% 0% / 0.035),
    0 2px 2px hsl(0deg 0% 0% / 0.035),
    0 4px 4px hsl(0deg 0% 0% / 0.035),
    0 8px 8px hsl(0deg 0% 0% / 0.035),
    0 16px 16px hsl(0deg 0% 0% / 0.035);
	--box-shadow-inset-patch: 0 1px 1px inset rgba(0, 0, 0, 0.075),
    0 2px 2px inset hsl(0deg 0% 0% / 0.075),
    0 4px 4px inset hsl(0deg 0% 0% / 0.075),
    0 8px 8px inset hsl(0deg 0% 0% / 0.064),
    0 16px 16px inset hsl(0deg 0% 0% / 0.052);
	--gradient-color-primary: rgba(79,172,254,0.5);
	--gradient-color-secondary: rgba(0,242,254,0.79);
}

@media screen and (min-width:0px) and (max-width:374px) {
	html {
		display: none;
	}
}
.sw-text { letter-spacing: 1px; text-transform: uppercase; font-size: 14px; font-weight: bold; color: #ffffff; text-decoration: none; display: none; }
.sw-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.portfolio-nav-item:hover { color: #848484; }
.sw-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	padding-top: 10px; padding-bottom: 10px;
	padding-left: 16px; padding-right: 16px;
	width: auto;
	background: #303134;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: var(--box-shadow-inset-patch);
	transform: translateX(-110px) translateY(-35px);
	display: none;
}
.profile-picture-container {
	padding: 10px;
	border-radius: 50%;
	box-shadow: var(--box-shadow-inset-patch);
	padding: 10px;
}
.button-container-sub {
	background: rgba(16,153,163,0.25);
	box-shadow: 0 8px 20px 0 rgba(31,38,135,0.37);
	border-radius: 17px;
	cursor: pointer;
	text-align: center;
	width: 63.344px;
	height: 57.984px;
	transition: 0s background;	
}
.button-container-sub:hover {
	background: rgba(16,153,163,0.25);
	box-shadow: inset 0 8px 20px 0 rgba(31,38,135,0.37);
	border-radius: 17px;
	transition-delay: 1s;
}

.button-container-link {
	margin-top: 38px;
	height: 53px;
	width: 282px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16,153,163,0.25);
	box-shadow: 0 8px 20px 0 rgba(31,38,135,0.37);
	border-radius: 17px;
	cursor: pointer;
	transition: 0s background;
}

.button-container-link:hover {
	background: rgba(16,153,163,0.25);
	box-shadow: inset 0 8px 20px 0 rgba(31,38,135,0.37);
	transition-delay: 1s;
}

.button-link {
	text-transform: uppercase;
	font-style: normal;
	color: #ffffff;
	letter-spacing: 2px;
	font-weight: 600;
	text-decoration: none;
}

.button-link:hover {
	color: #ffffff;
	text-decoration: none;
}

.card-header-style {
	height: 7px;
	border-radius: 5px;
	box-shadow: var(--box-shadow-inset-patch);
	margin-top: 16px;
	margin-bottom: 16px;
	background: linear-gradient(90deg, var(--gradient-color-primary), var(--gradient-color-secondary) 100%);
}

.card-footer-style {
	height: 18px;
	width: 100%;
	border: none;
	border-bottom-left-radius: 10px!important;
	border-bottom-right-radius: 10px!important;
	background: linear-gradient(90deg, var(--gradient-color-primary), var(--gradient-color-secondary) 100%);
}

.card-text-style {
	text-align: center;
	font-family: Roboto;
	font-size: 14px;
}

.content-container-text {
	font-family: Roboto;
	margin-bottom: 0;
	font-size: 14px;
	font-style: bold;
	text-align: center;
}

.content-container-text[type="color"] {
	margin-bottom: 3px;
	font-family: Roboto;
	color: #7d7dff;
	margin-top: 25px;
	font-weight: 700;
	font-size: 18px;
}

.svg-card-style {
	font-size: 55px;
	color: #8583ff;
	height: 1em;
	width: 1em;
}

.view-button-style {
	font-family: Roboto;
	width: 65px;
	background: linear-gradient(90deg, var(--gradient-color-primary), var(--gradient-color-secondary) 100%);
	border: none;
	width: 140px;
	border-radius: 5px;
}

.projects-header-text {
	color: #7d7dff;
	font-weight: 700;
	margin-top: 100px;
	margin-bottom: 89px;
	font-size: 26px;
	padding: 20px 30px;
}

.container-style[type="top"] {
	margin-top: 12px;
}

.container-style[type="bottom"] {
	margin-top: 34px;
	padding-bottom: 48px;
}

.card-content-style {
	background-color: rgba(0,0,0,0.0);
}

.countdown {
	color: #7d7dff;
	font-weight: 650;
	text-decoration: none;
	font-family: Roboto;
	font-size: 14px;
}

.countdown-container {
	display: flex;
	justify-content: end;
	letter-spacing: 1px;
	padding-right: 18px;
	align-items: center;
	width: 100%;
	margin-top: 12px;
}

.header-sub-text {
	text-transform: uppercase;
}

.content-card-style {
	height: 600px;
	background: linear-gradient(90deg, var(--gradient-color-primary), var(--gradient-color-secondary) 100%);
}

.card-text-style {
	font-size: 11px;
	padding-left: 9px;
	padding-right: 9px;
	font-family: Roboto;
	font-weight: 650;
	margin-bottom: 0;
	letter-spacing: 1px;
}

.content-container-text {
	font-size: 12px;
	padding-left: 7px;
	padding-right: 7px;
	font-family: Roboto;
	font-weight: 650;
	letter-spacing: 0.76px;
}

.content-container-text[type="color"] {
	font-size: 12px;
	padding-left: 7px;
	padding-right: 7px;
	font-family: Roboto;
	font-weight: 650;
	letter-spacing: 1px;
}

.sw-overlay { display: none !important; }