:root {
  --myblack: #190608;
  --mydarkred: #6A0000;
  --myred: #A50000;
  --mypink: #E0576C;
  --mylightpink: #FFB6C1;
  --mywhite: #FFFFFF;
}

@font-face {
    font-family: "Eroded";
        src: url("../Fonts/Eroded/ERODED\ PERSONAL\ USE.ttf") format(truetype);
}
@font-face {
    font-family: "Funkrocker";
        src: url("../Fonts/Funkrocker/Funkrocker.otf") format(opentype);
}
@font-face {
    font-family: "Hit me, punk!";
        src: url("../Fonts/Hit\ me\,\ punk!/Hit me, punk! 01.ttf") format(truetype);
}
@font-face {
    font-family: "Hit me, punk! reverse";
        src: url("../Fonts/Hit\ me\,\ punk!/Hit me, punk! 03.ttf") format(truetype);
}
@font-face {
    font-family: "Punk kid";
        src: url("../Fonts/Punk\ kid/punk kid.ttf") format(truetype);
}
@font-face {
    font-family: "Punktype";
        src: url("../Fonts/Punktype/Punktype.ttf") format(truetype);
}
@font-face {
    font-family: "Leander";
        src: url("../Fonts/leander/Leander.ttf") format(truetype);
}
@font-face {
    font-family: "Metropolis";
        src: url("../Fonts/Metropolis/Metropolis-Regular.otf") format(truetype);
}










/* Generic styles */
body {
    background-image: url(../Backgrounds/Background.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.container {
/*First number in margin sets top and bottom, while second sets both sides. 
  Auto will just make sure it stays centered.*/
margin: 0 auto;
display: grid;
grid-gap: 20px;
/*Grid template columns: sets width of each column in order for the grid*/
grid-template-columns: 1fr 200px 4fr 200px 1fr;
/*Grid template rows: auto for row 1, auto for row 2, and then row 3 fills the rest of the space.
  This is how the blinkies are sitting under the nav.*/
grid-template-rows: auto 78px auto auto 1fr;
}

nav, main, footer {
    background-color: var(--myblack);
    border: var(--myred) 4px solid;
    border-radius: 0.25cap;
    font-family: "Leander";
}

main {
    grid-row: 3 / 6;
    grid-column: 3 / 4;
    height: max-content;
    color: var(--mylightpink);
    padding: 50px;
}

main h1 {
    font-family: "Funkrocker";
    color: var(--mypink);
    font-size: 40px;
    margin-top: 0px;
}










/* Website header styles */
header {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 1 / 6;
    text-align: center;
    height: 230px;
    font-size: xx-large;
    font-weight: bolder;
    /* width: 1350px; */
}

header h1 {
    /* position: absolute; */
    /* top: -40px; */
    color: var(--mywhite);
    padding: none;
    font-family: "Hit me, punk!";
    font-size: 7vw;
    transform: rotate(5deg) translateY(-20px);
    text-wrap: nowrap;
}










/* Topnav styles */
.topnav {
    grid-row: 2 / 3;
    grid-column: 3 / 5;
    color:var(--mypink);
    text-align: center;
    position: relative;
}

.topnav ul {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    padding: 0px;
}

.topnav ul li {
    /* flex: 1; */
    width: 100px;
}

.topnav a {
    text-decoration: none;
    font-size: x-large;
    color: var(--myred);
    display: block;
    font-family: "Funkrocker";
    position: relative;
    z-index: 20;
}

.topnav a .topnavitem {
    transform: rotate(0deg) scale(1);
    transition: transform 0.1s ease-out;
    display: block;
}

.topnav a:hover .topnavitem {
    color: var(--mylightpink);
    z-index: 20;
    transform: rotate(-7deg) scale(1.4);
}

@keyframes textboxtophover {
    from {transform: rotate(-20deg) scale(1);}
  to {transform: rotate(-10deg) scale(1.1);}
}
@keyframes textboxbottomhover {
    from {transform: rotate(0deg) scale(1);}
  to {transform: rotate(-10deg) scale(1.1);}
}

.topnav a:hover::before {
    background-image: url("../Images/Text box top.PNG");
    content: "";
    display: inline-block;
    width: 233px;
    height: 109px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -32px;
    left: -72%;
    z-index: -1;
    animation-name: textboxtophover;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.topnav a:hover::after {
    background-image: url("../Images/Text box bottom.PNG");
    content: "";
    display: inline-block;
    width: 250px;
    height: 109px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -32px;
    left: -72%;
    z-index: -2;
    animation-name: textboxbottomhover;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}










/* Sidenav styles */
.sidenav {
    grid-row: 4 / 5;
    grid-column: 2 / 3;
    height: max-content;
    justify-content: left;
}

.sidenav h3 {
    margin: 25px;
    font-weight: bold;
    font-size: x-large;
    color: var(--mypink);
    font-family: "Funkrocker";
}

.sidenav ul {
    list-style-type: none;
    padding: 0 25px;
    line-height: 30px;
}

.sidenav a {
    text-decoration: none;
    color: var(--mylightpink)
}

#myfavoritesdropdowncontent {
    font-size: small;
    line-height: 150%;
}
#myfavoritesdropdowncontent a {
    color: var(--mypink);
}

#dragongladiatorsdropdowncontent {
    font-size: small;
    line-height: 150%;
}
#dragongladiatorsdropdowncontent a {
    color: var(--mypink);
}

