/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  box-sizing: border-box;
  }

body {
  margin: 0;
  background-color: black;
  color: white;
  font-family: Verdana;
  background-image: url("https://plinkybits.neocities.org/images/dirt_bg.png");
  background-repeat: repeat;
}

header{
  background-color: green;
  text-align: center;
  color: black;
  padding: 5px;
  margin:0;
  width: 100%;
  }
  
footer{
  margin:0;
  background-color: green;
  color: black;
  text-align: center;
  padding: 0px;
  position: relative;
  }
  
.imgframe {
  padding: 3px;
  border: 2px solid;
  border-color: green;
  }

/*ALIGNS IMAGES TO THE CENTER*/
.imgcenter {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  width: 30%;
  }

/*ALIGNS TEXT TO THE CENTER*/
.txtcenter{
  text-align: center;
  }
  
  
/*REMOVES DOTS FROM LISTS*/  
.nodot ul{
  list-style:none;
  padding-inline-start:0;
  }

/*PUTS IN BLACK BOX WITH THIN PINK BORDER*/ 
.boxed1 {
  background-color: black;
  color: white;
  padding: 5px;
  border: 2px solid green;
  margin: 1%
  }
  
  
/*UNFINISHED! WILL EVENTUALLY BE LINK BUTTON DECORATION*/   
.linkbox1 {
  background-color: green;
  color: black;
  padding: 5px 10px;
  text-decoration: none;
  }
/*UNFINISHED! WILL EVENTUALLY BE LINK BUTTON HOVER*/   
.linkbox1:hover{
  background-color:green;
  }
  
/*UNUSED BOXING ELEMENT WHERE ITS PINK WITH A FUCHSIA BORDER. KINDA BRIGHT..*/   
.boxed2 {
  background-color: green;
  color: black;
  padding: 5px;
  border: 2px solid green;
  text-align: left;
  margin: 1%;
}

/*UNUSED BOXING ELEMENT THAT IS A COPY OF BOXED1 I THINK*/   
.boxed3 {
    background-color: black;
    color: white;
    padding: 2px;
    border: 2px solid green;
    margin: 1%
  }
  
  
/*RED MARQUEE WITH BLACK TEXT. COMBINE WITH BOLD TEXT STYLING IN THE HTML FOR GOOD EFFECT*/     
.alertbar {
  background-color: red;
  color: black;
  padding: 3px;
  }

/*THIS IS A FLEXBOX FOR A SIDEWAYS LIST*/   
.sidewaylist {
    display: flex;
    justify-content: space-evenly;
  }

/*THIS CONTROLS THE SIZE OF THE DETAILS ELEMENTS*/  
.sidewaylist details {
    width:450px;
  }
  

.navbar {
  background-color: black;
  margin: 0;
  margin-top: 5px;
  height: 20%;
  width: 100%
  }
  
.navbar ul {
  display: flex;
  padding: 0px;
  padding-bottom: 0.7%;
  margin: 0;
  list-style-type:none;
  justify-content: space-evenly;
  }

.navbar li {
  padding-top: 1%;
  
  }

.navbar li a {
  color: blue;
  font-weight: 800;
  text-decoration: none;
  }

.navbar li a:hover {
  color: red;
  text-decoration: underline;
  }