.head-spacer {
  margin-top: 46px !important;
}

@media only screen and (max-width: 768px) {
  .head-spacer {
    margin-top: 40px !important;
  }
}

#about a {
  color: white;
}

#about a:hover {
  color: yellow;
}

#about a.btn {
  color: black;
}

section {
  padding: 5rem 0 !important;
}

.section-normal {
  padding-top: 20px !important;
}

.social-icons {
  padding: 0px;
}

.social-icons i:hover {
  background: var(--light);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#contact .form-control.input.input-tr {
  color: white;
}

@media only screen and (max-width: 768px) {
  section {
    padding: 4rem 0 !important;
  }
}

@media only screen and (max-width: 768px) {
  .text-center.text-white.d-flex.mastheadp.header-blue {
    margin-top: 57px;
  }
}

@media only screen and (max-width: 768px) {
  .header-blue .hero h1 {
    margin-top: 15px;
  }
}

.col-contact {
}

.form-control.input.modern-form__form-control--textarea {
  color: rgb(255,255,255);
  background: transparent;
}

.form-check-input {
  border-color: green;
}

.text-muted.mb-0 a {
  color: #eeeeee;
}

textarea {
  background: transparent !important;
}

#test-title {
  /*color: initial;*/
  margin-top: 50px !important;
}

#result-description {
  margin-top: 60px;
  white-space: pre-wrap !important;
}

.card-silver {
  background: #c0c0c0 !important;
  color: #333333 !important;
}

.card-gold {
  background: gold !important;
  color: #333333 !important;
}

.card-platinum {
}

.note {
  font-size: smaller;
}

.bg-blue {
  /*color: #fff;*/
  background: linear-gradient(135deg, #172a74, #21a9af);
}

.bg-grey {
  background: grey;
}

.no-background {
  background: inherit !important;
}

.social-icons i {
  background: yellow;
}

#mainNav .navbar-brand {
  font-size: 90%;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
  min-width: 400px;
  background: #dddddd;
  max-width: 450px;
}

.pl-5 {
  display: block;
  width: 100% !important;
  padding-left: 5px;
  font-size: smaller;
  white-space: normal;
}

#mainNav {
}

#resume #description h2 {
  font-size: large;
  color: #222222;
}

#resume #description {
  /*position: relative;*/
}

.linkedin-profile {
  /*position: absolute;*/
  /*top: 0;*/
  /*right: 0;*/
  float: right;
  margin-left: 15px;
  max-width: 150px;
  max-height: 150px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.linkedin-profile:hover {
  transform: scale(1.2);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* layar kecil */

@media only screen and (max-width: 768px) {
  .linkedin-profile {
    max-width: 80px;
    max-height: 80px;
  }
}

#ai-detector-form {
  /*background: yellow;*/
}

#ai-detector-form textarea {
  background: #eeeeee !important;
  min-height: 250px;
}

#ai-detector-result-container .suspect {
  background: yellow;
}

#analisis-note {
  background: #d3d3d3;
}

.very-small {
  font-size: 0.7em !important;
}