/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
:root {
	--bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: #898EA4;
  --accent: #0d47a1;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
}


main {
  position: relative;
  margin-bottom: 300px;
}


nav {
  width: 100%;
  position: sticky;
  left: auto;
  top: 0;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(5px);
  z-index: 1;
}

nav ul {
 list-style: none;
  max-width: 1000px;
  width: 100%;
  display: block;
  margin: 20px auto;
}

nav li {
  padding: 2px 10px;
  float: left;
}



.entries__block {
   border-bottom: 1px solid rgba(20, 20, 20, 0.5);
}

.alert {
  width: 100%;
  background: rgba(0,255,0, 0.3);
  border: 1px solid green;  
}

.alert--error {
  background: rgba(255,0,0, 0.3);
  border: 1px solid red;  
}

.votes {
   height: 190px; 
   clear: both;
   position: relative;
}

.votes div {
  width: 20%;
  float: left;
  font-size: 14px;
}

.votes div > select {
  width: 95%;
}

.votes form {
  clear: both;
  float: none;
}

.votes form + form {
  width: 250px;
  margin: 0 auto;
}

.votes form > input[type="submit"] {
  display: block;
  margin: 0 auto;
}

.votes__user {
  position: absolute;
  top: -15px;
  right: 10px;
}

.votes__accept {
  margin-top: 2px;
  background-color: green !important;
}

.toolbar{
  position: fixed;
  bottom: 0px;
  padding: 0;
  padding-bottom: 20px;
  left: 0;
  margin: 0;
  backdrop-filter: blur(5px);
  background: rgba(255,255,255,0.8);
  width: 100%;
}

.toolbar__container {
  width: 100%;
  max-width: 600px;
  margin: 0px auto;
}

.toolbar__prev, .toolbar__next {
  float: left;
  display: block;
  font-size: 16px;
  font-weight: bold;
  z-index: 10;
}


.toolbar__next {
  float: right;
  opacity: 0.4;
}