@font-face {
    font-family: 'fibberish'; /*a name to be used later*/
    src: url('res/fonts/fibberish.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'bongo'; /*a name to be used later*/
    src: url('res/fonts/bongo.ttf'); /*URL to font*/
}

a {
  font-family: "fibberish";
  font-size:16px;
  color:red;
}

.bg {
  background-image: url("res/gaming_bg.png");
  background-size:cover;
  font-family: verdana, sans-serif;
  font-size: 16px;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;     
  position: relative;
  gap:10px;
  padding:10px;
}

.banner {
  background-image: url("res/bannertrans.png");
  background-size: cover;      /* make the image fit the div */
  background-position: center; /* center the image */
  background-repeat: no-repeat;

  display: flex;
  justify-content: space-between;
  align-items: center;

  margin: 0 auto 0 auto;   /* center the banner horizontally */
  height:250px;
  max-width: 935px;
  width: 100%;
}

.sidebar {
  width:175px;
  background: #f0f0f0;
  padding:10px;
  border-style:solid;
  border-width:1px;
}

.sidebar img {
  width: 100%;   /* make the image fill the sidebar width */
  height: auto;  /* keep proportions so it doesn’t get distorted */
}

.sidebar p {
  font-family: "fibberish";
  font-size:16px;
  color:#45a8d9;
  text-decoration: green wavy underline;
}

.ball-container {
  display:flex;
}


.main-content {
  width:500px;
  background-color:#f0f0f0;
  padding:10px;
  border-style:solid;
  border-width:1px;
}

.main-content img {
  width:300px;
  justify-content:center;
}

.main-content p {
  text-align:center;
}

.log {
  overflow:scroll;
}