@font-face {
  font-family: greek;
  src: url("fonts/greek.otf") format("opentype");
}

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

@font-face {
  font-family: sofiaBlack;
  src: url("fonts/SofiaProBlackAz.otf") format("opentype");
}

@font-face {
  font-family: sofiaBold;
  src: url("fonts/SofiaProBoldAz.otf") format("opentype");
}

@font-face {
  font-family: sofiaLight;
  src: url("fonts/SofiaProLightAz.otf") format("opentype");
}

body {
  background-color: #f6f6ee;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}


.navbar {
  background-color: #c2c1f8;
  overflow: hidden;
}

.navbar a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

.navbar-logo {
  font-family: "greek";
  font-size: 40px;
}

.navbar-link {
  font-family: "sofiaBlack";
  font-size: 25px;
  margin-top: 20px;
  border-radius: .9rem;
}

.navbar a:hover {
  background-color: #e8e8f4;
}

.navbar a:hover {
  background-color: #e8e8f4;
}

/* Hide the link that should open and close the topnav on small screens */
.navbar .icon {
  display: none;
}

@media screen and (max-width: 770px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 770px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media (min-width: 576px)
.container {
    max-width: 600px;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  max-width: 1000px;
}

.jumbotron {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding: 10px;
  background-color: #e8e8f4;
  border-radius: .4rem;
  display: block;
  text-align: center;
}

li {
  display: inline-block;
  margin: 5px;
}

li a {
  padding: 10px;
  font-family: "sofiaLight";
  background-color: #c2c1f8;
  border-radius: .9rem;
  text-decoration: none;
  color: #000000;
}

li:hover {
  background-color: #f6f6ee;
  text-decoration: underline;
}

h1 {
  font-family: "sofiaBlack";
  display: block;
  font-size: 2.5em;
  margin-block-start: 0.43em;
  margin-block-end: 0.43em;
  margin-inline-start: 10px;
  margin-inline-end: 10px;
}

h2 {
  font-family: "sofiaBlack";
  font-size: 35px;
}

p {
  font-family: "sofiaLight";
  font-size: 18px;
  text-align: left;
}

.citation-snippet p {
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size: 15px;
}

a {
  text-decoration: none;
  font-family: "sofiaLight";
  color: #000000;
}
a:hover {
  text-decoration: underline
}

.button {
  border-radius: .9rem;
  background-color: #c2c1f8;
  padding: 10px;
}

.headshot {
  height: 150px;
  width: 150px;
}

img {
  width: 100%;
  height: auto;
}

.pic-link{
  background-color: #f6f6ee;
}

li p {
  text-align: center;
}

table {
  margin-top: 20px;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  text-align: left;
  padding: 8px;
  font-family: sofiaBlack;
  font-size: 25px;

}

td {
  text-align: left;
  padding: 8px;
  font-family: sofiaLight
}

tr:nth-child(even) {
  background-color: #e8e8f4;
}

.leaderboard {
  overflow-x: auto;
}

#recall_k td{
  font-family: sofiaBlack;
}

.hidden {
  display: none;
}

.unhidden {
  display: table-row;
}

.rank-num {
  padding-left: 25px;
}

i {
  display:none;
}