/* CSS Document */
@charset "UTF-8"

html {
	font-size: 100%;
}
body {
	font-family: 'Lato', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif", sans-serif;
	font-weight: 300;
	line-height: 1.7;
	color: #000;
}
a    {
	text-decoration: none;
}
img {
	max-width: 100%;
}

/* Sakura
----------------------- */
.hana{
	position:absolute;
	height: 0;
	width: 100%;
	border: 10px solid pink;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
}
.hana::after{
	display:block;
	position:absolute;
	top:-7px;
	left:-7px;
	height:0;
	width: 100%;
	border: 10px solid pink;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	-webkit-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	transform: rotate(15deg);
}

/* HEADER
------------------- */
.logo {
	width: 200px;
	margin-top: 30px;
}
.main-nav {
	display: flex;
	font-size: 1.25rem;
	text-transform: uppercase;
	margin-top: 34px;
	list-style: none;
	font-family: 'Megrim', sans-serif, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif", sans-serif;
}
.main-nav li {
	margin-left: 36px;
}
.main-nav a {
	color: #000000;
}
.main-nav a:hover {
	color: #FFFFFF;
}
.page-header {
	display: flex;
	justify-content: space-between;
}
.wrapper {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 4%;
}

/* HOME
--------------------------- */
.home-content {
	text-align: center;
	margin-top: 10%;
	max-width: 560px;
}

.home-content p {
	color: #000;
	font-size: 1.125rem;
	margin: 10px 0 42px;
}

.page-title {
	font-size: 4rem;
	font-family: 'Megrim', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	text-transform: uppercase;
	font-weight: normal;
}

.button {
	font-size: 1rem;
	background: #fff;
	color: #000;
	border-radius: 5px;
	padding: 18px 32px;	
}

.button:hover {
	background: #0090aa;
}

.big-bg {
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

#home {
	min-height: 100vh;
	background: linear-gradient(45deg, #26278E, #73A6EF, #FFB1FD);
	background-size: 600% 600%;
          animation: GradientBackground 20s ease infinite;
        }

        @keyframes GradientBackground {
          0% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }
        };
      

#home .page-title {
	text-transform: none;
}


/* WORKS
---------------------------- */
#works {
	background-image: linear-gradient(#6a5acd, #f7c6bd, #fff) ;
	min-height: 100vh;
}
.works-content {
	max-width: 560px;
	margin-top: 10%;
}
.works-content .page-title {
	text-align: center;
}
.works-content p {
	font-size: 1.125rem;
	text-align: center;
	margin: 10px 0 0;
}
.grid a {
	color: #000000;
}
.grid a:hover {
	color: #FFFFFF;
}
.grid {
	display: grid;
	grid-gap: 26px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-top: 6%;
	margin-bottom: 50px;
}
.item img {
	height: auto;
	width: 100%;
	object-fit: cover;
	border: 0.5px solid #000000;
}

/* BIO
-------------------------- */
#bio {
	background-image: linear-gradient(#92cd97, #f7c6bd, #fff) ;
	min-height: 100vh;
}
.bio-content {
	max-width: 560px;
	margin-top: 10%;
}
.bio-content .page-title {
	text-align: center;
}
.bio-content p {
	font-size: 1rem;
	text-align: center;
	margin: 10px 0 0;
}
.profile {
	width: 150px;
	border-radius: 50%;
	margin-top: 20px;
}
.grid {
	display: grid;
	grid-gap: 26px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-top: 6%;
	margin-bottom: 50px;
}
.grid-title {
	font-family: 'Megrim', sans-serif;
	font-size: 1.5rem;
	border-bottom: 2px #ddd dotted;
}


/* NOTES
-------------------------- */
#notes {
	background-image: linear-gradient(#0bd, #dccBdc, #fff) ;
	height: 270px;
	margin-bottom: 40px;
}
#notes .page-title {
	text-align: center;
}

.notes-contents {
	display: block;
	max-width: 600px;
	margin-bottom: 50px;		
}

article {
	width: 100%;
	margin-bottom: 50px;
}
.post-info {
	position: relative;
	padding-top: 4px;
	margin-bottom: 40px;
}
.post-date {
	background: #BFBFBF;
	border-radius: 10%;
	color: #fff;
	width: 80px;
	height: 80px;
	font-size: 1rem;
	text-align: center;
	position: absolute;
	top: 0;
	padding-top: 10px;
}
.post-date span {
	font-size: 1rem;
	border-top: 1px rgba(255,255,255,.5) dotted;
	padding-top: 1px;
	display: block;
	width: 60%;
	margin: 0 auto;
}
.post-title {
	font-family: 'Megrim', sans-serif, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif", sans-serif;
	font-size: 1.5rem;
	font-weight: normal;
}
.post-title,
.post-cat {
	margin-left: 100px;
}
article img {
	width: 100%;
	margin-bottom: 20px;
}
article p {
	margin-bottom: 1rem;
}


/* FOOTER
--------------------------- */
footer {
	background: #fff;
	text-align: center;
	padding: 26px 0;
	margin-top: 120px;
}
footer p {
	color: #000;
	font-size: 0.875rem;
}

/*　MOBILE
---------------------------------- */
@media (max-width: 600px) {
	.page-title {
		font-size: 2.5rem;
	}
	
	/* HEADER */
	.main-nav {
		font-size: 1rem;
		margin-top: 10px;
	}
	.main-nav li {
		margin: 0 20px;
	}
	
	.page-header {
		flex-direction: column;
		align-items: center;
	}
	
	/* HOME */
	.home-content {
		margin-top: 20%;		
	}	
	
	/* WORKS */
	.works-content {
		margin-top: 20%;
		width: 100%;
	}
	
	/* BIO */
	.bio-content {
		margin-top: 20%;
		width: 100%;
	}
}