@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');


* {
	box-sizing: border-box;
}

:root {
	--main-width: 720px;
	
	--back-color: #171717;
	--main-color: #2c2c2c;
	--border-color: #555;
	
	--theme-color: #f5a;
	--theme-color-light: #fae;
	--theme-color-dark: #43303a;
	
	--accent-color: #f95;
	
	--text-color: #eee;
}

body {
	background-color: var(--back-color);
}

/* ヘッダ */
#header {
	width: var(--main-width);
	margin: 0px auto;
}

#header-logo {
	font-family: 'Abel', sans-serif;
	font-weight: 100;
	letter-spacing: 10px;
	font-size: 25px;
	text-align: center;
}
#header-logo:link, #header-logo:visited {
	color: var(--text-color);
	text-decoration: none;
}

/* メイン */
#main {
	width: var(--main-width);
	margin: 0px auto;
	border-radius: 10px;
	padding: 2px 15px 15px 15px;
	
	background-color: var(--main-color);
	
	font-family: 'M PLUS Rounded 1c', sans-serif;
	color: var(--text-color);
	text-align: center;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 20px;
	
	border-bottom: double 6px var(--theme-color);
	margin-top: 30px;
}

/* リンクリスト */
.link-list {
	background-color: #444;
	border-radius: 8px;
	padding: 8px 0px;
}

a.link-item {
	display: block;
	padding: 8px 0px;
	border-bottom: solid 1px var(--border-color);
	border-left: solid 4px #444;
	border-right: solid 4px #444;
	background-color: #444;
	transition: border 0.2s, color 0.2s, background 0.2s;
}

a.link-item:last-child {
	border: none;
}

a.link-item:link, a.link-item:visited {
	color: var(--text-color);
	text-decoration: none;
}
a.link-item:hover, a.link-item:active {
	color: var(--theme-color);
	border-left: solid 4px var(--theme-color);
	border-right: solid 4px var(--theme-color);
	background-color: var(--theme-color-dark);
}

.link-item img {
	width: 40px;
	height: 40px;
	display: block;
	margin: 0px auto 8px auto;
}