@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

@keyframes slide{from{margin-left: 100%;} to{margin-left: 0%;}}
p1{animation-name: slide; animation-duration: 3s; animation-iteration-count: 1;}
a{color : black; text-decoration:  none;}
a:hover{color : rgb(255, 153, 0); text-decoration : underline;}
h2{color : black; font-size : 1.5em; text-indent : 1em}
tr{font-size : 1.5em; text-indent : 1em}

body {background-color: #7da679; color: #2f2f2f; font-family: 'Noto Sans KR', sans-serif; font-size: 16px;}
section{font-family:"휴먼편지체"; background-color: rgb(94, 129, 100); border-radius: 10px; padding: 40px; margin-bottom: 10px;}
.wrapper{width: 85%; margin: 20px auto;}
h1{display: none;}
h2, h3{font-family: sans-serif;}
h2{margin: 0 0 20px 0; text-transform: uppercase; font-size: 18px;}
#my_info h2{display: none;}
#my_info img{width: 100px; height: auto; border-radius: 50px; margin-right: 40px;} 
table{display: inline-block; border-collapse: collapse; border-spacing: 0; vertical-align: top;}
th{text-align: left; padding-right: 20px;}
th, td{font-size: 12px;}
#myname th{display: none;}
#myname td{display: block; font-size: 18px; font-weight: bold; margin-bottom: 10px;}
ul{list-style: none; padding: 0;}
ul li{margin-bottom: 4px;}
ul li::before{display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: 10px;}
ul li:nth-child(1)::before{content: url('../images/ico_mobile.png');}
ul li:nth-child(2)::before{content: url('../images/ico_email.png');}
ul li:nth-child(3)::before {content: url('../images/ico_facebook.png');}
ul li:nth-child(4)::before {content: url('../images/ico_blog.png');}
#skill ol{list-style: none; padding: 0;}
#skill li{display: inline-block; background-color: rgb(255, 153, 0); padding: 4px 10px; border-radius: 32px; margin: 0 8px 8px 0;}
#skill li::before{content: "#";}
#project ol{list-style: none; padding: 0;}
#project li {border-bottom: 1px solid #ddd; padding-bottom: 20px;}
#project li:last-child{border-bottom: none;}
#project video {width: 100%;}
#contact a {color: black; display: inline-block; border-radius: 4px; padding: 2px 8px 2px 0;}
#contact a:hover{background-color: #2f2f2f; color: rgb(255, 153, 0); text-decoration: none; padding: 2px 8px; transition: padding 0.2s;}