@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap");
:root {
  --feminism-purple: #5B197B;
  --blue-violet: #5B197B;
  --soap: #DDCAED;
  --ghost-white: #F8F8FF;
  --anarchy: #DD0207;
}

:root {
  --gradient-direction: to right;
}

.rainbow-gradient, .pride-gradient, .gay-radient {
  background: linear-gradient(var(--gradient-direction), rgb(237, 34, 36), rgb(243, 91, 34), rgb(249, 150, 33), rgb(245, 193, 30), rgb(241, 235, 27) 27%, rgb(241, 235, 27), rgb(241, 235, 27) 33%, rgb(99, 199, 32), rgb(12, 155, 73), rgb(33, 135, 141), rgb(57, 84, 165), rgb(97, 55, 155), rgb(147, 40, 142));
}

.rainbow-poc-gradient {
  background: linear-gradient(var(--gradient-direction), rgb(0, 0, 0), rgb(54, 35, 18), rgb(120, 79, 23), rgb(181, 63, 27), rgb(237, 34, 36), rgb(243, 91, 34), rgb(249, 150, 33), rgb(245, 193, 30), rgb(241, 235, 27) 48%, rgb(241, 235, 27), rgb(241, 235, 27) 52%, rgb(99, 199, 32), rgb(12, 155, 73), rgb(33, 135, 141), rgb(57, 84, 165), rgb(97, 55, 155), rgb(147, 40, 142));
}

.bisexual-gradient {
  background: linear-gradient(var(--gradient-direction), rgb(255, 0, 128), rgb(200, 37, 157), rgb(140, 71, 153), rgb(68, 46, 159), rgb(0, 50, 160));
}

.gay-man-gradient {
  background: linear-gradient(var(--gradient-direction), rgb(7, 141, 111), rgb(152, 202, 153), rgb(255, 255, 255) 45%, rgb(255, 255, 255), rgb(255, 255, 255) 55%, rgb(205, 208, 234), rgb(123, 173, 226) 70%, rgb(69, 76, 189), rgb(63, 26, 121));
}

.lesbian-gradient {
  background: linear-gradient(var(--gradient-direction), rgb(213, 44, 0), rgb(226, 150, 136), rgb(255, 255, 255) 45%, rgb(255, 255, 255), rgb(255, 255, 255) 55%, rgb(210, 127, 164), rgb(162, 2, 98));
}

.asexual-gradient {
  background: linear-gradient(var(--gradient-direction), rgb(0, 0, 0), rgb(81, 81, 80), rgb(163, 162, 160), rgb(209, 208, 208), rgb(255, 255, 255) 60%, rgb(255, 255, 255), rgb(255, 255, 255) 70%, rgb(185, 151, 185), rgb(101, 46, 129));
}

.pansexual-gradient {
  background: linear-gradient(var(--gradient-direction), rgb(255, 30, 140) 10%, rgb(255, 102, 57), rgb(255, 230, 29) 40%, rgb(255, 230, 29), rgb(255, 230, 29) 60%, rgb(87, 229, 98), rgb(31, 179, 253) 85%, rgb(31, 179, 253), rgb(31, 179, 253));
}

.trans-graient {
  background: linear-gradient(var(--gradient-direction), rgb(85, 205, 252), rgb(179, 157, 233), rgb(247, 168, 184), rgb(246, 216, 221), rgb(255, 255, 255) 45%, rgb(255, 255, 255), rgb(255, 255, 255) 55%, rgb(246, 216, 221), rgb(247, 168, 184), rgb(179, 157, 233), rgb(85, 205, 252));
}

.gay-bear-garient {
  background: linear-gradient(var(--gradient-direction), rgb(129, 69, 45), rgb(196, 88, 26), rgb(255, 219, 87), rgb(255, 251, 204), rgb(255, 255, 255), rgb(54, 54, 54), rgb(0, 0, 0));
}

:root {
  --text-shadow: -4px -4px 9px rgba(0, 0, 0, 0.75);
  --box-shadow: -4px -4px 28px -6px rgba(0, 0, 0, 0.75);
  --user-cover: url("https://ayhanerdm.web.app/dist/img/SelmaCvalda.png");
  --user-avatar: url("https://gravatar.com/avatar/8968d83ed7ecdfb62abd5d03b28ba34d?s=200");
}

input[type=checkbox] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.5em;
  height: 1.5em;
  border: 0.1em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type=checkbox]::before {
  content: "";
  width: 1em;
  height: 1em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color: currentColor;
}

