/* ==============main.css============== */
/* index.html의 css파일 */

@charset "UTF-8";
body {
    font-family : '맑은 고딕', '돋움', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    background-color: aliceblue;
    background-image: url('back.jpg');
    background-size: cover;
}

#head {
    height: 140px;
    padding: 0.2em 0em 0.2em 0em;
    margin: 1em 0em 0em 0em;
    border: 1px solid #ffffff;
    /* border-bottom: none; */
    background-color: rgba(77, 28, 115, 0.3);
}

h1 {
    text-align: center;
    vertical-align: middle;
    color: white;
    font-size: 84px;
    margin: 0;
    padding: 0;
}
  
#head a:hover { color: #6c60ab; }

h1 img {
    margin: 0;
    margin-bottom: 0.15em;
    vertical-align: middle;
    text-align: left;
    width: 130px;
    border-radius: 20%;
    padding: 0.1em;
    /* border: double rgba(255, 244, 254, 0.3) 2px; */
    /* background-color: rgba(61, 43, 74, 0.302); */
}

#link {
    text-align:left;
    margin-top: 0.5em;
    padding: 1.5em;
    padding-bottom: 0.5em;
    border: 1px solid #ffffff;
    /* border-top: none; */
    background-color: rgba(77, 28, 115, 0.3);
}

#link button {
    text-align: center;
    margin-right: 10px;
    width: 200px;
}

ul {
    text-align: left;
    list-style: none;
}

li {
    display: inline;
    padding-left: 1em;
    list-style-type: none;
}

.li1-enter {
    opacity: 0;
}

.li1-enter-active {
    transition: 1s;
}

li a:hover {
    color: #ffd447;
    text-shadow: hsla(0, 0%, 100%, 0.2) 3px 3px;
}

#menu {
    margin-top: 3em;
    background-color: hsla(0, 0%, 100%, 0.0);
    padding: 0.75em;
}

#menu a:hover { color: pink; }
  
a {
    color: white;
    text-decoration: none;
}

#wrapper a:hover {
    color: skyblue;
}

button {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 32px;
    font-weight: 600;
    color: white;
    border: 2px;
    background-color: rgba(77, 28, 115, 0.3);
    transition: background-color .2s
}

button:hover {
    background-color: rgba(77, 28, 115, 0.7);
}

button:active {
    background-color: rgba(77, 28, 115, 0.8);
}

button:disabled {
    opacity: .5;
    pointer-events: none;
}

#wrapper {
    padding: 0.75em;
}
  
h2 {
    font-size: 3em;
    color: white;
    text-shadow: 3px 3px 10px #4c556b;
}
  
p { color: #312d45; }

span {
    color: #3d2c91;
    font-weight: bold;
}

footer {
    color: white;
    background-color:hsla(0, 0%, 100%, 0.0);
}