/* reference: https://carbonmade.com/signin */
body {
    font-family: 'Avenir Next', Quicksand, Arial, YuGothic, 'Yu Gothic', 游ゴシック体, 游ゴシック, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: 99%;
    line-height: 2em;

    color: #555;

    background-color: #ffffff;
    background: linear-gradient(to bottom, #5b5b77 50%, #29283b 100%);
}
a { color: white; }
a:hover { color: pink; }
a:visited { color: #eee; }

header {
    overflow: hidden;
    width: 100%;
    padding: 10px;
}
header h1 {
    text-align: center;
    color: #43c1be;
}
.main-nav {
    display: flex;
    position: relative;
    height: 44px;
    visibility: visible;
    height: 5em;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.main-nav ul {
    height: 44px;
    display: inline-table;
    max-width: 100%;
}
.main-nav li {
    float: left;
    word-wrap: break-word;
    display: table-cell;
    text-align: -webkit-match-parent;
    white-space: nowrap;
    padding: 0 12px;
    list-style: none;
}

.main-nav {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.main-nav ul {
    display: inline-table;
    max-width: 100%;
    padding: 0 1rem;             
}
.main-nav .list li {
    display: table-cell;
    padding: 4px;
}
main {
    margin: 0 auto;
    flex: 1;
    padding: 10px;
}
footer {
    font-size: smaller;
    text-align: center;
}
.album {
    margin: 0 0 1em 0;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #f8f8f8;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 0px #cccccc;
}
.album .number {
    color: #444;
    background: none;
    border: 1px solid #ccc;
    border-radius: 17px;
    padding: 6px 20px;
    transition: all 0.15s ease-in-out;
}
.album .number:hover {
    color: #888;
    border-color: #ddd;
}
.album .title {
    padding: 16px 0;
    line-height: 1.7em;
    font-size: x-large;
    font-weight: bold;
    font-family: serif;
    text-align: center;
}
.album .name {
    color: #7777af;
    font-weight: bold;
}
.album .signature {
    text-align: right;
}

.form {
margin: 23px auto;
max-width: 400px;
padding: 20px 24px 24px;
background-color: #fff;
border-radius: 8px;
}
.button {
-webkit-appearance: none;
display: inline-block;
height: 70px;
line-height: 70px;
width: 100%;
padding: 0 25px;
color: white;
font-weight: 500;
font-size: 26px;
text-decoration: none;
border: none;
border-radius: 35px;
-webkit-font-smoothing: antialiased;
cursor: pointer;
background-clip: padding-box;
background-color: #43c1be;
-webkit-transition: background 0.15s ease-in-out, width .2s ease-in-out;
transition: background 0.15s ease-in-out, width .2s ease-in-out;

}
.fillin {
padding: 15px;
height: 30px;

border: none;
border-bottom: 2px solid #f2f3f3;
color: rgba(128, 130, 133, 1);
background-color: #fff;
font: 400 22px / 30px 'Avenir Next', 'ProximaNova', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
box-shadow: none;
border-radius: 0;

outline: 0;
}
input.fillin:focus { border-bottom: 2px solid #95d2ec; }
/*
input[type="text"],
textarea {
    outline: none;
    border: 1px solid #aaa;
    -webkit-transition: all .3s;
    transition: all .3s;
}
input[type="text"]:focus,
textarea:focus {
    box-shadow: 0 0 7px #1abc9c;
    border: 1px solid #1abc9c;
}
input[type="text"] {
    width: 200px;
    transition: width .3s;
}
input[type="text"]:focus {
    width: 300px;
}
*/
main p {
color: white;
}
@media (min-width: 600px) {
    header, #main-container {
	margin: 0 auto;
	max-width: 800px;
    }
    #main-container {
	display: flex;
    }
    .main {
	margin: 0 10px 0 0;
    }
    .album .title {
	padding: 24px;
	font-size: xx-large;
    }
}