body {
  color: aliceblue;
  background-color: #1a1a2e;
}

.profilePic {
  max-height: 300px;
  border-radius: 50%;
}

.game-Container {
  padding: 1em;
  border-radius: 0.5em;
  background-color: #12121d;
  position: relative;
}

.game-padding {
  padding: 0.5em;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

.game-container-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.roles {
  font-weight: bold;
  font-size: 0.8em;
}

.role-developer::after {

  padding: 0.15em 0.3em 0.3em 0.3em;
  border-radius: 0.5em;
  margin: 0em 0.2em 0em 0.2em;
  content: "Developer ";
  background-color: rgb(223, 100, 0);
}

.role-designer::after {

  padding: 0.15em 0.3em 0.3em 0.3em;
  border-radius: 0.5em;
  margin: 0em 0.2em 0em 0.2em;
  content: "Designer ";
  background-color: rgb(66, 136, 0);
}

.role-technicalartist::after {

  padding: 0.15em 0.3em 0.3em 0.3em;
  border-radius: 0.5em;
  content: "Tech artist";
  background-color: rgb(136, 0, 129);
}

.role-creator::after {
  padding: 0.15em 0.3em 0.3em 0.3em;
  border-radius: 0.5em;
  content: "Creator ";
  background-color: #dbaf00;
}

.role-author::after {
  padding: 0.15em 0.3em 0.3em 0.3em;
  border-radius: 0.5em;
  content: "Author ";
  background-color: #ff275d;
}

.role-artist::after {
  padding: 0.15em 0.3em 0.3em 0.3em;
  border-radius: 0.5em;
  content: "Artist ";
  background-color: #00bb92;
}

.project-link {
  font-weight: bold;
  position: absolute;
  bottom: 1em;
  padding-top: 1em;
}

.project-link a {
  text-decoration: none;
  margin-right: 0.5em;

}

.project-link a:hover {
  color: cornsilk;
}

.gitHub {
  color: #2CB44C;
}

.youtube {
  color: #ff2b2b;
}

.itch {
  color: #F25958;
}

.medium {
  color: #F6B128;
}

.unity {
  color: #d8d8d8;
}

.googlePlay {
  color: #39C6F7;
}

.cafeBazaar {
  color: #91CF03;
}

.page-links {
  text-align: center;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
}

.page-links a {
  text-decoration: none;
  color: #e94560;
  padding: 1em 0.5em 0.3em 0.5em;
  margin: 0em 0.6em 0em 0.6em;
  font-weight: bold;
  transition: 0.5s;

}

.page-links a:hover {
  color: rgb(189, 189, 189);
}

.page-link-selected {
  border-bottom: 3px solid;
}

.center-text {
  text-align: center;
  vertical-align: middle;
}

.header-font {
  font-weight: bold;
  font-size: 1.3em;
}

.bold {
  font-weight: bold;
}

.light {
  font-weight: lighter;
}

.dot {
  height: 13px;
  width: 13px;
  background-color: #e94560;
  border-radius: 50%;
  display: inline-block;
}

.time-line-border {
  border-left: 4px solid #e94560;
}

.theme-color {
  color: #e94560;
}

.social-font {
  font-weight: bold;
  padding-top: 0.4em;
  padding-left: 0.2em;
}

.social-link {
  text-decoration: none;
  color: white;
}

.social-link:hover {
  color: rgb(202, 202, 202);
  text-decoration: none;
}

.award-icon {
  height: 40px;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

.logo-name {
  height: 110px;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

.top-social-icons {
  text-align: center;
}

.top-social-icons span {
  padding-left: 0.5em;
  padding-right: 0.5em;
  color: #868686;
  transition: 0.4s;

}

.top-social-icons span:hover {
  color: #ffffff;
}

.botton-social-icons {
  padding-top: 2.6em;
}

footer {
  margin-top: 2em;
  padding: 1em;
  border-radius: 0.5em;
  background-color: #12121d;
}

.highlight-inline {
  color: #f3889a;

}

.highlight-link {
  text-decoration: underline;
  color: #f3889a;
}

.highlight-link:hover {
  text-decoration: none;
  color: #f3889a;
}

.zoom {
  transition: transform 0.7s;
}

.zoom:hover {
  -ms-transform: scale(1.03);
  /* IE 9 */
  -webkit-transform: scale(1.03);
  /* Safari 3-8 */
  transform: scale(1.03);
}

/* Additional styles for thesis page */
.code-block {
  background-color: #1e1e30;
  padding: 1em;
  border-radius: 0.5em;
  margin: 1em 0;
  font-family: monospace;
  white-space: pre;
  overflow-x: auto;
}

.download-btn {
  display: inline-block;
  background-color: #e94560;
  color: white;
  padding: 0.8em 1.5em;
  border-radius: 0.5em;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.download-btn:hover {
  background-color: #d63851;
  color: white;
  text-decoration: none;
}

.github-access {
  border-top: 1px solid #2a2a40;
  padding-top: 1.5em;
}

.thesis-page ul {
  list-style-type: none;
  padding-left: 1.2em;
}

.thesis-page ul li {
  position: relative;
  margin-bottom: 0.5em;
}

.thesis-page ul li:before {
  content: "•";
  color: #e94560;
  position: absolute;
  left: -1.2em;
}

.embed-responsive {
  border-radius: 0.5em;
  overflow: hidden;
}

.download-buttons {
  display: flex;
  gap: 1em;
  margin: 1em 0;
  flex-wrap: wrap;
}

.download-buttons .download-btn {
  margin-bottom: 0.5em;
}


.section-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #e94560;
  transition: color 0.5s;
}

.section-header:hover {
  color: rgb(189, 189, 189);
}

.section-header.expanded {
  color: white;
}

.section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.section-content.expanded {
  max-height: 3000px;
  transition: max-height 0.5s ease-in;
}