*{
 margin : 0;
 padding: 0px;
 box-sizing: border-box;
}


body {
    font-family: SF pro Rounded,sans-serif,pretendard;
    font-size: 14pt;
    line-height: 135%;
    word-break: keep-all;
    padding-top: 30px;
    overflow: hidden;
}


h1 {
  position: relative;
	font-size: 25pt;
	line-height: 135%;
	word-break: keep-all;
	font-weight: normal;
	padding-left: 30px;
	z-index: 10;
}

	.diary {
		padding-left: 40px;
		padding-right: 40px;
		position: absolute;
		width: 50%;
		height: 100%;
		/*background-color: #ededed;*/
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 1;
		overflow: hidden;
	}

	.kr {
		padding-left: 40px;
		padding-right: 20px;
		position: absolute;
		width: 50%;
		height: 100%;
		left: 50%;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 2;
		overflow: hidden;
	}

	.content {
		height: 120%;
	}


	.subtitle {
		position: fixed;
		font-weight: bold;
	}

p {
	padding: 30px;
}


li {
	margin-left: 35px;
	padding-top: 15px;
}

a {
	color: black;
	text-decoration: none;

}

a:hover {
	text-decoration: underline;
}


.happig:hover {
	color: #1277fc;
}

.movies:hover{
	transform: rotate(-4deg);
	color: greenyellow;
}

.answering-machine:hover{
	animation: fadeIn 2s infinite;
}
      @Keyframes fadeIn {

        10% { opacity: 0;}
        100% { opacity: 1;}
}




footer {
	font-size: 15px;
	position: absolute;
	bottom: 15px;
	width:100%;
	z-index: 10;
	padding-left: 30px;
}



@media only screen and (max-width: 800px) {
  
  body {
    font-size: 15px
    }

	.diary {
		padding-top: 10px;
		padding-left: 30px;
		padding-right: 50px;
		position: absolute;
		width: 100%;
		height: 50%;
		/*top: 5%;*/
		background-color: #ededed;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	.kr{
		padding-top: 10px;
		padding-left: 30px;
		padding-right: 50px;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0%;
		top: 50%;
    background-color: white;
		overflow-y: hidden;
		overflow-x: hidden;
		z-index: 9;
	}	


   footer {
   	font-size: 10px;
   }

}