input[type=checkbox]:checked::before {
  transform: scale(1);
}

input[type=checkbox] + input[type=checkbox] {
  margin-top: 1em;
}

input[type=checkbox]:disabled {
  color: #333;
  cursor: not-allowed;
}

select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  line-height: inherit;
  outline: none;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  border: 1px solid #333;
  padding: 0.5rem;
  border-radius: 0.25em;
}

select::-ms-expand {
  display: none;
}

select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: #333;
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

option {
  padding: 2rem;
}

div.status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(400px, 75vw);
  color: var(--ghost-white);
}
div.status div.status-body > p {
  font-size: 1.5rem;
  word-spacing: 0.02em;
  text-align: justify;
  margin-block-start: 0;
  margin-block-end: 1rem;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
div.status div.status-footer time {
  font-size: 1rem;
}
div.status div.status-footer time::before {
  content: "— ";
}

div.feeling {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-position: center;
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

div.feeling.angry {
  background: linear-gradient(45deg, rgb(125, 0, 0) 68%, rgb(255, 0, 0) 99%);
}

div.feeling.sad {
  background: linear-gradient(45deg, rgb(0, 3, 125) 68%, rgb(0, 6, 255) 99%);
}

div.feeling.gray {
  background: linear-gradient(45deg, rgba(128, 128, 128, 0.7207925406) 68%, rgb(255, 255, 255) 99%);
}

div.feeling.black {
  background: #000;
}

div.feeling.happy {
  background: linear-gradient(45deg, rgb(0, 125, 16) 68%, rgb(0, 225, 29) 99%);
}

div.feeling.complicated {
  background: linear-gradient(45deg, rgb(0, 255, 10) 6%, rgb(0, 10, 255) 50%, rgb(255, 0, 0) 98%);
}

dialog {
  border: none;
}

:root {
  --feminism-purple: hsl(280deg, 66%, 29%);
  --blue-violet: hsl(280deg, 66%, 29%);
  --soap: hsl(273deg, 49%, 86%);
  --ghost-white: hsl(240deg, 100%, 99%);
  --anarchy: hsl(359deg, 98%, 44%);
}

:root {
  --text-shadow: -4px -4px 9px rgba(0, 0, 0, 0.75);
  --box-shadow: -4px -4px 28px -6px rgba(0, 0, 0, 0.75);
}

@keyframes WidthZeroToHundred {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.login-modal {
  width: min(450px, 75vw);
  background: none;
  border: none;
}

dialog.login-modal {
  color: var(--ghost-white);
  text-shadow: var(--text-shadow);
}
dialog.login-modal .close-login-modal {
  cursor: pointer;
  font-size: 1.4rem;
}

.login-modal:not(dialog) {
  color: inherit;
}
.login-modal:not(dialog) .close-login-modal {
  cursor: pointer;
  font-size: 1.4rem;
  display: none;
}

div.login-form {
  width: min(450px, 75vw);
  outline: 1px solid lime;
}
div.login-form .login-modal {
  display: none;
}

div.login-modal-header {
  margin-bottom: 5px;
}
div.login-modal-header div.login-modal-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  width: 100%;
  color: inherit;
  text-shadow: inherit;
}
div.login-modal-header div.login-modal-title h1, div.login-modal-header div.login-modal-title h2, div.login-modal-header div.login-modal-title h3, div.login-modal-header div.login-modal-title h4, div.login-modal-header div.login-modal-title h5, div.login-modal-header div.login-modal-title h6 {
  display: inline;
}
div.login-modal-header div.login-modal-title * {
  margin-bottom: 0px;
}

div.login-modal-line {
  width: 100%;
  min-height: 5px;
  display: block;
  background-color: var(--soap);
  border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
}
div.login-modal-line .loading-bar {
  width: 100%;
  height: 5px;
  border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  background: var(--feminism-purple);
  animation: WidthZeroToHundred 0.5s alternate infinite;
}

div.login-modal-body {
  width: 100%;
  background-color: var(--ghost-white);
  padding: 1em;
  border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
}
div.login-modal-body div:not(:last-child) {
  margin-bottom: 10px;
}
div.login-modal-body .btn-outline-feminismpurple {
  --bs-btn-color: hsl(280deg, 66%, 29%);
  --bs-btn-border-color: hsl(280deg, 66%, 29%);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: hsl(280deg, 66%, 29%);
  --bs-btn-hover-border-color: hsl(280deg, 66%, 29%);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: hsl(280deg, 66%, 29%);
  --bs-btn-active-border-color: hsl(280deg, 66%, 29%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: hsl(280deg, 66%, 29%);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: hsl(280deg, 66%, 29%);
  --bs-gradient: none;
}

div.buttons {
  margin-bottom: 0px !important;
}

div.login-status {
  margin-bottom: 0 !important;
}
div.login-status :empty {
  display: none;
}
div.login-status div.alert {
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  text-shadow: none;
}
div.login-status div.alert a:where(a, :link, :visited, :hover, :active) {
  cursor: pointer;
  text-decoration: none;
}
div.login-status pre {
  margin-top: 10px;
  margin-bottom: 0;
  text-shadow: none;
}

div.login-debug :empty {
  display: none;
}

div.login-links {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: inherit;
  width: 100%;
}
div.login-links a:where(a, :link, :visited, :hover, :active) {
  cursor: pointer;
  color: inherit;
  text-shadow: inherit;
  text-decoration: none;
}

dialog.login-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.9);
}

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

::-webkit-scrollbar {
  display: none;
}

*:focus {
  /* border-bottom: 4px solid var(--soap); */
  /* outline: none; */
}

::selection {
  color: var(--ghost-white);
  background-color: var(--feminism-purple);
}

html {
  scroll-behavior: smooth;
  /* scroll-padding-top: 44px; */
}

body {
  margin: 0;
  padding: 0;
  background: var(--ghost-white);
  font-family: "Ubuntu Condensed", sans-serif;
  font-size: unset;
  font-weight: unset;
  line-height: unset;
}
body a:is(a, :link, :visited, :hover, :active) {
  cursor: pointer;
  color: black;
  text-shadow: inherit;
  text-decoration: none;
}

div.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--blue-violet);
  width: 0%;
  z-index: 3;
}

