body {
  background-color: #212529;
}

.serif {
  font-family: "Noto Serif", serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
}

.sans {
  font-family: "Noto Sans", sans-serif;
}

p {
  color: #a1a1a8;
}

/* Navbar */
.navbar {
  background-color: #444444;
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  box-shadow: 2px 2px 5px #222222;
}

.nav-item {
  margin-left: 30px;
  font-weight: 400;
}

.nav-link {
  color: #e3e3e3;
  font-size: 1rem;
}

.nav-link:hover {
  color: rgb(255, 102, 51);
}

.nav-link.nav-link.active {
  color: #ff6633;
}

/* NavBar Toggler Icon */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 102, 55, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
  border: 1px solid rgba(255, 102, 55, 1);
}

/* Dropdown */
.dropdown-menu {
  background-color: #444444;
  font-family: "Noto Sans", sans-serif;
  border-width: 2px;
}

.dropdown-menu a {
  color: #fff;
}

.dropdown-item:hover {
  background-color: #ff6633;
  color: #fff;
}

a.nav-link.dropdown-toggle.show {
  color: #fff;
}

/* Links */
a {
  font-family: "Noto Sans", sans-serif;
  color: #ffcc00;
}

a.hover {
  color: #fff;
}

/* Post Links */
a.post {
  color: #ffcc66;
  text-decoration: none;
}

a.post:hover {
  color: #fff;
}

/* Pagination */
.pagination {
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #000;
  --bs-pagination-active-border-color: #fff;
  font-weight: 600;
}

.page-link {
  color: #000;
}

/* OzU Logo */
.logo {
  width: 150px;
  height: 50px;
}

.logoFooter {
  width: 170px;
  height: 70px;
}

/* Gradient Text */
.gradient-text-AI {
  background-image: linear-gradient(90deg, #ff9a00, rgb(204, 51, 255) 100%);
  background-clip: text;
  color: transparent;
}

.gradient-text {
  background-image: linear-gradient(to top, rgb(255, 51, 102, 1) 60%, rgb(204, 153, 102, 1) 40%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(204, 51, 255, 0));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 155, 0, 1);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}

.glass:hover {
  background: linear-gradient(135deg, rgba(255, 102, 51, 1), rgba(204, 51, 255, 0));
  border: 1px solid rgba(255, 204, 51, 1);
}

/* Dropcap */
.dropcapFirstSerif {
  font-family: "Noto Serif", serif;
  font-size: 2.5em;
  font-weight: 600;
  display: block;
  float: left;
  margin: 0.1rem 0.5rem 0 0;
  padding: 0.2rem 0;
  line-height: 1;
}

.dropcapFirstSans {
  font-family: "Noto Sans", sans-serif;
  font-size: 2.5em;
  font-weight: 600;
  display: block;
  float: left;
  margin: 0.1rem 0.5rem 0 0;
  padding-top: 0.5rem;
  padding-bottom: 0.3rem;
  line-height: 1;
}

/* Image Raised */
.img-raised {
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
}

.img-raised:hover {
  box-shadow: rgba(100, 100, 100, 0.2) 0px 2px 2px, rgba(100, 100, 100, 0.2) 0px 4px 4px,
    rgba(100, 100, 100, 0.2) 0px 8px 8px, rgba(100, 100, 100, 0.2) 0px 16px 16px;
  transition: box-shadow 0.4s ease-out;
  transition: border 200ms ease-out;
  margin-top: 0px;
}

.element:hover {
  box-shadow: 12px 12px 12px (90deg, #ff9a00, rgb(204, 51, 255) 100%);
}

/* Cards */

.homeCards {
  background: #3e4145;
  background-image: linear-gradient(rgba(62, 65, 69, 0.3) 20%,
      rgba(33, 37, 41, 1) 70%,
      rgba(62, 65, 69, 0.3) 100%);
}

.facultyCards {
  background-color: #34363a;
  background-color: #1f1f1f;
}

.card-header {
  background-color: #333333;
}

.list-group-item {
  border: 0;
}

ul.list-group>li.list-group-item:last-child {
  border-bottom: none !important;
}

.fourCard {
  background-color: #34363a;
}

.newsCard {
  background-color: #34363a;
}

/* Badges */
.badge {
  font-family: "Noto Serif", serif;
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
}

.StudioBadge {
  background-color: #003366;
  color: #fff;
  padding: 0.3em 0.6em;
  border-radius: 0.4em;
  font-weight: 500;
}

/* Buttons */
.btn-outline-studio {
  background-color: #000;
  color: #ff6633;
}

.btn-outline-studio:hover {
  background-color: #000;
  color: #ffcc33;
}

.btn-outline-faculty {
  border-color: #666;
  color: #fd7e14;
  border-width: 2px;
}

.btn-outline-faculty:hover {
  border-color: #999;
  border-width: 2px;
}

/* Breadcrumb */
.breadcrumb {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
}

.breadcrumb-item a {
  text-decoration: none;
  color: rgb(255, 102, 51);
}

.breadcrumb-item a:hover {
  color: #fff;
}

.breadcrumb-item.active {
  color: #fff;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: #999;
}

/* Carousel */
.carousel-indicators [data-bs-target] {
  font-family: "Noto Sans", sans-serif;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  margin-right: 4px;
  margin-bottom: 0.2rem;
  background-color: #003366;
  opacity: 1;
}

.carousel-indicators {
  margin-bottom: 0;
}

.carousel-indicators .active {
  background-color: #ffcc00;
}

/* Modal */
.modal-header {
  border: 0;
}

.popup {
  background-color: #0d6efd;
  background-color: #006699;
}

.btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url(../img/x.svg);
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 0.5;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
}

/* Other Posts */
#StudioChange {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod301/project-change/cod301.change.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#StudioGrains {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod301/project-grains/cod301.grains.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#StudioClimate {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod301/climate-2050/cod301.climate.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#StudioMagazine {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod301/interactive-magazine/cod301.magazine.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#GameDesign {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.3)),
    url(../img/cod301/game-design/iletisim-tasarimi-game.design.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#StudioV {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod401/cod401.studio.v.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#StudioGraduation {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod402/cod402.graduation.project..card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod103 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod103/cod103.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod104 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod104/cod104.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod108 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod108/cod108.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod204 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod204/cod204.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod201 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod201/cod201.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod202 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod202/cod202.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod205 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod205/cod205.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod207 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod207/cod207.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod312 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod312/cod312.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#cod320 {
  background-image: linear-gradient(rgba(51, 51, 51, 0.3), rgba(255, 102, 51, 0.5)),
    url(../img/cod320/cod320.card.overlay.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 25vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border-radius: 0.8rem;
  font-family: "Noto Serif", serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Table */
th {
  font-weight: normal;
}

/* Footer */
footer {
  font-family: "Noto Sans", sans-serif;
  text-transform: uppercase;
  background-color: #111111;
  font-size: 0.7rem;
}

a {
  color: #ffcc66;
  text-decoration: none;
  transition: all 0.2s;
}

a:hover {
  color: rgb(255, 102, 51);
}

.bottomFooter {
  font-family: "Noto Sans", sans-serif;
  text-transform: uppercase;
  background-color: #000;
  font-size: 0.8rem;
}