body {
  /*font-family: 'Courier New', Courier, monospace;*/
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

iframe {
  width: 100%;
  min-width: 15rem;
  max-width: 800px; /* optional cap */
  aspect-ratio: 16 / 9;
  border: none;
}

.calendar table{
  font-size: small;
  border: 1px solid black;
}

.calendar th {
  padding: 3px 7px 3px 7px;
  text-align: center;
}

.calendar td {
  padding: 2px 7px 2px 7px;
  text-align: center;
}

.rank-table table {
  width: 300px;
}

.rank-table th, td {
  text-align: center;
  padding: 3px 15px 3px 15px;
}

.rank-table tbody tr:nth-child(even) {
    background-color: #ededed;
}

.trow {
  display: flex;
}

.tcol {
  padding: 2px 10px 2px 2px;
}

.return-link a{
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #fb1c5e;
  text-underline-offset: 1px; 
  font-size: small;
}

a.tcol{
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #fb1c5e;
  text-underline-offset: 1px; 
}

a.tcol:hover{
  color: white;
  text-decoration-color: white;
  background-color: #fb1c5e;
}

.theader {
  background-color: black;
  color: white;
}


.monkeytype-box {
  border: 1px solid black;
  background-color: black;
  text-align: center;
  color: white;
  border-radius: 5px;
  margin-bottom: 7px;
  font-size: small;
}

.monkeytype-time {
  color: grey;
}

.monkeytype-score {
  font-size: x-large;
  font-weight: 1000;
}

.blog-header {
  padding: 0.3rem 0.8rem 0.1rem 0.8rem;
  margin-bottom: rem;
}

.blog-header h3 {
  margin-bottom: 0px;
}

.date {
  color: grey;
  font-style: italic;
  margin-bottom: 0.3rem;
}

.today {
  background-color: #fb1c5e;
  color: white;
  border-radius: 0px;
}

.marquee-wrapper {
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

.blinkies-track {
  display: flex;
  width: max-content;
  animation: marquee 10s linear infinite;
  overflow-y: hidden;
}

.blinkies {
  display: flex;
  white-space: nowrap;
  overflow-y: hidden;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

h1 {
  color: black;
}

h3 {
  font-weight: 600;
}

ul, p {
  margin-bottom: 10px;
}

.nav-links-bar {
  background-color: black;
  color: white;
}

a.nav-links {
  text-decoration: none;
  color: white;
}

.nav-links a:hover {
  color: white;
}

.nav-links {
  display: inline-grid;
  padding: 2px 5px 0px 5px;
  padding-bottom: 0.2rem;
}

.nav-links:hover {
  color: white;
  background-color: #fb1c5e;
}

.nav-links-update {
  padding: 2px 5px 0px 5px;
}

.col-md-auto {
  margin-right: 40px;
}

.update-box {
  max-height: 4rem;
  overflow-y: scroll;
}

/* My profile picture in index.html */
.pfp {
  float: right;
}

/* For pages (e.g. blog) that need content to be centered and shorter for better visibility */
.viewpage {
  padding-top: 2rem;
  max-width: 45rem;
}

.page-title {
  /*font-family: 'Courier New', Courier, monospace;*/
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-left: 2.1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.page-title h1{
  margin-bottom: 10px;
}


.youtuber-player {
  width: 20px;
}

/* When width is less than 450px */
@media all and (max-width: 990px) {
  .pfp {float:left;}
  .viewpage {width:100%;}
  .profile {margin-left: 1rem}
  .youtuber-player {width: 100%}
  .page-title {margin-left: auto;}
  .hide-scroll {overflow-x: scroll;}
  img {max-width: 80vw;}
}

/* Blog entries */
.blog-entry {
  border: 1px solid black;
  border-radius: 0px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 10px;
  font-size: small;
}

a {
  text-decoration: none;
  color: #eb789a;
}

a:hover {
  color: #fb1c5e;
}

.calendar-table table, th, td {
  text-align: center;
  padding: 1px;
  font-family: 'Courier New', Courier, monospace;
  border: 0px solid black;
  border-collapse: collapse;
}

.square {
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 3px;
  border: 1px solid black;
}

.square-filled {
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 3px;
  background-color: #fb1c5e;
}

.hide-y-scroll {
  overflow: hidden;
}

.down, .up {
  text-align: center;
}

.down:hover, .up:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}

.calendar-table {
  display: none;
}

.footer {
  /*font-family: 'Courier New', Courier, monospace;*/
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: small;
  color: grey;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  bottom: 0;
}

/* About me page */
.about-inner-container {
  border: 1px solid black;
  border-radius: 0px;
  margin-top: 7px;
  font-size: small;
}

.about-header-text {
  border: none;
  background-color: black;
  color: white;
  text-align: center;
  padding-top: px;
  padding-bottom: px;
}

.about-inner-text {
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 0px;
}