:root {
    --black: #151d28;
    --darkest-color: #83464e;
    --dark-color: #c99b91;
    --light-color: #a0b7da;
    --lightest-color: #e0e07d;
}

html {
  scroll-behavior: smooth;
}



::selection {
    background: #83464e95;
}

a {
    color: var(--lightest-color);
    text-decoration: none;
    padding-left: 1rem;

}

a::before {
    content: '⬥ ';
}

a:hover {
    color: #c2c43c;
}

blockquote {
    border-left: var(--lightest-color) double 4px;
    padding: 0.8rem 1.5rem 0.8rem 1.5rem;
    border-radius: 4px;
    background-color: #83464e31;
}


summary:hover {
    cursor: pointer;
}

summary::before {
    content: "❥ ";
}

summary:hover {
    color:#b37e71;
}

summary::marker {
    content: "";
}

body {
    background-image: url(ottoman-tile.webp);
    color: var(--dark-color);
    font-size: 1.1rem;
    font-family: "Lora";
    font-weight:300;
    caret-color: #ffffff00;
}

#nav {
    display: block;
    width: 15rem;
    height: max-content;
    position: fixed;
    top: 7rem;
    left: 4vw;
    border-radius: 8px;
    background-color: var(--black);
    border: var(--darkest-color) double 4px;
}

.articles {
    padding: 1rem 1rem 1rem 1.2rem;
    text-align: center;
}

details {
    text-align: left;
    padding-bottom: 0.5rem;
}

#home {
    font-family: "Lora";
    padding: 0.7rem;
    font-size: 1rem;
    background-color: var(--dark-color);
    border: none;
    border-bottom: var(--darkest-color) ridge 3px;
    width: 100%;
    height: max-content;
    color: var(--black);
    font-weight: 600;
    transition: all 0.1s;
}

#home:hover {
    background-color: var(--light-color);
     cursor: pointer;
}
#home-mobile {
    font-family: "Lora";
    padding: 0.5rem 0.8rem 0.5rem 0.8rem;
    margin: 1rem;
    font-size: 1rem;
    border-radius: 4px;
    background-color: var(--dark-color);
    border: none;
    border: var(--darkest-color) ridge 2px;
    height: max-content;
    color: var(--black);
    font-weight: 600;
    transition: all 0.1s;
}

#articles-mobile {
    background-color: #83464e41;
}

#nav-mobile {
    display:none;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    width: min(70%, 50rem);
    background-color: var(--black);
    padding: 0rem;
    border: var(--dark-color) double 5px;
    border-radius: 5px;
    text-indent: 1rem;
    position: relative;
    left:5rem;
}

h1 {
    color: var(--light-color);
    text-indent: 0;
}

h2 {
    text-indent: 0;
    font-weight: 300;
}

.image {
    display: block;
    margin: auto;
    margin-bottom: 0.3rem;
    width: 30rem;
    border-style: solid solid solid double;
    border-width: 2px 2px 2px 5px;
    border-radius: 7px;
}


.poast {
    padding: 0rem 3rem 0 3rem;
    margin: 1rem;
    height: 42rem;
    overflow-y: hidden;
    position: relative;
    overflow-x:hidden;
}

.gradient {
    content: '';
    position: absolute;
    inset: 0 0 0 0;
    background-image: linear-gradient(#00000000 80%, var(--black) ); 
    caret-color: #ffffff00;
    
}

.footer {
    display: flex;
    border-style: ridge;
    border-width: 2px 0 4px 0;
    padding: 0;
    margin: 0;
    margin-bottom: 0.2rem;
    
}

.keepreading {
  height: 3rem;
  width: 8rem;
  padding: 0.6rem;
  text-align: left;
  clip-path: ellipse(95% 95% at 0 50%);
  background: var(--dark-color);
  color: var(--black);
  font-family: "Lora";
  font-size: 0.9rem;
  font-weight: bold;
  border: none;
  transition: all 0.2s;

}

.keepreading:hover {
    background-color: #bed8ff;
     cursor: pointer;
}


.date {
    color: var(--light-color);
    font-family: 'Jacques Francois';
    padding: 0.9rem 0 1.1rem 0;
    height: 1rem;
}

.text-yellow {
    color: var(--lightest-color);
}

.text-red {
    color:#be4757;
}

.text-blue {
    color:var(--light-color);
}

.text-green {
    color: #53af72;
}

.text-black {
    color:#7b7e82;
}

.question {
    color: var(--light-color);
    text-indent: 0rem;
    font-size: large;
    font-family: 'Lexend';
}

.answer {
    padding: 1rem 1rem 1rem 1.5rem;
    margin-left: 0.5rem;
    background-color: #83464e31;
    text-wrap: pretty;
    border-radius: 4px;
}

.anonask {
    background-color: #7ba4e146;
    padding: 1.3rem 2rem 1.3rem 2rem;
    position: relative;
    border-radius: 4px;
    width: 80%;
    left:4%;
}

.anonask::before {
    content: 'Anon asks: ';
    color: var(--light-color);
}

.anonask::after {
	content: '';
	position: absolute;
	right: 0px;
	top: 70%;
	width: 0;
	height: 0;
	border: 31px solid transparent;
	border-left-color: #7ba4e146;
	border-right: 0;
	border-bottom: 0;
	margin-top: -15.5px;
	margin-right: -31px;
}

@media screen and (max-width: 1000px) {
#nav {
    display: none;
}
#nav-mobile {
    display: block;
}

body {
    font-size: 1rem;
}

.image {
     width: min(100%, 30rem);
}

#tierlist {
   width: 70vw;
}


.main {
    width: 95%;
    left:0;
}

.poast {
    padding: 0rem 1.5rem 0 1.5rem;
    margin: 0.5rem;
}

h1 {
    font-size: 1.7rem;
}

.anonask::after {
    right: 1px;
}
}