@font-face {
    font-family: 'Cormorant';
    src: url('Cormorant-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
  box-sizing: border-box;
    scroll-behavior: smooth;
  }

:root {
--primary: #1c1511;
--background: #d5c3b9;
--accent: #1c1511;
--opacity: rgba(0,0,0,.05);
--font: "Noto Sans", sans-serif;
--code: "Victor Mono", monospace;
--heading: "Cormorant", serif;
--italic: italic;
--bold: bold;
--border-radius: 0;
}

/* mobile first */
html, body {
  height: 100%;
  font-size: medium;
  }
body {
  margin: 0 auto;
  padding: 0;
  font-family: var(--font);
  line-height: 1.5;
  letter-spacing: .01em;
  background-color: var(--background);
  color: var(--primary);
  max-width: 1600px;
}

/***************BASICS*****************/

a:link, a:visited {
color: var(--accent);
text-decoration: none;
transition: .5s;
border-bottom: 1px solid;
}
a:hover, a:active {
color: var(--background);
background-color: var(--accent);
transition: .25s;
border: 0;
}

h1,h2,h3 {font-family: var(--heading); margin: 1rem; padding: 0; font-weight: bold;}
h1 {font-size: 2rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.75rem;}

p {margin: 1rem;}

blockquote {
  background-color: var(--opacity);
  border: 1px solid var(--accent);
  margin-block: .5rem 2rem;
  margin-inline: 1rem;
  padding: 0;
  font-family: var(--heading);
  font-size: 1.5rem;
  border-radius: var(--border-radius);
  }
blockquote p:first-of-type:before {content: "❝ ";}
blockquote p:last-of-type:after {content: " ❞";}

hr {border-color: var(--accent);inline-size: 75%;margin: 1rem auto;}
div {break-inside: avoid;}
i,em {font-style: var(--italic);}
b,strong{font-weight: var(--bold);}
code,pre {font-family: var(--code);}
img {max-width: 100%;}
a:has(img):hover,a:has(img):active {background-color: transparent;}

ul,ol {margin: 1rem; padding: 0;}
li {list-style-type: none;}



/***************PRETTY/DETAILS*****************/

.index-image {
block-size: 100px;
border: 1px solid var(--accent);
float: left;
margin-inline: 1rem;
border-radius: var(--border-radius);
border: 1px solid var(--accent);
}

.bunnyList .bunny {
border: 2px solid var(--accent);
background-color: var(--opacity);
margin: 1rem;
border-radius: var(--border-radius);
}

.bunny h3 {
font-family: var(--font);
font-size: 1.25rem;
}

.fandomEtc {margin-block-end: 0;}
.bunnyImage {margin: .25rem 1rem;}
.templateContent {margin-block-start: 0;}

.bunny img {max-inline-size: 90%;max-block-size: 500px;}
.bunny a {word-wrap: break-word;}
.tagList li,.linkList li {white-space: nowrap;}

.cta {
border: 1px solid var(--accent);
border-width: 1px 1px 1px 10px;
margin: 0 1rem;
background-color: var(--opacity);
font-family: var(--heading);
font-size: 1.5rem;
font-weight: bold;
}

p.button {
text-align: center;
margin: 0 1rem;
}

.byline {font-size: .8rem;}
.byline img {block-size: 1em; vertical-align: baseline;}
.byline a:has(img):hover {background-color: var(--accent);}

.content:has(.p-name) .page-title {display: none;}

.gif {
  display: block;
  margin-inline: auto;
  border: 2px solid var(--accent);
}

/***************LAYOUT*****************/

header {
margin: 0;
padding-block: 8vw;
block-size: 30vw;
text-align: center;
background-image: linear-gradient(var(--accent), var(--accent)), url(/img/deanbunny02.jpg);
background-blend-mode: screen;
background-position: center;
background-size: cover;
}
header h1 {
  margin: 0;
  padding: 0;
  font-size: 6vw;
  font-weight: normal;
}
header h1 a:link,
header h1 a:visited {
  border: 0; 
  color: var(--background);
}
header p {
  margin: 0;
  padding: 0;
  font-family: var(--heading);
  font-size: 4vw; 
  color: var(--background);
}

.adult-content,
footer {
background-color: var(--accent);
color: var(--background);
margin: 0;
padding: .25rem 0;
}
.adult-content p {margin: 0 1rem; text-align: center; font-weight: bold; text-transform: uppercase;}
.adult-content a:link,.adult-content a:visited,
footer a:link, footer a:visited {color: var(--background); border-bottom: 1px solid var(--background);}
.adult-content a:hover,.adult-content a:active,
footer a:hover, footer a:active {color: var(--accent);background-color: var(--background); border: none;}
footer {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
}
footer p {margin: .25rem 1rem; font-size: .8rem;}

main {
margin: 1rem;
padding: 0;
}

.tags,
.content,
.info {
margin: 0 0 1rem 0;
padding: 0;
}

.tags a:link,.tags a:visited,
.info a:link,.info a:visited {
border: 0;
}

.content h2 {
font-size: 2rem;
}

.tagList, .linkList {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: .25rem 1rem;
}

/* desktop */
@media only screen and (min-width: 768px) {
  
main {
margin: 1rem 1rem 0 1rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 1rem;
}

.content {
flex-grow: 2;
}

.tagList, .linkList {
flex-direction: column;
}
    
}