html{
font-size:100%
}

body{
cursor: url('../image/cursor.png'), auto;
}

/* ==== 폰트 ==== */

@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ==== 배경 ==== */


@keyframes animatedbg{
0%{background-position:0;}
100%{background-position:40000px;}
}


/* ==== p, 링크 ==== */

p{
font-weight:700;
font-size:1.5em;
font-style:italic; 
margin:20px;
}

a{
color:#ffab98;
text-decoration-line: none;
display: inline-block;
transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
will-change: transform;
}
a:hover{
color:#ffc1b6;
transform: translateY(-4px);
cursor: url('../image/cursor.png'), auto;
}

button {
transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
will-change: transform;
}

button:hover {
transform: translateY(-4px);
cursor: url('../image/cursor.png'), auto;
}

/* ==== 페이지 요소 ==== */

#headerobj{
background:#fff1e9; 
color: transparent; 
-webkit-background-clip: text; 
font-size:50px; 
font-weight:900; 
font-family:georgia;
margin:10px;
}

#wrapper{
margin:0 auto;
margin-top:30px;
margin-bottom: 50px;
width:1020px;
}

/* ==== 메뉴 ==== */

#menuline{
margin:0 auto;
text-align:center;
align-content:center;
justify-content:center;
background: linear-gradient(#f68499 0%, #ffab98 100%);
width:1050px;
height:45px;
padding:5px;
border-radius:50px;
margin-top:-25px;
margin-bottom:10px;
}

.menu{
font-size:0.9em;
height:40px;
align-content:center;
justify-content: center;
text-align:center;
margin:2px 5px 0px 5px;
}

.menubtn{
width:70px;
display: inline-block;
font-weight:900;
text-align:center;
background-color:#fff;
padding:5px 20px;
border:5px double #ffab98;
}

.menubtn:hover{
color:#ffab98;
background-color:#fff1e9;
}


/* ==== 프로필 전용 그리드 ====*/

#profile{
display:grid;
grid-template-columns:7fr 8fr;
grid-template-rows: repeat(1, minmax(600px, auto));
column-gap:10px;
}

#profile img{
max-width:100%;
}

.namae {
grid-area:a;
text-align:left;
font-weight:900;
font-size:1.4em;
text-transform:uppercase;
}

.catchprize {
grid-area:b;
text-align:right;
font-size:1.4em;
font-weight:400;
text-transform:capitalize;
}

/* ==== 제목, 테두리, 여러가지 글자 등 ==== */


li{
margin-left:0;
list-style-type: none;
text-align:left;
}

em{
background:#ccc;
font-weight:700
}

input,textarea{
background:#fff;
border:1px solid #DD3554;
color:#ffa5b1;
margin:3px 0;
width:200px
}

textarea{
height:50px
}

.textbox{
border:1px solid #DD3554;
border-radius:3px;
text-align:center
}

.marker{
background-color:#DD3554;
color:#fff;
padding:2px;
}

table.incontent {
border-color:#dd3554; 
border:3px solid; 
border-collapse:collapse;
font-size:0.9em;
text-align: center;
margin:20px;
}

th.incontent {
border:3px solid #dd3554;
padding:10px;
background-color:#f68499;
color:#fff;
font-weight:700;
}

td.incontent {
border:3px solid #dd3554;
padding:10px;
}

tr.incontent {
border:3px solid #dd3554;
padding:10px;
}

.tooltip-love {
position: relative;
display: inline-block;
}

.tooltip-love .tooltip-content {
visibility: hidden;
width: 120px;
background-color: #ff91c4;
padding: 5px;
color: white;
text-align: center;
position: absolute;
border-radius: 8px;
z-index: 1;
bottom: 110%;
left: 40%;
margin-left: -55px;
}

.tooltip-love:hover .tooltip-content { visibility: visible; }

.tooltip-friend {
position: relative;
display: inline-block;
}

.tooltip-friend .tooltip-content {
visibility: hidden;
width: 120px;
background-color: #ff7700;
padding: 5px;
color: white;
text-align: center;
position: absolute;
border-radius: 8px;
z-index: 1;
bottom: 110%;
left: 40%;
margin-left: -55px;
}

.tooltip-friend:hover .tooltip-content { visibility: visible; }

.tooltip-trust {
position: relative;
display: inline-block;
}

