@font-face {
    font-family: SF;
    src: url(SFPRODISPLAYREGULAR.OTF);
  }
  .box {
    color:white;
    background-color: #262626;
    width:400px;
    height:300px;
    border-radius:30px;
    border: 1px solid white;
    padding:10px;
    margin-top:100px;
  }
  .box img {
    border-radius:20px;
    margin-top:20px;
  }

  body::-webkit-scrollbar {
    width: 12px;               /* width of the entire scrollbar */
  }
  
  body::-webkit-scrollbar-track {
    background: #262626;        /* color of the tracking area */
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: #404040;    /* color of the scroll thumb */
    border-radius: 20px;       /* roundness of the scroll thumb */
    border: 3px solid #262626;  /* creates padding around scroll thumb */
  }
body {
    font-family: SF;
    color:white;
    background-color:#262626;
    margin:0;
}
.nav {
    background-color:#404040;
    overflow:hidden;
    height:87px;
  width: 100%;
}
.nav img {
    float: left;
    margin-left:50px;
  text-align: center;
margin-top:15px;
  text-decoration: none;
}
.nav a {
    float:left;
    margin-top:30px;
    margin-left:50px;
    text-decoration:none;
    font-size:20px;
    color:white;
}
.nav a:hover {
    color:lightgray;
}
a {
    text-decoration: none;
    font-size:20px;
    color:white;
}
a:hover {
    color:lightgray;
}
.footer {
    padding:17px;
    height:80px;

}
.footer img {
  margin-top:15px;
  margin-left:30px;
  float:left;
}
.footer h1 {
  float:left;
  margin-left:10px;
}
.footer p {
  float:right;
  margin-right:20px;
  margin-top:30px;
}