:root {
  --primary: #0496e5;
  --primary-rgb: 4, 150, 229;
  --primary-dark: #768add;
  --primary-dark-rgb: 118, 138, 221;
  --primary-variant: #3700b3;
  --background: #181a1b;
  --on-background: #ffffff;
  --on-background-rgba: 255, 255, 255;
  --text-color-very-high-emphasis: rgba(var(--on-background-rgba), 0.94);
  --text-color-high-emphasis: rgba(var(--on-background-rgba), 0.87);
  --text-color-medium-emphasis: rgba(var(--on-background-rgba), 0.6);
  --text-color-disabled: rgba(var(--on-background-rgba), 0.38);
  font-size: 16px;
  --background-12dp: rgba(var(--on-background-rgba), 0.14);
  --background-02dp: rgba(var(--on-background-rgba), 0.07);

  /*
    00dp 	0%
    01dp 	5%
    02dp 	7%
    03dp 	8%
    04dp 	9%
    06dp 	11%
    08dp 	12%
    12dp 	14%
    16dp 	15%
    24dp 	16%
  */
}

.very-high-emphasis {
  color: var(--text-color-very-high-emphasis);
}

.high-emphasis {
  color: var(--text-color-high-emphasis);
}
.medium-emphasis {
  color: var(--text-color-medium-emphasis);
}

.w-70 {
  max-width: 70%;
}

.h-80 {
  max-height: 80%;
}

.h-20 {
  max-height: 20%;
}

.h-10 {
  max-height: 0%;
}

.default-mouse {
  cursor: default;
}

.click-mouse {
  cursor: pointer;
}

.no-highlight {
  /* Source: https://stackoverflow.com/questions/7018324/how-to-stop-highlighting-of-a-div-element-when-double-clicking */
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */

  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Lato", sans-serif;
}

body {
  background-color: var(--background);
  margin: 0;
  padding: 0;
}

.behind-navigation {
  background-color: var(--background);
  height: 56px;
}

.navigation {
  background-color: #333333;
}

.nav-link {
  color: var(--on-background);
}

.navbar {
  border-bottom: 2px solid var(--primary);
}

.navbar-brand {
  color: var(--on-background);
}

.navbar-toggler-icon {
  color: var(--on-background);
}

/* These are the lines that seperate sections and provide us the margin for the navbar */
.nav-padding-link {
  height: 60px;
  min-width: 330px;
  width: 100%;
  border-bottom: 5px solid var(--primary);
  /* border: 5px solid blue;*/
}

.underline {
  text-decoration: underline;
  text-decoration-color: var(--primary-dark);
}

/* Page 1 section */
.page1 {
  min-height: 100%; /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */
  min-width: 330px;
  display: flex;
  align-items: center;
}

.portrait img {
  max-width: 100%;
  max-height: 225px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border: solid 5px rgba(var(--primary-rgb), 0.8);
}

.icons a {
  text-decoration: none;
  margin: 3px;
  display: inline-block;
}

.icons a:hover {
  filter: grayscale(78%) opacity(0.5);
  transition: 500ms ease;
}

.icons img {
  background-color: var(--text-color-high-emphasis);
  border: solid 3px rgba(var(--primary-rgb), 1);
  max-height: 64px;
  max-width: 64px;
  outline: none;
}

.name {
  color: var(--primary);
}

.description {
  color: var(--text-color-high-emphasis);
}

/* About me section */
.aboutme {
  min-width: 330px;
  width: 100%;
  margin-top: 56px;
  /* border: 2px solid yellow; */
}

/* .aboutme .row {
  border: 5px solid purple;
}

.aboutme .container-fluid {
  border: 5px solid green;
} */

/* Skills section */
.skills {
  min-width: 330px;
  width: 100%;
  margin-top: 56px;
  /* border: 2px solid yellow; */
}

.skillboxes {
  display: flex;
  flex-wrap: wrap;
  /* border: 5px solid green; */
}

.skillboxes h4 {
  margin-left: 5px;
  margin-right: 5px;
}

.badge-skills {
  background-color: var(--primary);
  color: var(--background);
}

/* Tooltip recoloring helped by stackoverflow: https://stackoverflow.com/questions/36143382/re-color-tooltip-in-bootstrap-4 */
.tooltip-inner {
  background-color: #768add;
}

.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
  /* margin-left: -3px;
  content: "";
  border-width: 5px 5px 0; */
  border-top-color: #768add;
}

.skills .row {
  /* border: 5px solid purple; */
}

.skills .row div {
  /* border: 5px solid purple; */
}

.skills .container-fluid {
  /* border: 5px solid green; */
}

/* Project section */
.project {
}

.project h1 {
  padding: 30px 0px;
}

.card-deck {
  margin-left: auto;
  margin-right: auto;
}

.card-dark-mode {
  background-color: var(--background-02dp);
  margin: 1px;
}

.card-dark-mode-title {
  color: var(--text-color-very-high-emphasis);
}

.card-dark-mode-text {
  color: var(--text-color-medium-emphasis);
}

.card-header-with-info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.card-header-with-info .card-title {
  margin-bottom: 0px;
}

.card-img-top {
  width: 100%;
  height: 15vw;
  object-fit: contain;
  border-bottom: 2px solid var(--primary-dark);
}

.card-body {
  border-bottom: 2px solid var(--primary-dark);
}

.card-button {
  background-color: rgba(var(--primary-rgb), 1);
  color: black;
}

.card-skills {
  margin: 5px;
}

.card-footer .btn {
  margin-bottom: 5px;
}

/* contact me section */
.contactme {
  min-width: 330px;
  width: 100%;
  margin-top: 56px;
  /* border: 2px solid yellow; */
}

/* Extra small devices (phones, 600px and down) */
@media (orientation: portrait) and (max-width: 575.98px) {
  .portrait img {
    max-width: 100%;
    max-height: 150px;
    border: solid 5px rgba(var(--primary-rgb), 0.8);
  }
  .name {
    font-size: 30px;
    font-weight: bold;
  }

  .description {
    font-size: 22px;
    font-weight: lighter;
  }
  .card-img-top {
    width: 100%;
    height: 50vw;
    object-fit: contain;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .card-img-top {
    width: 100%;
    height: 45vw;
    object-fit: contain;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .card-img-top {
    width: 100%;
    height: 35vw;
    object-fit: contain;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}