/* Custom CSS for Bootsrap-based portfolio */
/* Global Variables */
:root {
  --highlight: #e9dada; /* Light-tone colour */
  --accent: #de5555; /* Vibrant colour, high contrast */
}

* {
  scroll-behavior: smooth;
}

body {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

.btn:hover {
  box-shadow: 3px 4px 5px var(--accent);
}

.form-control:focus {
	border-color: black;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 3px 4px 5px var(--highlight);
}

::selection {
  background-color: var(--accent);
  color: #ffffff;
}

span {
  color: var(--accent);
  font-weight: bolder;
}

/* Nav Styles */
.nav-link {
  transition: color 0.3s ease-in-out;
}

.nav-link:hover {
  color: var(--accent);
}

/* Hero Styles */
.jumbotron {
  background: linear-gradient(to bottom, var(--highlight), white);
}

.image-main {
  transition: opacity 1s ease-in-out;
}

.image-hover {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.quote {
  transition: opacity 0.7s, transform 0.7s ease-in-out;
}

.quote-text {
  font-size: 48px;
}

.quote-text span {
  color: black;
  transition: color 0.3s ease-in-out;
}

.jumbotron:hover .quote {
  transform: scale(1.07);
}

.jumbotron:hover .image-hover {
  opacity: 1;
}

.jumbotron:hover .image-main {
  opacity: 0;
}

.jumbotron:hover .quote-text span {
  color: var(--accent);
}

/* Subsection Styles */
.body-container {
  transition: transform 0.7s ease-in-out;
}

.body-container:hover {
  transform: scale(1.03);
}

.body-container:hover h2 {
  color: var(--accent);
}

.subsection {
  border-right: 4px solid var(--accent);
}

.subsection h2 {
  transition: color 0.3s ease-in-out;
}

@media (max-width: 767px) {
  .subsection {
    border-right: none;
    border-bottom: 4px solid var(--accent);
    padding-bottom: 30px;
    margin-bottom: 50px;
  }
}

/* Testing dark mode preferences */
@media (prefers-color-scheme: dark) {
	.jumbotron {
    background: linear-gradient(to bottom, var(--highlight), black);
  }
}