/*폰트어썸 5.10.2 CDN*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css');

/*SUIT 웹폰트 CDN*/
@import url('http://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css');

/*  */
*{
    /* font-family:"SUIT", sans-serif; */
    font-family:  "YUniverse-B";
    font-size: 16px;
} 
@font-face {
    font-family:  "YUniverse-B";
    src: url("../font/YUniverse-B.ttf");
}
body{
    height: 100vh;
    background: linear-gradient(to bottom, #3676B6, #F5B7BA);
    color: #444;
}
h5{
    font-family:  "YUniverse-B";
    transform : rotate(0.04deg); 
    font-size: 1em;
}
h4{
    color: #3676b6;
    font-family:  "YUniverse-B";
    font-size: 30px;
    margin-bottom: 15px;
    transform : rotate(0.04deg); 
}
#main{
    background-color: #ffffff95;
    box-shadow: 5px 5px 10px #3676B670;
    width: 80%;
    text-align: center;
    border-radius: 10px;
}
img{
    margin: 10px 0;
}
span{
    position: fixed;
    bottom: 0;
    left: 0;
    color: #ffffff90;
    font-size: 0.5em;
}
p{
    font-family:  "YUniverse-B";
    font-size: 0.8em;
    transform : rotate(0.04deg); 
    font-style: italic;
}
@keyframes fadeIn{
    from{ opacity: 0;}
    to{opacity: 1;}
}
@keyframes fadeOut{
    from{ opacity: 1;}
    to{opacity: 0;}
}
@-webkit-keyframes fadeIn{
    from{ opacity: 0;}
    to{opacity: 1;}
}
@-webkit-keyframes fadeOut{
    from{ opacity: 1;}
    to{opacity: 0;}
}
.fadeIn{
    animation:  fadeIn;
    animation-duration: 0.5s;
}
.fadeOut{
    animation:  fadeOut;
    animation-duration: 0.5s;
}