@font-face {
    font-family: "CustomFont";
    src: url("https://yoursite.com/css/fonts/CustomFont.eot");
    src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
    url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
    url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
    }

:root{
    cursor: url('images/cute-octopus-cursor.png'),auto;
}

root * {
    box-sizing:border-box;
    -webkit-box-sizing: border-box;
}

body {
    background-image: linear-gradient(22deg,#FFBBC2, #E093FB, #9DE5D4);
    font-family:sans-serif;
    color: #2e0948;
    max-width:43rem;
    min-height:calc(100vh - 3rem); /* wrapper margin */
    margin:0 auto;
    text-align:center;
    font-family: 'Dosis', sans-serif;
    font-size:18px;

}

#wrapper{
    margin:3rem;
    padding:2rem;
    
    border:solid;
    border-width:1px;
    border-color:#fff;
    background-image:linear-gradient(22deg, #fffbb8,#FFBBC2, #E093FB);
}

a{

    color:#2e0948;
}
a:visited{
    color:#2e0948;
}
a:hover{
    color:#fff;
    cursor: url('images/cute-octopus-pointer.png'),auto;
}

#icon{
    border-radius:50%;
    width:10rem;
    margin-top:1rem;
    margin-right:1.5rem;
}

#title {
    width:19.5rem;
    margin:0 auto;
    max-width:100%;
}

#description {
    
    margin-bottom:2.5rem;
}

ul {
    list-style-type:none;
    padding:0;
    max-width:20rem;
    margin:0 auto;
    margin-bottom:2rem;
    margin-top:-1rem;
}

#links a{
    text-decoration:none;
    display:block;
    padding:1rem;
    margin:0.75rem;
    border-style:solid;
    border-width: 1px;
    border-color:#fff;
    color:#2e0948;
}

#links a:hover{
    color:#fff;
}