/* Style Guide

////////COLOURS\\\\\\\\\

URL: https://coolors.co/f60665-1c3144-00e8fc-ffba08-fff5f5

***CERISE***
Primary headers, branding, buttons
#F60665

***PRUSSIAN BLUE***
Dark background, dark text, Nav bar background, header/footer bar background,
#1C3144

***SNOW***
Light text
#FFF5F5

***SELECTIVE YELLOW***
Card background, containers, secondary headers
#FFBA08

***ELECTRIC BLUE***
hover, highlights, onclick
#00E8FC

///////FONTS\\\\\\\\\

***NAUTILUS***
Branding, Primary headers, button text, text that needs *flair*

***GARAMOND***
Font for anything else not listed above.

***HELVETICA***
Backup font for if above fonts fail to load

*/

/* General Styling */

@font-face {
  font-family: Nautilus;
  src: url(../fonts/Nautilus.otf);
}

@font-face {
  font-family: Garamond;
  src: url("../fonts/EBGaramond-VariableFont_wght.ttf");
}

body {
  background-color: #f5f5f5;
  font-family: Garamond, Helvetica;
  font-weight: bold;
  text-align: center;
}

.material-icons {
  cursor: pointer;
}

.d-inline-block {
  width: 150px;
  min-height: auto;
}

.navbar {
  padding: 0;
}

.container-fluid {
  background-color: #1c3144;
}

.hero-header {
  font-family: Nautilus;
  color: #f60665;
}

.light-container {
  background-color: lightgrey;
}

.sweet-button {
  background-color: #f60665;
  color: white;
  border-color: transparent;
  font-family: Nautilus;
}

.sweet-button-secondary {
  background-color: #1c3144;
  color: white;
  border-color: transparent;
  font-family: Nautilus;
}

.sweet-button:hover,
.sweet-button-secondary:hover {
  background-color: #00e8fc;
  color: #1c3144;
  border-color: transparent;
}

.delete-btn {
  background-color: red;
  color: white;
  border-color: transparent;
  font-family: Nautilus;
}

.content {
  margin-bottom: 100px;
}

.listItem {
  max-width: 250px;
  margin: auto;
}

/* footer {
  position: fixed;
  bottom: 0;
  width: 100%;
} */

.footer > .container {
  gap: 20px;
  padding: 8px;
  margin: 0;
  max-width: 100%;
  background-color: #1c3144;
}

/* login.html Specific Styling */

.btn-active {
  background-color: #00e8fc;
  color: #1c3144;
  border-color: transparent;
}

.btn-inactive {
  background-color: #1c3144;
  color: #f60665;
  border-color: transparent;
}

/* .login:active,
.hero-sign-up:active {
  background-color: #1C3144;
  color: #FFF5F5;
  border-color: transparent;
} */

.signup-box {
  background-color: #ffba08;
}

.selective-yellow {
  background-color: #ffba08;
}

.sit-center {
  text-align: center;
}

/* Main.html Specific Styling */

#event-container {
  padding: 2% 3%;
  margin-bottom: 10%;
  /* height: 75vh; <-- DO NOT RE-ENABLE THIS!!!*/
}

.footer-spacer {
  height: 5%;
}

legend {
  font-family: Nautilus;
  color: #1c3144;
}

.secondary-header {
  color: #ffba08;
}

.event-details {
  text-align: left;
}

.event-details b {
  font-family: Nautilus;
  font-weight: normal;
}

.center {
  text-align: center;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

/* event-page.html Specific Styling */

.nautilus {
  font-family: Nautilus;
}

.planner-tools {
  background-color: #1c3144;
  color: #f5f5f5;
  padding: 2%;
}

.planner-header {
  color: #f60665;
  background-color: #1c3144;
}

.code-container {
  background-color: #fff5f5;
  color: #1c3144;
  height: 50px;
}

.image-button {
  width: 60px; /* Set desired width */
  height: 65px; /* Set desired height */
  cursor: pointer;
  /*transition: filter 0.3s ease-in-out;*/
  text-shadow: #fff5f5;
}

/* .image-button:hover {
  filter: brightness(1) invert(1) sepia(1) saturate(3) hue-rotate(160deg); /* Changes color on hover 
} */

.create-button {
  background: url("/images/SweetSpot_CreateEventV2wb.svg") no-repeat center
    center;
  background-size: cover;
  transition: background 0.3s ease-in-out;
}

.create-button:hover {
  background: url("/images/SweetSpot_CreateEventV2wbHOVER.svg") no-repeat center
    center;
  background-size: cover;
}

.add-button {
  background: url("/images/SweetSpot_AddEvent.svg") no-repeat center center;
  background-size: cover;
  transition: background 0.3s ease-in-out;
}

.add-button:hover {
  background: url("/images/SweetSpot_AddEventHOVER.svg") no-repeat center center;
  background-size: cover;
}

.home-button {
  width: 80px;
  height: 80px;
  margin-top: -15px;
  cursor: pointer;
  background: url("/images/HomeV3.svg") no-repeat center center;
  background-size: cover;
  transition: background 0.3s ease-in-out;
}

.home-button:hover {
  background: url("/images/HomeV3HOVER.svg") no-repeat center center;
  background-size: cover;
}

.image-menu {
  width: 75px; /* Set desired width */
  height: 60px; /* Set desired height */
  background: url("/images/menu_icon.png") no-repeat center center;
  background-size: cover;
  background-color: #f60665;
}

.icon-text-align {
  vertical-align: text-top;
  margin-right: 1%;
}

.nav-shape {
  background-color: #1c3144;
  height: 80px;
  width: 160px;
  /* border-radius: 100px 100px 0 0 / 50px 50px 0 0; */
  /*border-radius: var(--x) var(--x) 0 0 / var(--y) var(--y) 0 0;*/
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  margin-left: auto;
  margin-right: auto;
  margin-bottom: -55px;
}

.modal-title {
  margin: 0 auto;
}