@import 'shared/variables.css';
@import 'shared/fonts.css';
@import 'shared/header.css';
@import 'shared/form.css';
@import 'shared/author.css';
@import 'shared/events.css';
@import 'shared/buttons.css';
@import 'shared/confirm.css';
@import 'login.css';
@import 'sidebar.css';

:root {
  font-family: 'Gotham Rounded';
  font-size: 16px;
  color: var(--color-text-light);
  --primary-col: #667eea;
  --primary-col-dark: #6d70ea;
  --header-font: "Nunito", sans-serif
}

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

body {
  background: white;
}

#app {
  height: 100vh;
}

.app-content{
  height: 100%;
  display: flex;
  background-color: #F6F7FB;
}

.inner-container{
  margin: 16px 10px;
  background-color: #F6F7FB;
}

.error-message {
  color: hsl(var(--color-danger-hue), 100%, 50%);
}

.required:after {
  content:" *";
  color: crimson;
}

.title_underline h1,
.title_underline h2,
.title_underline h3,
.title_underline h4,
.title_underline h5,
.title_underline h6 {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  position: relative;
  margin-bottom: 1.25rem;
  font-family: "Nunito", sans-serif;
}

.title_underline h1:before,
.title_underline h2:before,
.title_underline h3:before,
.title_underline h4:before,
.title_underline h5:before,
.title_underline h6:before{
  content: "";
  position: absolute;
  width: calc(100% - 16px);
  height: .25rem;
  border-radius: .25rem;
  bottom: -0.25rem;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border-bottom: .25rem solid var(--primary-col);
}