/* 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." */

body {
  background-color: black;
  color: white;
  font-family: Arial;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  overflow: hidden;
}

.navbuttons {
    display: flex; 
  border: 1.5px solid purple;  
  padding: 12px;  
  background-color: black;  
  margin:auto;
  position:relative;
  width: fit-content;
  max-width: 1110px;
  height: fit-content
}

.ocbuttons {
   display: flex; 
  padding: 12px;  
  margin:auto;
  position:relative;
  width: fit-content;
  max-width: 1110px;
  height: fit-content 
}


nav {
border-style: solid;
border-color: black;
list-style-type: none;
  margin: 0;
  padding: 0;
}

figure {
box-shadow: 4px 4px black;
}

figcaption {
font-style: italic;
color: white;
background-color: black;
display: table;
}

/*NAVBAR LINKS*/

.homeButton{ /*HOME*/
  background-image: url("https://zazzro.neocities.org/images/home.png");
  width: 10vw;
  height: 21.2vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.homeButton:hover{
  background-image: url("https://zazzro.neocities.org/images/homeH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.aboutButton{ /*ABOUT*/
  background-image: url("https://zazzro.neocities.org/images/about.png");
  width: 10vw;
  height: 21.2vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.aboutButton:hover{
  background-image: url("https://zazzro.neocities.org/images/aboutH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.artButton{ /*MY ART*/
  background-image: url("https://zazzro.neocities.org/images/myart.png");
  width: 10vw;
  height: 21.2vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.artButton:hover{
  background-image: url("https://zazzro.neocities.org/images/myartH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.charButton{ /*CHARACTERS*/
  background-image: url("https://zazzro.neocities.org/images/chars.png");
  width: 10vw;
  height: 21.2vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.charButton:hover{
  background-image: url("https://zazzro.neocities.org/images/charsH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/*FOOTER LINKS*/

.twitButton{ /*twitter*/
  background-image: url("https://zazzro.neocities.org/images/twitr.png");
  width: 5vw;
  height: 11vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.twitButton:hover{
  background-image: url("https://zazzro.neocities.org/images/twitrH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ytButton{ /*youtube*/
  background-image: url("https://zazzro.neocities.org/images/yt.png");
  width: 5vw;
  height: 11vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ytButton:hover{
  background-image: url("https://zazzro.neocities.org/images/ytH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ngButton{ /*newgrounds*/
  background-image: url("https://zazzro.neocities.org/images/newg.png");
  width: 5vw;
  height: 11vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ngButton:hover{
  background-image: url("https://zazzro.neocities.org/images/newgH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.bskyButton{ /*bskyy*/
  background-image: url("https://zazzro.neocities.org/images/bsky.png");
  width: 5vw;
  height: 11vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.bskyButton:hover{
  background-image: url("https://zazzro.neocities.org/images/bskyH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.strawButton{ /*strawpage*/
  background-image: url("https://zazzro.neocities.org/images/straw.png");
  width: 5vw;
  height: 11vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.strawButton:hover{
  background-image: url("https://zazzro.neocities.org/images/strawH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.tumButton{ /*tumblr*/
  background-image: url("https://zazzro.neocities.org/images/tum.png");
  width: 5vw;
  height: 11vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.tumButton:hover{
  background-image: url("https://zazzro.neocities.org/images/tumH.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}