/* =========================================
   AI.door
   MONOCHROME / COASTAL THEME
   ========================================= */

:root {
	--aidoor-black: #242424;
	--aidoor-charcoal: #3a3a3a;
	--aidoor-gray: #8a8a86;
	--aidoor-line: #d8d7d2;
	--aidoor-white: #f7f6f2;
	--aidoor-sidebar: #f1f0ec;

	--line-green: #06C755;
}


/* -----------------------------------------
   Base
   ----------------------------------------- */

body {
	background: var(--aidoor-white);
	color: var(--aidoor-charcoal);
}

#main {
	background: var(--aidoor-white);
}

#sidebar {
	background: var(--aidoor-sidebar);
}


/* -----------------------------------------
   Text / Links
   ----------------------------------------- */

a {
	color: var(--aidoor-charcoal);
}

a:hover {
	color: var(--aidoor-black) !important;
}

strong,
b {
	color: var(--aidoor-black);
}


/* -----------------------------------------
   Header Line
   ----------------------------------------- */

#header {
	border-bottom-color: var(--aidoor-charcoal) !important;
}

#header .logo {
	color: var(--aidoor-black) !important;
}


/* -----------------------------------------
   Section Headlines
   ----------------------------------------- */

header.major > :last-child {
	border-bottom-color: var(--aidoor-charcoal) !important;
}

header.major > :last-child:after {
	background: var(--aidoor-charcoal) !important;
}


/* -----------------------------------------
   Main Section Titles
   ----------------------------------------- */

#projects > header.major,
#notes > header.major {
	text-align: center;
}

#projects > header.major h2,
#notes > header.major h2 {
	display: inline-block;
}


/* -----------------------------------------
   Sidebar Menu
   ----------------------------------------- */

#menu ul a,
#menu ul span {
	color: var(--aidoor-charcoal) !important;
}

#menu ul a:hover,
#menu ul span:hover {
	color: var(--aidoor-black) !important;
}


/* -----------------------------------------
   Sidebar Toggle / Hamburger
   ----------------------------------------- */

#sidebar .toggle:before {
	color: var(--aidoor-charcoal) !important;
}

#sidebar .toggle:hover:before {
	color: var(--aidoor-black) !important;
}


/* -----------------------------------------
   Normal Buttons
   ----------------------------------------- */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	box-shadow: inset 0 0 0 2px var(--aidoor-charcoal) !important;
	color: var(--aidoor-charcoal) !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	background: rgba(0, 0, 0, 0.035) !important;
	color: var(--aidoor-black) !important;
	box-shadow: inset 0 0 0 2px var(--aidoor-black) !important;
}


/* -----------------------------------------
   Primary Buttons
   ----------------------------------------- */

.button.primary,
button.primary {
	background: var(--aidoor-charcoal) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

.button.primary:hover,
button.primary:hover {
	background: var(--aidoor-black) !important;
	color: #ffffff !important;
}


/* -----------------------------------------
   LINE Button
   LINEだけブランドカラー
   ----------------------------------------- */

#contact a.fa-line {
	background: var(--line-green) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

#contact a.fa-line:before {
	color: #ffffff !important;
}

#contact a.fa-line:hover {
	background: #05b84e !important;
	color: #ffffff !important;
	box-shadow: none !important;
}


/* -----------------------------------------
   Instagram
   ----------------------------------------- */

#contact .fa-instagram:before {
	color: #d85d63;
}


/* -----------------------------------------
   Projects
   ----------------------------------------- */

#projects .project-card-link:hover h3 {
	color: var(--aidoor-black) !important;
}

#projects .project-category {
	color: var(--aidoor-gray);
}


/* -----------------------------------------
   Notes
   ----------------------------------------- */

#notes-list .note-item h3 a:hover {
	color: var(--aidoor-black) !important;
}


/* -----------------------------------------
   Sidebar Project / Note Links
   ----------------------------------------- */

#sidebar-projects-list a,
#sidebar-notes-list a {
	color: var(--aidoor-charcoal) !important;
}

#sidebar-projects-list a:hover,
#sidebar-notes-list a:hover {
	color: var(--aidoor-black) !important;
}


/* -----------------------------------------
   Lines / Dividers
   ----------------------------------------- */

hr,
.posts > article,
#sidebar section {
	border-color: var(--aidoor-line) !important;
}


/* -----------------------------------------
   Selection
   ----------------------------------------- */

::selection {
	background: var(--aidoor-charcoal);
	color: #ffffff;
}