* { 
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

h1 { margin: 0;}

body {
    display: flex;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #1B2735;
    background: radial-gradient(ellipse at bottom, #1f344c 0%,#0f1018 100%);
    background: -moz-radial-gradient(ellipse at bottom, #1f344c 0%,#0f1018 100%);
    background: -webkit-radial-gradient(#1f344c, #0f1018)
}

#title {
    /* position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    color: #FFFFFF;
    text-align: center; */
    font-family: Lato;
    font-weight: 300;
    font-size: 50px;
    letter-spacing: 10px;
    margin-top: -60px;
    padding-left: 10px;
}

#wrapper {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    color: #FFFFFF;
    text-align: center;
}

#title span {
    background: -webkit-linear-gradient(white, #38495A);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#description {
    font-family: Lato;
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 30px;
    padding-left: 10px;
}


/* button class="button" */
/* https://codepen.io/alphardex/pen/vYEYGzp */
.button {

    --border-width: 3px;

    position: relative;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 100px;
    font-family: Lato, sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    color: white;
    background: #222;
    border-color: white;
    border-style: solid;
    border-radius: var(--border-width);
}

#blog {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    background:rgba(255,255,255,0);
    border: white;
    border-radius: 5px;
    color: white;
    padding: 20px;
}

#post {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    background:#222;
    color: white;
    border: white;
    border-radius: 5px;

    min-height: 200px;
    height: auto;
}

.blog-title{
    font-size: 30;
}

.blog-desc{
    font-size: 18;
}

.blog-date{
    font-size: 12;
}

.blog-link{
    text-decoration: none;
    cursor: pointer;
    color: crimson;
}

.blog-link:hover{
    color: hotpink;
}

a:link {
    text-decoration: none!important;
}

.blog-img{
    border-radius: 5px 0px 0px 5px;
    width: 200px;
    height: 200px;
    float: left;
    margin-right: 20px;
}

#blogSpace {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    color: #FFFFFF;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    background:#222;
    border: white;
    border-radius: 5px;
    color: white;
    padding: 20px;
}

#blogContent {
    background: #d4d4d4;
    border: white;
    border-radius: 5px;
    color: black;
    padding: 20px
}

/* What I believe this does, is create a new background with the rainbow transition,
    and shrinks the og background */
.button:hover::after{
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
50% {
    background-position: 100% 50%;
}
}

/* Find wawy to bump icon down */
.button_icon {
    margin: 0 8px;
}