html, body
{
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#text_theme_color
{
	display: inline;
	color: #609CD4;
}

.contents
{
	/* Current: Let Each Section Decide */
	/* margin: 0 20rem; */
	line-height: 2rem;
}

/* Components */
a
{
	color: #CCC;
	text-decoration: none;
}

a:hover
{
	color: #FF9B9B;
	text-decoration: none;
	transition: color 0.1s ease;
}

h1, h2, h3, h4, .skew_text
{
	transform: skew(-3deg);
}

p
{
	margin: 0 0 2rem 0;
}

p:last-child
{
	margin: 0 0;
}

.asterisk_red
{
	color: #FF0000;
}

.theme_default_btn
{
	display: inline-block;
	padding: 0.5rem 1.5rem;
	color: white;
	background-color: #323232;
	text-decoration: none;
	transition: background-color 0.1s;
	transform: skew(-20deg);
	margin: 0;
	border: none;
	text-shadow: none;
}

.theme_default_btn:hover
{
	background-color: #609CD4;
	color: black;
}

.theme_default_btn.blog_card_btn {
    position: relative; /* Mandatory: For ::after positioning */
    overflow: visible;  /* Mandatory: Prevent ::after from clipped */
	padding: 1rem 2rem;
}

.theme_default_btn.blog_card_btn::after {
    content: "";
    position: absolute;
    top: 0;
	/* For Fix: Gap Between Btn and ::after */
    left: 99.5%;
    width: 5rem;
    height: 100%;
    background-color: inherit;
    z-index: 99;
}

.theme_default_btn_text
{
	transform: skew(17deg);
}

.theme_default_btn_text.blog_card_btn
{
	font-size: 1rem;
}

.theme_large_btn
{
	display: inline-block;
	padding: 0.75rem 2rem;
	color: #FFF;
	background-color: #609CD4;
	text-decoration: none;
	transition: background-color 0.1s;
	transform: skew(-20deg);
	margin: 0;
	border: none;
	text-shadow: none;
	font-size: 1.3rem;
}

.theme_large_btn:hover
{
	color: #000;
	background-color: #FFF;
}

#hamburger
{
	background: transparent;
	border: none;
}