/* This is the main file that contains all the styling of the website */
/* THIS STYLSHEET SHOULD BE PRESENT IN ALL PAGES AND THE STYLING HERE SHOULD APPLY GLOBALLY */

/* Getting Fonts */
@font-face {
  font-family: 'Nasalization';
  src: url('/res/fonts/Nasalization Rg.otf') format(opentype);
}

/* This :root object allows to create variable for elements in css, such as colors, fonts, gradients, etc. It also allows JS to interact with css */
:root {
  /* COLORS */
  --navy-blue: rgb(0, 11, 78);
  --GPAL-blue: #00aacb;
  --GPAL-blue-transparent: rgba(0, 170, 203, 0.1);
  --grey-text: rgb(215, 215, 215);
  --grey-background: rgb(30, 30, 30);
  --grey-transparent-background: rgba(5, 9, 20, 0.65);
  --blue-gradient: linear-gradient(
    135deg,
    rgb(0, 230, 255),
    rgb(0, 170, 255),
    rgb(0, 92, 255)
  );
  --blue-gradient-2: linear-gradient(
    135deg,
    rgb(54, 235, 255),
    rgb(54, 188, 255),
    rgb(54, 125, 249)
  );
  --gold-gradient: linear-gradient(135deg, gold, orange, rgb(255, 149, 0));
  --dark-background-gradient: linear-gradient(65deg, rgb(14, 13, 18), rgb(1, 6, 39));
  --gray-gradient: linear-gradient(30deg, rgb(255, 255, 255), rgb(200, 200, 200));
  --black-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
  --gray-down-gradient: linear-gradient(0deg, rgb(30, 30, 30), rgb(25, 25, 25));

  /* FONTS */
  --header-font: 'Nasalization', sans-serif;
  /* --header-font: Georgia, 'Times New Roman', Times, serif; */
  /* --accent-font: Consolas, 'Courier New', monospace; */
  --accent-font: Arial;
  --content-font: Verdana, Geneva, sans-serif;
}

/* SETUP Styling */
* {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  transition: 0.25s all;
}

ul {
  padding-left: 0px;
  list-style-type: none;
}

body {
  font-family: var(--content-font);
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--header-font);
}

/* NAVBAR */

.navbar {
  background: var(--grey-transparent-background) !important;
  backdrop-filter: blur(5px);
  color: white;
  border-bottom: 1px solid var(--GPAL-blue);
}

.navbar-brand {
  font-family: var(--header-font);
  font-weight: bold;
  color: white;
  letter-spacing: 5px;
  text-decoration: none;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: VAR(--GPAL-blue);
}

.nav-link {
  color: var(--grey-text);
  border: solid 1px transparent;
}

.nav-link:hover {
  color: var(--grey-text);
  border-bottom: solid 1px var(--GPAL-blue);
}

.search-btn {
  color: white;
  border: 1px solid white;
  border-radius: 10px;
}
.search-btn:hover {
  color: var(--GPAL-blue);
  border-color: var(--GPAL-blue);
}

.navbar-text {
  color: white;
}

footer {
  background: var(--grey-background);
  color: white;
  border-top: 1px solid var(--GPAL-blue);
}

footer a {
  color: var(--GPAL-blue);
}

footer a:hover {
  color: white;
}

.robot-layer {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.robot-layer::before {
  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url('/res/images/mascotbg.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover; /* Keeps the robot from stretching */
  opacity: 0.25;
  z-index: -1; /* Places it above the body but below text */
  pointer-events: none; /* Allows you to click "through" the image */
}

.content-front {
  position: relative;
  z-index: 2; /* Ensures text stays on top and readable */
}