/* Roboto Normal */
@font-face {
    font-family: Roboto;
    src: url(fonts/Roboto-Black.ttf);
    font-weight: normal;
    font-style: normal;
}

/* Roboto Italic */
@font-face {
    font-family: Roboto;
    src: url(fonts/Roboto-BlackItalic.ttf);
    font-weight: normal;
    font-style: italic;
}

/* Source Code Pro Normal */
@font-face {
    font-family: "Source Code Pro";
    src: url(fonts/SourceCodePro-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

/* Source Code Pro Italic */
@font-face {
    font-family: "Source Code Pro";
    src: url(fonts/SourceCodePro-Italic.ttf);
    font-weight: normal;
    font-style: italic;
}

/* Source Code Pro Bold */
@font-face {
    font-family: "Source Code Pro";
    src: url(fonts/SourceCodePro-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}

/* Source Code Pro Bold Italic */
@font-face {
    font-family: "Source Code Pro";
    src: url(fonts/SourceCodePro-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}

html {
    margin: 0;
    min-height:100%;
    background-repeat: no-repeat;
    background-color: rgb(29, 33, 71); /* For browsers that do not support gradients */
    background-image: radial-gradient(farthest-corner at 50% 100%, rgb(0, 0, 82), rgb(3, 0, 19));
    font-family:"Source Code Pro";
}

body {
    
    min-height: 100%;
}

#header {
    font-size: x-large;
    text-align: center;
    padding: 10px;
}

#blogheader {
    font-size: x-large;
    text-align: left;
    padding: 0px 0px 20px 0px;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}


#date {
    font-size: medium;
    color: rgb(255, 255, 255);
    text-align: left;
}

#main {
    border: 1px solid;
    background-color: rgba(0, 0, 0, 0.205);
    color: rgb(255, 255, 255);
    padding: 0px 20px;
    width: 80%;
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    text-align: left;
}

#footer {
    color: rgb(140, 140, 140);
    text-align:center;
}

h1 {
    color: rgb(255, 255, 255);
}

p {
    color: rgb(176, 233, 255);
}

a:link {
    color: rgb(0, 158, 92);
}

a:visited {
    color: rgb(28, 109, 59);
}

a:hover {
    color: rgb(25, 209, 163);
}

img {
    max-width: 100%;
    height: auto;
    padding: 20px;
}

#centered_image {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}