/* Declared variables */
:root {
    --padding-default: 0.75rem;
    --padding-between-items: 1rem;
    --radius-default: 1.5rem;

    --logo-text-color: #433322;

    --background-primary: #FFFFFF;
    --on-background-primary: #473525;
    --on-background-link: #AF7C60;

    --background-secondary: #FAFBFC;
    --on-background-secondary: #787887;
    --on-background-secondary-accent: #5E5E6A;

    --background-header: #F3E3DD;
    --on-background-header: #473525;
    --background-header-hover: #E6D6D1; /* lighter variation: E4D5D0, darker variation: C8BBB6 */
    --on-background-header-hover: #2A1F16;

    --background-tertiaty: #ACADAD;
    --on-background-tertiaty: #FFFFFF;

    --button: #B88366;
    --on-button: #FFFFFF;
    --button-hover: #C48B6C;
    --on-button-hover: #FFFFFF;

    --fab: #B88366;
    --on-fab: #FFFFFF;
    --fab-hover: #C48B6C;
    --on-fab-hover: #FFFFFF;

    --background-card: #FFFFFF;
    --on-background-card: #473525;

    --x-small: 0.75rem;
    --smaller: 0.875rem;
    --small: 1rem;
    --medium: 1.125rem;
    --large: 1.125rem;
    --larger: 1.125rem;
    --x-large: 1.25rem;
    --xxx-large: 2rem;
}

* {
  box-sizing: border-box;
}

html, body {
  background-color: var(--background-primary);
  color: var(--on-background-primary);
  font-family: 'Montserrat', sans-serif; /* Font for every text */
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}

#preloader {
  position: fixed;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */
  background: white;
  z-index: 9999;
}

main {
  display: flex;
  flex-direction: column-reverse;
}

h1, h2 {
  font-family: 'Montserrat Alternates', serif; /* Alternative font for headers */
  font-size: var(--large);
}

#left {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-between-items);
  justify-content: flex-start;
}

img {
  max-width: 100%;
}

/* Logo */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;

  picture {
    width: 50%;
    margin-bottom: 0.75rem;

    img {
      height: 80%;
      object-fit: contain;
    }
  } 
}

.logo-header-1 {
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--medium);
  letter-spacing: 0.25rem;
  color: var(--logo-text-color);
  margin-bottom: 0.75rem;
}

.logo-header-2 {
  text-transform: uppercase;
  font-family: "Cinzel", serif;
  font-size: var(--xxx-large);
  color: var(--logo-text-color);
  font-weight: 600;
  margin-bottom: 1rem;
}

picture > a {
  display: flex;
  justify-content: center;
}

#contact-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
}

.primary-link, .primary-link:visited, .primary-link:active {
  color: var(--on-background-link);
  text-decoration: none;
}
.primary-link:hover {
  text-decoration: underline;
}

.primary-action, .primary-action:visited, .primary-action:active, .primary-action:hover {
  color: var(--on-background-primary);
  text-decoration: none;
}

header {
  display: flex;
  justify-content: center;
}

/* Navigation area */
nav {
  background-color: var(--background-header);
  max-width: 100vw;
  border-radius: 6.25rem;
  height: fit-content;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-evenly;
  margin: 0.875rem;
}

/* Links in the navigation area */
nav > a {
  padding: var(--padding-default) var(--padding-between-items);
  color: var(--on-background-header);
  text-transform: uppercase;
}

.nav-link-left {
  border-top-left-radius: 3.125rem;
  border-bottom-left-radius: 3.125rem;
}

.nav-link-right {
  border-top-right-radius: 3.125rem;
  border-bottom-right-radius: 3.125rem;
}

.nav-selected {
  background-color: var(--background-header-hover);
  color:  var(--on-background-header-hover);
}

#center {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#content {
  background-color: var(--background-secondary);
  color: var(--on-background-secondary);
  padding: var(--padding-default);
  margin: var(--padding-default) var(--padding-between-items);
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
}

#right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  z-index: 1000;
}

.fabs {
  height: 100vh;
  padding-left: var(--padding-default);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--padding-default);
  justify-content: center;
}

.fab {
  padding: var(--padding-between-items);
  background-color: var(--fab);
  color: var(--on-fab);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--medium);
  border: none;
  border-top-left-radius: 1.5625rem;
  border-bottom-left-radius: 1.5625rem;
  box-shadow: -0.3125rem 0.625rem 1.25rem -0.3125rem rgba(89, 45, 7, 0.3);
  -webkit-box-shadow: -0.3125rem 0.625rem 1.25rem -0.3125rem rgba(89, 45, 7, 0.3);
  -moz-box-shadow: -0.3125rem 0.625rem 1.25rem -0.3125rem rgba(89, 45, 7, 0.3);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.fab:hover {
  background-color: var(--fab-hover);
  color: var(--on-fab-hover);
}

.fab-icon {
  width: 28px;
}

.fab-text, .back-desktop {
  display: none;
}

/* States of all links */
a:link, a:visited, a:active, a:hover {
  text-decoration: none;
}

.back-desktop {
  position: absolute;
  bottom: 0;
  padding: 0;
  padding-left: var(--padding-default);
  z-index: 10;
  width: 100%;
  text-align: center;
}

/* Styles of material icons */
.material-symbols-rounded, .material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 600,
  'GRAD' 0,
  'opsz' 24
}