#fancharactersdropdowncontent {
    font-size: small;
    line-height: 150%;
}
#fancharactersdropdowncontent a {
    color: var(--mypink);
}

.collapsed {
    height: 0px;
    display: none;
}












/* Blinkies styles */
.blinkies {
    grid-row: 5 / 6;
    grid-column: 2 / 3;
    height: fit-content;
}

.blinkies img {
    width: 100%;
    height: 100%;
    object-fit:contain;
    object-position: top;
    max-height: 40px;
    padding-bottom: 10px;
}










/* Homepage styles */

.homepagesona {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    height: 355px;
    position: relative;
}

.homepagesonaimg {
    width: 420px;
    position: absolute;
    z-index: 10;
    top: -155px;
    left: -65px;
}

.homepagesonabg {
    width: 420px;
    position: absolute;
    z-index: -10;
    top: -155px;
    left: -65px;
}

.indexmanifestolink {
    color: var(--mypink);
    font-size: 25px;
    display: inline-block;
    padding: 20px 80px 20px 80px;
    text-align: center;
}

.indexmanifestolink a {
    font-family: "Funkrocker";
    text-decoration: none;
    color: var(--myred);
}

.indexdisclaimer {
    color: var(--myred);
    font-size: 12px;
    display: inline-block;
    padding-left: 80px;
    padding-right: 80px;
}

.ocotd {
    font-family: "Hit me, punk!";
    grid-row: 3 / 4;
    grid-column: 4 / 5;
    color: var(--mypink);
    padding: none;
    position: relative;
    text-align: center;
    font-size: 25px;
    text-wrap: nowrap;
    height: 200px;
}

.ocotdh2 {
    color: white;
    position: absolute;
    left: 0px;
    top: 0px;
    transform: rotate(0deg) scale(1);
    transition: transform 0.1s ease-out;
}

.ocotdsticker {
    width: 250px;
    position: absolute;
    left: -20px;
    top: 25px;
    transform: rotate(0deg) scale(1);
    transition: transform 0.1s ease-out;
}

.ocotd:hover .ocotdh2 {
    transform: rotate(-5deg) scale(1.3);
    transition: transform 0.1s ease-out;
}

.ocotd:hover .ocotdsticker {
    transform: rotate(5deg) scale(1.3);
    transition: transform 0.1s ease-out;
}













/* About --> Manifesto page styles */
#manifestobox {
    position: relative;
    padding: 30px 25px;
    color: var(--mypink);
    width: fit-content;
    z-index: 10;
}

.manifestotextbox {
    position: absolute;
    width: 600px;
    top: -80px;
    left: -115px;
    z-index: -10;
}

#websitemanifestoheader {
    color: var(--mypink);
    font-family: "Hit me, punk! reverse";
    font-size: 70px;
    font-weight: 700;
    display: inline-block;
}

#manifesto {
    color: var(--mylightpink);
    font-weight: bolder;
    font-size: 30px;
}

#noun {
    color: var(--mypink);
    font-weight: light;
    font-size: 20px;
    padding-left: 70px;
}

#manifestobody {
    padding-top: 50px;
}

#manifestoh3 {
    color: var(--mypink);
    font-family: "Funkrocker";
    font-size: 30px;
}

#manifestobodytype {
    display: inline-block;
    color: var(--mylightpink);
    padding-left: 50px;
    padding-right: 50px;
}










/* Library page styles */
.readinggoalheader {
    color:var(--mypink);
}

