img#profile-img {
  transition: width 0.3s, height 0.3s, box-shadow 0.3s, border-radius 0.3s;
}

body.font-small img#profile-img {
  width: 120px !important;
  height: 120px !important;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
body.font-normal img#profile-img {
  width: 150px !important;
  height: 150px !important;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
body.font-large img#profile-img {
  width: 180px !important;
  height: 180px !important;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
label,
input,
textarea,
button {
  font-family: "Merriweather", serif;
  transition: font-size 0.2s, color 0.2s, background-color 0.2s;
}

.font-small {
  font-size: 1rem !important;
}
.font-normal {
  font-size: 1.1rem !important;
}
.font-large {
  font-size: 1.25rem !important;
}

.font-small h1,
.font-small h5,
.font-small h6 {
  font-size: 2.5rem !important;
}
.font-normal h1,
.font-normal h5,
.font-normal h6 {
  font-size: 3rem !important;
}
.font-large h1,
.font-large h5,
.font-large h6 {
  font-size: 3.5rem !important;
}

.font-small h2 {
  font-size: 2rem !important;
}
.font-normal h2 {
  font-size: 2.5rem !important;
}
.font-large h2 {
  font-size: 3rem !important;
}

.font-small h3 {
  font-size: 1.25rem !important;
}
.font-normal h3 {
  font-size: 1.75rem !important;
}
.font-large h3 {
  font-size: 2.25rem !important;
}

.font-small h4 {
  font-size: 1.25rem !important;
}
.font-normal h4 {
  font-size: 1.5rem !important;
}
.font-large h4 {
  font-size: 1.75rem !important;
}

.experience-logo {
  border-radius: 50%;
  object-fit: cover;
  transition: width 0.2s, height 0.2s;
}

.font-small .experience-logo {
  width: 40px;
  height: 40px;
}
.font-normal .experience-logo {
  width: 48px;
  height: 48px;
}
.font-large .experience-logo {
  width: 60px;
  height: 60px;
}

.navbar-brand img {
  height: 40px;
}

.certificate img.certificate {
  max-width: 350px;
  border-radius: 1rem;
  margin: 1rem 0;
}

.udemy {
  height: 32px;
  margin-right: 10px;
}

.fullscreen-view {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  justify-content: center;
  align-items: center;
}
.fullscreen-image {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 2rem;
  box-shadow: 0 0 30px #0008;
}
.dark .fullscreen-view {
  background: rgba(40, 40, 40, 0.98);
}

.form-switch .form-check-input {
  cursor: pointer;
}

.tile-nav .nav-link {
  font-weight: 600;
}
.tile-nav .nav-link.active {
  color: #0d6efd;
}

[data-bs-theme="dark"] .fw-semibold,
[data-bs-theme="dark"] .tile-nav .nav-link {
  color: #f8f9fa !important;
}

[data-bs-theme="dark"] .tile-nav .nav-link:hover {
  color: #0d6efd !important;
}

[data-bs-theme="dark"] section.home {
  background-color: #17191c !important;
  color: #f8f9fa !important;
}

section {
  padding: 2rem 0;
}

footer {
  padding: 1.5rem 0;
  color: #888;
  font-size: 1rem;
  text-align: center;
  border-top: 1px solid #e2e2e2;
}
[data-bs-theme="dark"] footer {
  border-top: 1px solid #444;
  color: #bbb;
}

[data-bs-theme="dark"] .brand-name,
[data-bs-theme="dark"] .tile-nav .nav-link {
  color: #f8f9fa !important;
}

.tile-nav .nav-link:hover {
  color: #0d6efd;
}

.navbar-toggler {
  border: none;
}