.tooltip-trust .tooltip-content {
visibility: hidden;
width: 120px;
background-color: #1cba53;
padding: 5px;
color: white;
text-align: center;
position: absolute;
border-radius: 8px;
z-index: 1;
bottom: 110%;
left: 40%;
margin-left: -55px;
}

.tooltip-trust:hover .tooltip-content { visibility: visible; }

.tooltip-admire {
position: relative;
display: inline-block;
}

.tooltip-admire .tooltip-content {
visibility: hidden;
width: 120px;
background-color: #7b2cdb;
padding: 5px;
color: white;
text-align: center;
position: absolute;
border-radius: 8px;
z-index: 1;
bottom: 110%;
left: 40%;
margin-left: -55px;
}

.tooltip-admire:hover .tooltip-content { visibility: visible; }

.tooltip-family {
position: relative;
display: inline-block;
}

.tooltip-family .tooltip-content {
visibility: hidden;
width: 120px;
background-color: #dedbc8;
padding: 5px;
color: #333333;
text-align: center;
position: absolute;
border-radius: 8px;
z-index: 1;
bottom: 110%;
left: 40%;
margin-left: -55px;
}

.tooltip-family:hover .tooltip-content { visibility: visible; }

.tooltip-rival {
position: relative;
display: inline-block;
}

.tooltip-rival .tooltip-content {
visibility: hidden;
width: 120px;
background-color: #e6200e;
padding: 5px;
color: white;
text-align: center;
position: absolute;
border-radius: 8px;
z-index: 1;
bottom: 110%;
left: 40%;
margin-left: -55px;
}

.tooltip-rival:hover .tooltip-content { visibility: visible; }

.tooltip-awkward {
position: relative;
display: inline-block;
}

.tooltip-awkward .tooltip-content {
visibility: hidden;
width: 120px;
background-color: #2c449c;
padding: 5px;
color: white;
text-align: center;
position: absolute;
border-radius: 8px;
z-index: 1;
bottom: 110%;
left: 40%;
margin-left: -55px;
}

.tooltip-awkward:hover .tooltip-content { visibility: visible; }

.tooltip-hate {
position: relative;
display: inline-block;
}

.tooltip-hate .tooltip-content {
visibility: hidden;
width: 120px;
background-color: #404040;
padding: 5px;
color: white;
text-align: center;
position: absolute;
border-radius: 8px;
z-index: 1;
bottom: 110%;
left: 40%;
margin-left: -55px;
}

.tooltip-hate:hover .tooltip-content { visibility: visible; }


/* 캐릭터 페이드인 애니메이션 */

@keyframes fadeslide { 
  from {
    opacity: 0;
    transform: translateX(-15px); 
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeslide {
  animation: fadeslide 0.9s ease-in-out forwards;
}

/* dt&dd 페이드인 애니메이션 */

@keyframes fadeIn { 
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-list dt { 
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.5s ease forwards;
}

.fade-list dt:nth-of-type(1) { animation-delay: 0.1s; }
.fade-list dt:nth-of-type(2) { animation-delay: 0.2s; }
.fade-list dt:nth-of-type(3) { animation-delay: 0.3s; }
.fade-list dt:nth-of-type(4) { animation-delay: 0.4s; }
.fade-list dt:nth-of-type(5) { animation-delay: 0.5s; }
.fade-list dt:nth-of-type(6) { animation-delay: 0.6s; }
.fade-list dt:nth-of-type(7) { animation-delay: 0.7s; }
.fade-list dt:nth-of-type(8) { animation-delay: 0.8s; }
.fade-list dt:nth-of-type(9) { animation-delay: 0.9s; }

.fade-list dd { 
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.5s ease forwards;
}

.fade-list dd:nth-of-type(1) { animation-delay: 0.1s; }
.fade-list dd:nth-of-type(2) { animation-delay: 0.2s; }
.fade-list dd:nth-of-type(3) { animation-delay: 0.3s; }
.fade-list dd:nth-of-type(4) { animation-delay: 0.4s; }
.fade-list dd:nth-of-type(5) { animation-delay: 0.5s; }
.fade-list dd:nth-of-type(6) { animation-delay: 0.6s; }
.fade-list dd:nth-of-type(7) { animation-delay: 0.7s; }
.fade-list dd:nth-of-type(8) { animation-delay: 0.8s; }
.fade-list dd:nth-of-type(9) { animation-delay: 0.9s; }