h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}

.font{
  font-family: Arial;
  font-weight: Bold;
  font-size: 16px;
  line-height: 18px;
  width: auto;
  height: 18px;
  margin-bottom: 0;
  display: block;
  color: white
}
  
.pixelated {
  image-rendering: pixelated;
  width: auto;
  height: 236px;
  margin-bottom: 8px;
  opacity: 1;
  display: none;
  transition: opacity 1s;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15);
}
.what {
  width: auto;
  height: 236px;
  margin-bottom: 8px
}
.what:hover{
    opacity: 0;
    }

.pixelated:hover {
  opacity: 1;
   transition: opacity 1s;
   background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png");
  }
  
.sudo {
  image-rendering: pixelated;
  width: 588px;
  height: 236px;
  background-image: url("https://i.ibb.co/FbwgBHBK/Keyboard-1-png.png");
  transition: background-image 0.1s ease-in-out;
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
  display:inline-block
        }
 .sudo:hover {
            background-image: url("https://piskel-imgstore-b.appspot.com/img/badb862b-7dc4-11f0-99f2-45d819067bd0.gif");
        }
.nationalservice {
  image-rendering: pixelated;
  width: 360px;
  height: 225px;
  background-image: url("https://piskel-imgstore-b.appspot.com/img/08bb9e94-7cc5-11f0-867d-f52fc1af8500.gif");
  transition: background-image 0.1s ease-in-out;
  background-repeat: no-repeat;
  background-size: 360px;
  cursor: pointer;
  display: none;
  margin-bottom: 0px;
        }
.nihility {
  image-rendering: pixelated;
  width: 328px;
  height: 324px; 
  margin-bottom: 0px
}
body { 
    background-image: url('https://i.ibb.co/Gv0cYM7R/pixel-art-small-4.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    image-rendering: pixelated;
    
	background-size: 100%;}