body{
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("picture.jpg");
    background-position: center;
    background-color: black;

    color: white;
}

body{
    font-size: 6vw;    
}

.leftText{
    
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0.6em;
    margin-left: 1.1em;
    display: block;
}

.love{
    font-size: 0.8em;
    color:indianred;
    font-weight: bold;
}

small{
    font-size: 0.7em;
}

.heart{
    color:indianred;
    font-size: 1em;
    text-align: right;

    position: absolute;

    font-weight: bold;

    right: 1em;
    bottom: 1em; 
}

.github{
    color: darkgray;
    font-size: 0.3em;
    text-align: right;
    position: absolute;
    right: 0.3em;
    bottom: 0.3em;
}

.since{
    font-size: 0.7em;
}

.days{
    font-size: 0.7em;
}

.love, .since, .days{
    letter-spacing: 0.1em;
}

.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 31px;
    border: 0px solid #00cc00;
    border-radius: 100px;
    background: #00ff00;
    background: -webkit-gradient(linear, left top, left bottom, from(#00ff00), to(#00cc00));
    background: -moz-linear-gradient(top, #00ff00, #00cc00);
    background: linear-gradient(to bottom, #00ff00, #00cc00);
    font: normal normal bold 20px times new roman;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    border: 0px solid #00ff00;
    background: #00ff00;
    background: -webkit-gradient(linear, left top, left bottom, from(#00ff00), to(#00f500));
    background: -moz-linear-gradient(top, #00ff00, #00f500);
    background: linear-gradient(to bottom, #00ff00, #00f500);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #00cc00;
    background: -webkit-gradient(linear, left top, left bottom, from(#00cc00), to(#00cc00));
    background: -moz-linear-gradient(top, #00cc00, #00cc00);
    background: linear-gradient(to bottom, #00cc00, #00cc00);
}
.button:after{
    content:  "\0000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 -4px -6px 4px;
    position: relative;
    top: 1px;
    left: 0px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADZ0lEQVRIibWVX2hbVRzHPydJc0uoLm1hjGGtK/tzo7BcoebKYJ1hL9GyBcUqbGxOUdj2IIqI1Je8CcUHH8Q/oGjtyHQ4KA5E34atDG7RehN1vZRSpw+yByl2xpDc3tzjQ8/tkptkE5xfCId7vr/f9/s7P/I7B/5niPCGkzbjCA4A9wMeUAb5nW4veC1xRiYGYhTYD8SAq0iu6CXL7WrgGOZR4C1gJORbBs7otnVFxR0A3lPizVgFXtZt61KbgWOYzwEfAJEup60BecXPAr1d4nzgBd22PtoycAxzN1ACEl2SAlTU2nebuCqQ1m1rJaj2TBfxKvCTqj4QDsRrwFUVE0ZCaW61Y6xD0Jx79qXDtekL73gTx7KA3cQtek8dy9amL7y9cfrFw8C3HfLHmg2SYdbflypU92dmi8WVKW88X5TJ/kLAyf6BgvdY/tNicWXqb+PhWX/PvkI4P9AMDP4Is41R09O06PZcbigO3OMPDQf9xx/eVQV25nJDcU2Lbm88OOqG8wPNwKAcZnvOfzImBIXBQW0ZKV+J/mgfCbio/f0RpHx1cFBbFlDo+fz8Ix0MynDzX3QU+CJghBZ1I9s0pNuY8f+s/wBkgSeaCvKBi8B8JKmlRTx60l+vI+uNeJNBXretSwJgyTDjApaAkcT4SGXb2XRc9MbicsP3Kp851b+mf767Q4Xc9ewDN/qe1hOiJxKTNc9df7fkVr9c7QNWJaRStuVGAFK25QKToXxfrc2Dd0P9NiHbYgNMKs2bk/xLOk1d9H4MnFItivkV15NVLzj2G7+eePIywPC5i1ngdQCRiLmRvnjMX697qkUzmqw9s6tUosUAwElnehFiFsiFKrJXT598U0aj5wBEo3F85P2ZSdrvoq+R8nG9tBAMZuu9o5cWahI5AcyFEstEoyt7GuLg7oY4KCORa7QOHsCcRE40i7cZAKTshQqbl9pis/eoS7JfivkBKeYf2hBJNq/zAItAXuW2oO09COCkMzsQ4jKgAz5CvDbw/KllgLUPp/ci5ZQq0EHKrF5auN5Jp6sBwJJh3ivgG+A+tfW7Wneq9ZqEQynb+q2bxi0NABzD3MumyY4QdR04pNvW8q3yuz0uW1AC48Ba0/YaMH47cfgXJwignsmv1OejwfN5R+EYZsYxzMwdF/4v+Ac4rTIgPkak5AAAAABJRU5ErkJggg==") no-repeat left center transparent;
    background-size: 100% 100%;
}

.button2 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 31px;
    border: 0px solid #000000;
    border-radius: 100px;
    background: #ff0000;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#eb0000));
    background: -moz-linear-gradient(top, #ff0000, #eb0000);
    background: linear-gradient(to bottom, #ff0000, #eb0000);
    font: normal normal bold 20px tahoma;
    color: #ffffff;
    text-decoration: none;
}
.button2:hover,
.button2:focus {
    background: #ff0000;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ff0000));
    background: -moz-linear-gradient(top, #ff0000, #ff0000);
    background: linear-gradient(to bottom, #ff0000, #ff0000);
    color: #ffffff;
    text-decoration: none;
}
.button2:active {
    background: #990000;
    background: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#eb0000));
    background: -moz-linear-gradient(top, #990000, #eb0000);
    background: linear-gradient(to bottom, #990000, #eb0000);
}
.button2:after{
    content:  "\0000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 -4px -6px 4px;
    position: relative;
    top: 1px;
    left: 0px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB6klEQVRIicXUPWgUURQF4M9xWcIiKEFEUoiIVdDYWIhYiYWNoo1YpbLQSuxCerGwEhGRsIjIIiJBgkgUbbQLEhCRFP4QJEQQq4BYaESLd8dMdmdmoxg8MMzcx7nn3PvefcM6Y2PF+gAG8RPf+2i0sBnL+NHP8CAe4DPm4/0MJyr4F4PzAZ8whQNV4mN4i1PRATRwBDNoo1ngb8ei1GneyenQGOsWH8VsgdyNFhYwUli7jEsl3K2hNVpMnsdwhTjswPvoKBdZxLYK/nBotjJpC15hrsbgKJ5KBwnno7AJq7ctxxxe43CGPXhRIw7H8BX7I+7gOV7iW0XODEYyZIXKqvBRmqRDEX8Jsys1OcvIMrzB3j4G56QOHkV8AVswHe8y7Attg9KEDNUY7JLGLx/fndIhHq/gD4Xm76kcx0MrU9KNs9KNXoq4jasV3EZojXcvdnBX+VTknCXpMs1a6aaIJu7E01NsMww6FSa5wYLyO9OM3Hs1RWoGoSNNV5nBmZK8DLcxWSdeNJnELavbbEgXqxuN4N5fi3jRZAo3CyYZNpWIt4Nbdia1GJB+3W2925UbTgTnj8W7TSb0btcNaRz/WrxoMo3rUtUZrsVaX/ENazRpSYf4LuLdOCn9Pv4ZWniMJ/G9LmjpnaT/i1/X6V7fdhzBDQAAAABJRU5ErkJggg==") no-repeat left center transparent;
    background-size: 100% 100%;
}