:root {
  --color-black-o: rgba(0, 0, 0, .85);
  --color-brown: rgb(83, 33, 5);
  --color-brown-o: rgba(83, 33, 5, 8);
  --color-cream: #FDF9D8;
  --color-cream-o: rgba(253,249,216, 0.9);
  --color-gold: #b48345;
  --color-turquoise: #4aaaa5;
  --background-cool_stucco: url("../imgs/brown_stucco.jpg");
  --background-maroon_stucco: url("../imgs/stucco_background_maroon.jpg");
}

html {
  position: relative;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-image: var(--background-cool_stucco);
  background-repeat: cover;
  background-attachment: fixed;
  min-width: 300px; 
  animation: fadeInPage ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

body:fullscreen {
  overflow: scroll !important;
  background-color: white !important;
}

body::-webkit-scrollbar {
  width: .75rem;
}

body::-webkit-scrollbar-track {
  background: var(--color-brown-o);
}

body::-webkit-scrollbar-thumb {
  background: var(--color-cream);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
}

a {
  cursor: pointer;
}

/*-------------------------CUSTOM FOR-ALL CLASSES-------------------------*/
.box-shadow {
  border-radius: 5px;
  box-shadow: 4px 4px 8px rgba(83, 33, 5, .8);
}

.hide {
  display: none;
}
/*-------------------------CUSTOM FOR-ALL CLASSES-------------------------*/

/* HEADER */
.header-wrapper {
  padding: 0.1em;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../imgs/antiquepaper_1920x1234.jpg");
}

.header-container {
  color: var(--color-brown);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-header > .fa-paw {
  font-size: 1.5em;
}

#header-text-viva {
  padding-left: 0.2em;
}

#header-text-perros {
  padding-right: 0.2em;
}

.txt-rotate {
  font-size: 1.75em;
  font-family: consolas;
  padding-bottom: 0;
}

#header-logo-wrapper {
  min-width: 75px;
  height: 75px;
}

#header-logo-wrapper > img {
  width: 100%;
  height: 100%;
}

.header-body {
  font-weight: bolder;
  font-size: .8em;
  font-family: consolas;
  letter-spacing: 0.125ch;
  text-align: center;
  margin-top: 3em;
}

/* NAV */
nav {
  border-bottom: solid .25px var(--color-brown);
  background-color: var(--color-cream);
}

.navbar {
  padding: 0;  
  border: none;
}

#navbar-logo-img {
  background-image: url("../imgs/logo.png");
  height: 1.5em;
}

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand-main {
  display: flex;
  align-items: center;
}

.navbar-brand-text {
  position: relative;
  top: 0.15em;
  font-size: 1.2em;
  font-weight: bold;
  color: var(--color-brown-o);
  font-family: consolas;
}

.nav-link-me {
  padding: .5rem .5rem;
  height: 100%;
}

.dropdown-menu {
  background-color: var(--color-cream);
}

.nav-item>.nav-link-me {
  margin-top: 0;
  color: rgba(0, 0, 0, .5);
  display: block;
  text-decoration: none;
}

.nav-item a.active {
  background-color: rgb(83, 33, 5);
  color: #FDF9D8;
  display: block;
  text-decoration: none;
}

.nav-item a:hover {
  background-color: rgb(83, 33, 5);
  color: white;
  transition: all .5s linear;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(83, 33, 5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  height: 1.5em;
  width: 1.5em;
}

/* BODY */
.container {
  max-width: 1140px;
}

.container-all {
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  background-color:rgba(253,249,216, 0.9);
}

.page-header {
  color: rgb(116,33,53);
  font-family: Georgia, Times, "Times New Roman", serif;
  font-weight: bold;
  text-align: center;
  font-size: 2.5em;
  padding-top: 0.25em;
}

#page-title {
  color: inherit;
 }

/* FOOTER */
.footer-wrapper {
  background-color: var(--color-cream);
  padding-bottom: 2em;
  opacity: .9;  
}

.footer-container {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-items {
  padding: 1em 0;
  display: flex;
  flex-direction: column;

}

.footer-items > .footer-item > ul {
  text-align: center;
  padding-top: 1em;
}

.footer-items > .footer-item > ul > span {
  font-size: 1.2em;
  white-space: pre;
  font-weight: bolder;
}

.footer-items > .footer-item > ul > li {
  white-space: pre;
  font-size: 1em;
}

.footer-items > .footer-item > ul > li > a {
  color: inherit;
}

.footer-items > .footer-item > ul > li > a:hover {
  text-decoration: none;
  color: blue;
}

li {
  list-style-type: none;
}

.footer-item > ul {
  text-align: left;
  padding: 0;

}

.footer-paw {
  color: var(--color-brown);
  font-size: .75em;
}

.footer-logo-text {
  color: var(--color-brown);
  font-size: 1em;
  padding-left: .25em;
  padding-right: .25em;
  font-weight: bolder;
}

.footer-logo-text > a {
  text-decoration: none;
  color: inherit;
}

.text-muted {
  margin-bottom: 0;
  font-size: .4em;
  font-weight: bolder;
}

.fixed-logo-wrapper {
  position: fixed;
  width: 60px;
  height: 60px;
  z-index: 1000;
  transition: 1s linear;
  border-radius: 100%;
  padding: 0px;
}

.bottom-left {
  left: 1em;
  bottom: 1em;
  animation: mySpiner 5s infinite linear; 
}

.bottom-right {
  right: 0.8em;
  bottom: 0.8em;
  animation: mySpinerRight 5s infinite linear;
}

@keyframes mySpiner {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes mySpinerRight {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

@keyframes fadeInPage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fixed-logo-wrapper:hover {
  transform: scale(1.5);
  transition: 1s linear;
  cursor: pointer;
}

.fixed-logo-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.fixed-logo-container::after {
  content: "[x]";
  position: absolute;
  top: 50px;
  right: -5px;
  font-size: 0.5em;
  font-weight: bold;
  color: red;
}

.fixed-logo-container>img {
  width: 100%;
  object-fit: scale-down;
  height: 100%;
}