nav.navbar {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #333;
  color: var(--ghost-white);
  justify-content: center;
  align-items: center;
  gap: 0;
}
nav.navbar a, nav.navbar a:link, nav.navbar a:visited, nav.navbar a:hover, nav.navbar a:active {
  display: block;
  color: inherit;
  height: 100%;
  padding: 1em 0.6em;
  font-size: 1.2rem;
  text-decoration: none;
}
nav.navbar a:hover, nav.navbar a:focus {
  background-color: rgb(80, 79, 79);
  outline: none;
}
nav.navbar > a:not(:last-child) {
  /* border-right: 1px solid var(--ghost-white); */
}

div.fullscreen {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  padding: 3rem;
  z-index: 0;
}

div.landing-cover {
  background: rgba(0, 0, 0, 0.792) var(--user-cover);
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
div.landing-cover div.avatar {
  width: min(150px, 40vw);
  aspect-ratio: 1;
  background: var(--user-avatar);
  background-position: center;
  background-size: cover;
  border-radius: 0.2em;
  margin: 0;
}
div.landing-cover div.title {
  text-align: center;
  width: min(400px, 60vw);
  color: var(--ghost-white);
}
div.landing-cover div.title h1 {
  margin: 0;
  color: var(--ghost-white);
  font-size: 2.5rem;
}
div.landing-cover div.title h1 a:is(a, :link, :visited, :hover, :active) {
  cursor: pointer;
  color: inherit;
  text-shadow: inherit;
  text-decoration: none;
}
div.landing-cover div.title p {
  text-align: justify;
  color: var(--ghost-white);
  font-size: 1.2rem;
  margin-bottom: 0.2em;
}
div.landing-cover div.title p.pronoun {
  text-align: center;
  font-size: 1rem;
}
div.landing-cover div.title a {
  color: inherit;
}

div.links-page * {
  margin: 0;
  padding: 0;
}
div.links-page h2 {
  margin-bottom: 1em;
}
div.links-page ul {
  list-style: none;
  border: 1px solid #333;
  border-radius: 5px;
}
div.links-page ul li {
  position: relative;
  padding: 1em 1em;
}
div.links-page ul li i.fa-brands {
  margin-right: 1rem;
}
div.links-page ul li a::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
div.links-page ul li:not(:last-child) {
  border-bottom: 1px solid #333;
}

div.video {
  margin: 0;
  padding: 0;
}
div.video video {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: calc(100vh - 60.4px);
  z-index: 1;
}

/*# sourceMappingURL=style.css.map */