* {
  box-sizing: border-box;
}

@font-face {
  font-family: "basiic";
  src: url("/fonts/basiic.ttf") format("truetype");
}

body{
 background-image: url("/images/background2.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
 font-family: 'basiic', Fallback, sans-serif;
  color: green;
  }

.bar {
 border: medium, dashed, black;
  border-radius: 30px;
 padding-left: 3%;
 padding-right: 3%;
 background-color: white;
 float: left;
 width: 75%;
 margin-right: 5%;
}

.sidebar {
 border: medium, dashed, black;
  border-radius: 30px;
  text-align: center;
 background-color: white;
 float: left;
 width: 20%;
 margin-top: 20%;
 padding-left: 1%;
 padding-right: 1%;
}

.footer{
  margin-top: 5%;
}

.ppage{
  float: left;
}

.npage{
  float: right;
}

.copyright{
  width: 100%;
  text-align: center;
}


@media screen and (max-width: 800px) {
  .bar, .sidebar {
    width: 100%;
    padding: 0;
  }