/* Fonts */

.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.space-mono-bold {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.space-mono-regular-italic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.space-mono-bold-italic {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: italic;
}


.jost-uniquifier {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Body & All Content */

body {
    background-color: rgb(27, 27, 27);
}

.content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Float in Animation */

@keyframes FloatIn {
  0% {
    transform: translateY(5%);
    opacity: 0%;
  }
  100% {
    transform: translateY(0);
    opacity: 100%;
  }
}

.main {  
  animation: 0.5s ease-out 0s 1 FloatIn;
  
  padding: 30px;
}

.blogbox {
  animation: 0.5s ease-out 0s 1 FloatIn;
  
  padding: 30px;
}

/* Top Bar (Links & Header) */

.top h2 {
    font-family: "Jost";
    color: aliceblue;
    display: inline;
}

.top h3 {
    font-family: "Jost";
    color: aliceblue;
    display: inline;
}


#toplink {
    text-decoration: none;
    font-family: "Jost";
    color: aliceblue;
    display: inline;
    padding-left: 1vw;
    float: right;
}

#toplink:hover{
    text-decoration-color: rgb(27, 27, 27);
    text-decoration: underline;
}

#istlink {
    text-decoration: none;
    font-family: "Jost";
    color: aliceblue;
    display: inline;
    float: left;
}

#istlink:hover{
    text-decoration-color: rgb(27, 27, 27);
    text-decoration: underline;
}

#linktree {
    border-radius: 100%;
    display: inline;
    width: 2em;
    height: 2em;
    float: right;
}

/* Full Stops */

#period {
    color: rgb(51, 87, 182);
}

#period-h2 {
    color: rgb(51, 87, 182);
    display: inline;
}

#period-h1 {
    color: rgb(51, 87, 182);
    display: inline;
}

/* Main Contect */

.main {
    padding-top: 5vw;
    color: aliceblue;
    font-family: "Jost";
}

.main a {
    color: aliceblue;
    text-decoration: none;
}

.main a:hover {
    text-decoration: underline;
}

.main p {
    font-size: 18px;
}

/* Blog Link Box */

.blogbox img {
  max-width: 35%;
  max-height: 35%;
  border-radius: 15px;
  display: block;
  float: left;
  margin-right: 2vw;
  box-shadow: 4px 4px 10px rgb(0, 0, 0);
}

.blogbox {
  background-color: rgb(49, 49, 49);
  padding: 1vw;
  color: aliceblue;
  font-family: "Jost";
  border-radius: 15px;
  box-shadow: inset 0 0 10px rgb(27, 27, 27);
  height: 100%;
  margin-bottom: 2vw;
  display: block;
  text-decoration: none;
}

.blogbox h1 {
  display: table-cell;
  vertical-align: top;
}

.blogbox:hover {
  background-color: rgb(65, 65, 65);
  border-radius: 15px;
  box-shadow: inset 0 0 10px #656565;
}

/* Blog Styling */

.postinfo {
  color: rgb(66, 66, 66);
  font-style: italic;
}

.blogtopimage {
  max-width: 100%;
  border-radius: 15px;
  box-shadow: 4px 4px 10px rgb(0, 0, 0);
}

.blogimagesmall {
  max-width: 50%;
  border-radius: 15px;
  margin: auto;
  display: block;
  box-shadow: 4px 4px 10px rgb(0, 0, 0);
}

/* Bottom Bar */

.bottom {
  font-family: "Jost";
  overflow: hidden;
  bottom: 0;
  width: 100%;
  background-color: #181818;
  padding: 0;
  margin: 0;
}

.long {
  font-family: "Jost";
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #181818;
  padding: 0;
  margin: 0;
}

#bottombar {
  padding-left: 1vw;
  width: 100%;
}