@font-face {
    font-family: rubikGlitch;
    src: url(fonts/Rubik_Glitch/RubikGlitch-Regular.ttf);
}
@font-face {
    font-family: pixelify;
    src: url(fonts/Pixelify_Sans/PixelifySans-VariableFont_wght.ttf);
}

@font-face {
    font-family: playfairDisplay;
    src: url(fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf);
}

:root {
    overscroll-behavior: none; /* keeps from bounce I hate */
}

body{
    background-color: rgb(22, 21, 37);  /* sets background color */
    margin: 0px;
}

header{
    padding: 20px 10px;
    margin:0px;
    align-items: center;
    background-image: url(home/images/nebula1.gif);
}

header h1{
    font-family: 'Courier New', Courier, monospace;
    color:#ddd;
    text-align: center;
}

/* nav */
.topnav{
    background-color: rgb(34, 34, 47);
    overflow:auto;
    white-space: nowrap;
    display:flex;
    justify-content: center;

}

.topnav a {
  float: left;
  color: white;
  text-align: center;
  font-family:pixelify;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  overflow:auto;
  white-space:nowrap;
  
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  font-family: rubikGlitch;
  color: darkslateblue;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: rgb(97, 107, 210);
  color: darkslateblue;
}

.sidenav{
    height:100%;
    z-index: 1;
    top:0;
    left:0;

    background-color:rgb(34, 34, 47);
    overflow-x: hidden;
    white-space:nowrap;
}

.sidenav a{
    padding: 8px;
    text-decoration: none;
    display:block;

}


/* footer */

footer{
    background-color: rgb(34, 34, 47);
    color:white;
    margin: 0px;
    padding:20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    text-decoration: none;
    position: relative;

}

footer a{
    text-decoration:none;
    color:white;
}

footer a:hover{
    color:darkslateblue;
}


/* main */
main{
    background-size:cover;
    background-color: rgb(15, 15, 32);
    display:block;
    flex-direction:column;
    min-height:100vh;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:white;
    margin: 0px;
}

/* landing page elements*/
#lander{
    background-color: rgb(15, 10, 27);
    padding:50px;
    margin:20% 10%;

    text-align: center;
    color:white;
    text-decoration:none;

    outline:white 2px solid;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#lander a{
    text-decoration:none;
    color:white;
}

#lander a:hover{
    color:blue;
}

/* buttons */

#backButton{
    font-family:pixelify;
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

#backButton a{
    text-decoration:none;
    color:white;
}

#backButton a:hover{
    color:slateblue;
}

/* header box */

#headerBoxBorder{
    padding:5px;
    flex:auto;
    text-align: center;
    border-color: aliceblue;
    border-style:groove;
} 

#headerBox{
    padding:5px;
    flex:auto;
    text-align: center;

    background-color: rgba(34, 34, 47, 0.512);


}

#sideImage{
    padding:5px;
}

#blogEntryImg{
    float:left;
    padding-right:10px;
    vertical-align: middle;
}

#mainBodyText{
    margin-top: 2px;
    padding: 10px 15%;
    overflow-y: auto;

}

#bodyText{
    padding: 0px;
}

#bodyText p{
    margin-top:0px;
}

#bodyText h3{
    margin-bottom:0px;
}

#blogEntry{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 0px;
}

#blogEntry a{
    text-decoration:none;
    color:white;
    padding:0px 5px;;
}

#blogEntry a:hover{
    color:slateblue;
}

#blogText {
    text-indent: 5%;
}

#blogImg img{
     display: block;
     margin: auto;
     width:50%;
}



/* I'm not sure if i've used these? */
#columnBox{
    height:inherit;
    margin-right:20px;
    padding: 0px; 
}



#entryItem{
    background-color: blueviolet;
    padding:10px;
    justify-content: left;
}

#entryImageSingle{
    float: left;
    margin: 10px;
}

#entryText{
    float:left;
}



/* ul lists */

ul.likes{
    list-style:none;
}

ul.likes li::before{
    content:"♡ ";
}

ul.dislikes{
    list-style:none;
}

ul.dislikes li::before{
    content:"✗ ";
}