/****** 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:#ffebeb;
background-image:url();
background-repeat:repeat;
background-position:0 0;
background-attachment:fixed;
color:#7f6a68; /* default font color */
font-family:"Creamy"; /* default font */
font-size:20px; /* default font size */
padding:10px;
}
/****** links ******/
a{
text-decoration:none;
color:#7f6a68;
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:#d9bbba;
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:500px;
border:5px solid #af8a94;
background-color:#d9bbba;
padding:10px;
overflow:auto;
}
.inner{
border:2px dotted #af8a94;
background-color:white;
}
.icon{
border:5px solid #af8a94;
margin-right:50px;
padding:10px;
background-color:#d9bbba;
}
.icon img{
width:250px;
height:auto;
display:block;
}
.links{
display:flex;
flex-direction:column;
width:120px;
}
.links a{
border:5px solid #af8a94;
background-color:#d9bbba;
border-left:none;
margin:20px 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:70px;
position:absolute;
color:#7f6a68;
margin-top:-75px; /* change this if the title is too low */
text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}