/****** fonts ******/
@font-face{
    font-family:"Hug";
    src:url(https://dl.dropbox.com/s/lkx18y1mqiuxt63/Hug%20Me%20Tight%20-%20TTF.ttf);
}

@font-face {
    src:url(https://dl.dropbox.com/s/hfc6fjqu9kkxbt5/Sweet%20Creamy.ttf);
    font-family:"Creamy";
} 

/****** scrollbar ******/
::-webkit-scrollbar{
    display:none;
}

/****** select hightlight ******/
::selection{
    background:#83cae4;
    color:white;
}

::-moz-selection{
    background:#83cae4;
    color:white;
}

/****** body ******/
body{
    background-color:#cad58f;
    background-image:url();
    background-repeat:repeat;
    background-position:0 0;
    background-attachment:fixed;
    color:#57758c; /* default font color */
    font-family:"Creamy"; /* default font */
    font-size:15px; /* default font size */
    padding:10px;
}

/****** links ******/
a{
    text-decoration:none;
    color:#374d5e;
    transition:0.3s;
    text-shadow:-1px 0 #d9bbba, 0 1px #d9bbba, 1px 0 #d9bbba, 0 -1px #d9bbba;
}

a:hover{
    cursor:help;
    transition:0.3s;
    color:#ffe599;
    text-shadow:-1px 0 #7f6a68, 0 1px #7f6a68, 1px 0 #7f6a68, 0 -1px #7f6a68;
}

/****** wrappers ******/
#wrapper{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    animation:fadeEffect 1s;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

@keyframes fadeEffect{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/****** containers ******/
.container{
    width:500px;
    height:250px;
    border:5px solid #c56767;
    background-color:#ffe599;
    padding:10px;
    overflow:auto;
}

.inner{
    border:2px dotted #769ab5;
    background-color:white;
}

.icon{
    border:5px solid #769ab5;
    margin-right:50px;
    padding:10px;
    background-color:#c56767;
}

.icon img{
    width:250px;
    height:auto;
    display:block;
}

.links{
    display:flex;
    flex-direction:column;
    width:120px;
}

.links a{
    border:5px solid #769ab5;
    background-color:#ffe599;
    border-left:none;
    margin:0px 0;
    padding:10px;
    width:100px;
    transition:all .3s ease-in-out;
    text-align:center;
}

.one:hover, .two:hover, .three:hover, .four:hover, .five:hover{
    width:120px;
    transition:all .3s ease-in-out;
}

.title{
    font-size:50px;
    position:absolute;
    color:#769ab5;
    margin-top:-70px; /* change this if the title is too low */
    text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}