.readinggoaltext {
    color: var(--mypink);
}

.reviewspoilers {
    color: var(--myred)
}

.booklogentry {
    background-color: var(--myblack);
    border: var(--myred) 4px solid;
    border-radius: 0.25cap;
    padding: 30px;
    margin-bottom: 20px;
}

.currentlyreading {
    min-height: 230px;
}

.reviewless {
    min-height: 170px;
}

.booklogentry img {
    width: 100px;
    margin: 0px 30px 10px 0px;
    float: left;
}

.booklogentry h1 {
    font-family: "Hit me, punk! reverse";
    color: var(--mypink);
}

.booklogentry h2 {
    font-size: 30px;
    margin: 0px;
    color: var(--mypink);
}

.booklogentry h3 {
    font-size: 20px;
    color: var(--mylightpink);
    margin: 0px;
}

.booklogentry .finishedtext {
    color: var(--mypink);
}

.booklogentry .showreview {
    color: var(--myred);
    text-decoration: none;
}

.booklogentry .showreview:hover {
    color: var(--mylightpink);
    cursor: pointer;
}

.reviewcontent {
    font-family: "Metropolis";
    font-size: 15px;
}








/* OC page styles */
.ocpagebody {
    background-color: var(--myblack);
    border: var(--myred) 4px solid;
    border-radius: 0.25cap;
    font-family: "Metropolis";
    font-size: 15px;
    grid-row: 3 / 6;
    grid-column: 3 / 5;
    height: max-content;
    color: var(--mylightpink);
    padding: 50px;
    line-height: 25px;
}

.ocpagebody h2 {
    color: var(--mypink);
    font-family: "Hit me, punk! reverse";
    font-size: 70px;
    font-weight: 700;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 0px;
}

.ocpagebody h3 {
    color: var(--myred);
    font-family: "Leander";
    margin-top: 0px;
    margin-bottom: 50px;
}

.oclinksticker {
    width: 300px;
}

.ocpagecover {
    grid-column: 1 / 3;
    width: 100%;
}

.ocpageartgallery {
    grid-gap: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    float:left;
    width: 40%;
    margin: 10px;
    padding: 20px;
}

.ocpageartgalleryartblock {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: inline-block;
}

.ocpageartgalleryartblock img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ocpagebodyheader {
    color: var(--mypink);
    font-family: "Funkrocker";
    padding-bottom: 10px;
    display: inline-block;
    font-size: 20px;
}

.ocpagequestioncategory {
    color: var(--mypink);
    font-family: "Funkrocker";
    font-size: 20px;
}

.ocpagequestionanswer {
    color: var(--mylightpink);
}

.ocpinterestboard {
    border-color: var(--myblack);
    width: 200px;
    padding: 0px;
}

.ocpagedisclaimer {
    color: var(--myred);
    font-size: 15px;
}





.leftsidebar {
    grid-row: 1 / 7;
    grid-column: 1 / 2;
    position: relative;
}

.heartsticker1 {
    position: absolute;
    width: 160px;
    top: 250px;
    left: 50px;
    transform: rotate(-10deg);
}

.rightsidebar {
    grid-row: 1 / 7;
    grid-column: 5 / 6;
    position: relative;
}

.skullsticker1 {
    position: absolute;
    width: 250px;
    top: 600px;
    right: 30px;
    transform: rotate(10deg);
}

.heartsticker2 {
    position: absolute;
    width: 100px;
    top: 270px;
    right: 30px;
    transform: rotate(10deg);
}

.flicksticker1 {
    position: absolute;
    width: 100px;
    left: 210px;
    top: 120px;
}

.splatsticker1 {
    position: absolute;
    width: 200px;
    left: 90px;
    top: 550px;
}

.flicksticker2 {
    position: absolute;
    width: 300px;
    left: -140px;
    top: 50px;
}

.heartsticker3 {
    position: absolute;
    width: 50px;
    top: 700px;
    right: 410px;
    transform: rotate(-15deg);
}










/* Footer styles */
footer {

    grid-row: 6 / 7;
    grid-column: 2 / 5;
    height: 30px;
    color: var(--mypink);
    place-content: center;
    text-align: center;
    place-items: center;
    font-size: x-small;
    padding: 10px;
    margin-bottom: 60px;
}

.bounce {
    transform: translateY(0px);
    transition: transform 0.3s ease-out;
}

.bounce:hover {
    transform: translateY(-10px);
}