/* ----- fonts and body ----- */
@font-face {
    font-family: "Cantarell";
    src: url("/storage/fonts/Cantarell-VF.otf");
}
body {
    background: url(images/bgsmall.JPG);
    background-position: top;
    background-color: rgb(215, 246, 255);
    background-repeat:repeat-y;
    color: darkred;
    font-family: "Cantarell", "Nimbus Sans", sans-serif;
    font-size: 20px;
    position: relative;
    line-height: 1;
}

:focus {
    outline:4px dashed #35c264;
}
a {
    color: #7e4bd5;
    text-decoration: underline 2px mediumorchid;
}
a:visited {
    color: #db4ea5;;
}


/* ----- header things ----- */
header {
    text-shadow: 2.5px 2.5px 0px rgba(255,205,219,0.66);
    color: #c11f5a;
    font-size: 100px;
    line-height: 1.5;
    border-bottom: 2px rgb(255, 207, 237);
    border-right: 2px rgb(255, 207, 237);
    padding-left: 10px;
    padding-right: 10px;
    max-width: fit-content;
    max-height: fit-content;

}
.header-block {
    font-size: 80px;
}
.header-block__text {
    font-size: 1em;
}
@media screen and (max-width: 800px) {
    .header-block {
        font-size: 50px;
        display: flex; /*justify content only works on block elements(?)*/
        
        justify-content: center;
    }
    .header-block__text {
        text-align: center;
    }
}
hr {
    color:#f03e7f;
    background: url("/storage/images/ribbonbigline.png") center repeat no-repeat;
    height: 24px;
    border: 0px;
}
h1, h3 {
    line-height: 1;
    color: white;
}
h3 {
    font-size: 25px;
    margin-bottom: 2px;
    color: bisque;
    text-shadow: 2px 2px 3px aliceblue;
}
h2 {
    line-height: 1;
    color: white;
    text-decoration: underline;
    text-align: right;
    padding-right: 27%;
    margin-top: 30px;
    margin-bottom: 0px;
}
#purple-header {
    color: #c29bfb;

}
#yellow-header {
    color: #fbde9b;
}
#pink-header {
    color: #fdcde1;
}
#green-header {
    color: #76ee94  ;
}
#blue-header {
    color: #c4fff1;
}
.header-name {
    border-bottom: 3px solid white;
    margin-left: 50%;
    margin-bottom: 30px;
    margin-right: 70px;
    border-image: linear-gradient(to right, transparent, white 20%) 1;
}



main {
    letter-spacing:+0.03em;
    font-size: 22px;
    background-color: rgb(50, 62, 90);
    color: #f0f4e0;
    padding: 10px 40px 20px 40px;
    border: 2px solid #e1f0cb;

    
}
@media screen and (max-width:540px) {
    main {
        font-size: 20px;
    }
}
.layout {
    border: 100px black;
    max-width: 1103px;
    margin:0 auto 200px;
}

.layout__columns {
    margin-top: 5px;
}
@media screen and (min-width: 800px) {
    .layout__columns{
        
    }
}


/* ----- navigation layout ----- */
.left-nav {
    align-items: center;
    min-width: 170px;
    margin-right: 22px;

    justify-content: center;
}
@media only screen and (min-width: 800px) {
    .left-nav {
       align-items: start;
       display: flex;
    }
}
.left-nav__list {
    list-style-type: none;
    padding: 0;
    display: flex;
    
    justify-content: center;
}
.left-nav__item {
    height: 81px; /*if we add non nav items in the future, this could be a problem.*/
    width: 163px;
}
.left-nav__block {
    background-color: #fff4ed; 
    border-top: 14px dotted;
    border-bottom: 14px dotted;
    border-color: #ffb2da;
    margin: 2px 2px 17px 4px;
    position: relative;
    border: 14px solid;
    border-image: url("/storage/images/ribbonbuttonopenfixed.png") 14 / 40px;
    /*display: flex; make ribbon appear below text, looking like an ornamental gift or cake*/
    image-rendering: pixelated;
    background-image: url("/storage/images/argylepattern.png");
    border-radius: 1px;
    background-clip: padding-box;
    background-position-y: -3px;
    height: 70%;
}

.left-nav__link, .left-nav__link:visited {
    padding: 4px;
    display: block;
    color: #c40432;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 2px 2px 2px white, -2px -2px 2px aliceblue;
    margin-top: 5px;
}
.left-nav__spooky-block {
    background-color: #f8fffd;
    border-top: 4px dotted;
    border-bottom: 4px dotted;
    border-color: #ffb2da;
    margin: 2px 2px 12px 4px;
    position: relative;
    transition: background-color 2s, border-top 2s, border-bottom 2s, border-color 2s;
}
.left-nav__spooky-block:hover {
    background-color: black;
    border-top: 4px solid;
    border-bottom: 4px solid;
    border-color: #3EE77B;
}
.left-nav__spooky-link, .left-nav__spooky-link:visited {
    padding: 4px;
    display: block;
    color: #ff171b;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    transition: color 2s;
}
.left-nav__spooky-link:hover, .left-nav__spooky-link:visited:hover {
    color: #3EE77B;
}
/*
.left-nav__item:focus {
    outline:4px solid #ff78a3;
}
*/

.construction {
    max-width: 80%;
    margin: auto;
    height: 187px;
    color: #e0bfcc;
    background-color: #41175a;
    padding: 7px;
    border: 5px solid rgb(160, 206, 32);
    
}
.construction-banner {
    font-size: 30px;
    color: #d19558;
    background-color: snow;
    border: 5px solid cornsilk;
    padding: 3px;
}
.construction-description {
    margin-left: 5px;
}


/* ----- intro layout ----- */
.intro-title {
    color:#fb93b9
}

.intro-columns {
    display: flex;
}
.home-header {
    border-bottom: 3px solid darksalmon;
    padding-bottom: 10px;
}
#intro-flag {
    height: 288px;
    text-align: center;
    width: 272.5px;
    margin-right: 10px;
    margin-left: 10px;
}

.v-flag {
    display: flex;
    padding-bottom: 5px;
}
#pronouns {
    font-size:18px;
}
@media screen and (max-width: 700px) {
    .intro-columns {
        flex-wrap: wrap;
    }
    #intro-flag {
        display: flex;
        margin-left: 0;
    }
    #pronouns {
        margin-left: 5px;
        width: fit-content;
    }
    
}
.flag-stripe {
    width: 40px;
    height: 240px;
}
#stripe1 {
    background-color: #2b2927;
}
#stripe2 {
    background-color: #9755bd;
}
#stripe3 {
    background-color: #f4e9e0;
}
#stripe4 {
    background-color: #f4b72e;
}



/* ------ special interests boxes ------ */
.si-boxes {
    display: flex;
    flex-wrap: wrap;
    /*margin-left: 60px;*/
    margin-right: auto;
    list-style-type: none;
}
.si-contents {
    width: 125px;
    align-items: center;
   
}


/* ----- cat layout ----- */
.cat-image {
    max-width: 300px;
}

/* ------ drawings ------- */
.drawing__frame {
    border-radius: 10px;
    border: 10px;
    background-color: #325a3833;
    padding: 2px 20px 20px;
    margin: 0px;
    background-image: url("/storage/images/stampyellow.png");
    border-image: url("/storage/images/stampborder.png") 8  / 30px round;
    image-rendering: pixelated;
}
.drawing__holder {
    border: 20px solid;
    border-image: url("/storage/images/stampborder.png") 5/ 30px;
    image-rendering: pixelated;
    width: fit-content;
    height: fit-content;
    max-width: 100%;
}
.drawing__title {
    background-color: #ede8fd;
    padding: 10px;
    border-radius: 15px;
    margin-right: 7em;
    padding-left: 16px;
    margin-top: 2.30em;
}

.drawing__linkback {
    color: #470025;

}
.drawing__linkback:visited {
    color: #470025;
}
.drawing {
    width: auto;
    height: auto;
    max-width: 100%;
    border: 5px solid;
    margin-bottom: 10px;
    margin-top: 20px;
    image-rendering: initial;
}
#GO {
    background-color: #e0fae0;
}
#legs {
    background-color: #ab3c64;
    /*background-color: #e3045542;*/
}
#little_world {
    /* do hue rotate animation for this background colour! */
}
#drawing__23 {
    border-color: aliceblue;
}
@media screen and (min-width: 540px) {
    .drawing {
        max-width: 96%;
    }
}
.drawing__captionbox {
    background: #f6a50f;
    padding: 0px;
    display: inline-block;
    border-radius: 10px;
    margin-top: 3px;
}
.drawing__caption {
    background: aliceblue;
    border-radius: 10px;
    padding: 16px 15px 16px 15px;
    margin: 9px 6px 6px;
    border: 5px;
}

/* ----- blog ------ */
.blogs {
    list-style-type: none;
    margin-left: 0px;
    font-size: 23px;
    padding-left: 0px;
}
/*flex date and title here*/
.blogs-link {
    color: #a683ff;
    margin-bottom: 20px;
}
.blogs-link:visited {
    
    color: #dc7afd;
}
/*plan on formatting the display some more later*/
.date {
    margin-right: 25px;
}

.blog-content_warning {
    color: #ff843a;
    border-image: linear-gradient(to right, #b87f7f 250px, transparent 365px);
    border-image-slice: 100%;
    border-image-slice: 1;
    border-top: 1px solid;
    padding: 12px 0px 16px 3px;
    border-bottom: 1px solid;
    font-weight: normal;
    font-size: larger;
    text-shadow: 0px 1px 4px #e3c553;
    background-image: linear-gradient(to right, #a7cad01a 100px, transparent 350px);
}

.quote {
    background-color: #863d3a;
    text-align: center;
    color: #e16a92;
    border-left: 10px;
    border-right: 10px;
}
.quote_text {
    margin-left: 0px;
    border-left: 0px;
    padding-left: 40px;
    padding-top: 16px;
    padding-bottom: 10px;
    font-size: smaller;
    color: #ebfff8;
    text-align: left;
    margin-bottom: 5px;
}
.quote_author {
    text-align: right;
    font-size: smaller;
    color: #fae2fd;
    padding-bottom: 15px;
    text-decoration-line: underline;
    line-height: normal;
}
.cool_figcaption {
    line-height: 150%
}
.cool_figcaption__text {
    background-color: orange;
    font-weight: 900;
    font-style: italic;
    padding-left: 4px;
    padding-right: 7px;
}
.cool_figcaption__context {
    text-decoration: underline #b28383 dotted 4px;
    font-size: 23px;
}
.cool_figcaption__desc {
    font-size: 20px;
    line-height: 130%;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-bottom: 3em;
}

/* ---- buddies ----- */
/* ----- orbit ----- */
.orbit {
    list-style-type: none;
    max-width: 320px;
    max-height: 320px;
    padding-left: 5px;
    padding-top: 135px;
    padding-bottom: 135px;
    background:#2b2927;
}
.star{
    width: 88px;
    height: 31px;
    animation-name: orbit;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
    margin-top: 15px;
    transform-origin: +8em +0.0em;
}
@keyframes orbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*----- links ------ */
.starlink__cob {
    color: rgb(230, 180, 19);
}
.starlink__cob:visited {
    color: rgb(150, 130, 18);
}

.starlink__zoe {
    color: white;
}
.starlink__zoe:visited {
    color: rgba(168, 164, 164, 0.993);
}

.starlink__cadence {
    color: #dc7afd;
}
.starlink__cadence:visited {
    color:#9755bd;
}



/* ------- Books ------- */
.books-topic {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    font-size: larger;
    padding-left: 0px;
}
.books-topic-link {
    margin: auto 40px;
}
.book-container {
    display: flex;
}
.book-container-image__holder {
    /*display: flex;
    flex-direction: column-reverse;*/
    margin-right: 14px;
}
.book-container-image {
    width: 350px;
    border: 1px solid antiquewhite;
    background-color: ghostwhite;
    max-height: 700px;
    margin-left: 22px;
    margin-right: 20px;
}
.book-container-title {
    text-decoration: underline dotted palevioletred 2.5px;
}
.cw__summary {
    background-color: #ffbee6;
    color: rgb(48, 0, 99);
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;     
}
.cw__box {
    background-color: #5c2e38;
    color: #ffbbca;
    border: #5c2e38 solid 4px;
    border-radius: 5px;
    text-align: left;
    margin: auto 10px;
}
.cw__text {
    padding-left: 5px;
    padding-right: 5px;
    font-size: smaller;
}

.book-container-text {
    margin-top: 65px;
}
@media screen and (max-width: 750px) {
}
@media screen and (max-width: 680px) {
    .book-container {
        flex-direction: column;
    }
    .book-container-image__holder {
        text-align: center;
    }
    .book-container-image {
        align-self: center;
    }
    .book-container-text {
        margin: auto;
    }
    .cw__box {
        margin-left: 50px;
        margin-right: 50px;
    }
}
@media screen and (max-width: 380px) {
    .book-container-image {
        width: 310px;
    }
}




/* ----- identity ----- */
.section-box {
    background-color: #fff1ec;
    border-radius: 10px;
    border: pink 5px solid;
    border-top-width: 0px;
    margin-left: 0px;
    margin-right: 0px;
}
.cuteheaderboxes {
    background-color: #e8e3ff;
    padding: 30px;
    text-align: center;
    border: dashed 14px #dec2d2;
    color: #bb5589;
    color: antiquewhite;
    border-radius: 30px;
    border-image: url("/storage/images/stampred.png") 7/ 22px repeat repeat;
    border-radius: 10px;
    background: url("/storage/images/backgroundhead1.png") 10px 1px space palevioletred;
    text-shadow: 1px 1px , -3px -2px 5px #7b54e8;
}
.cuteheaderboxes__text {

}
.cutesubheader {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: #f7d4b9;
    text-underline-offset: 0.17em;
}
.section-box__text {
    margin-left: 10px;
    margin-right: 10px;
    color: #b44b4b;
}
.soft {
    background-color: rgb(183, 152, 152);
    /*border-radius: 10px;*/
    border: 10px solid #b76f7d;
    padding-top: 1px;
    padding-bottom: 1px;
}
.peoplecute {
    line-height: normal;
    margin: 22px;
    font-weight: 501;
    font-size: xx-large;
    color: rgb(247, 238, 230); /* rgb(255, 241, 252) rgb(252, 245, 237) rgb(252, 251, 252)*/
    
}



/* ----- links out ----- */
.ribbonhr {
    background: url("/storage/images/ribbonhr.png") center repeat no-repeat;
    height: 70px;
}
.links-out-sections {
    text-align: center;
    text-decoration: underline dotted;
}
.link-list__buttons {
    padding-left: 0px;
}


.link__buttons {
    list-style-type: none;
    margin-top: 2em;
}
.link-list__column {
    display: flex;

}
.buttonlink__header {
    display: flex;
    flex-direction: column;
    min-width: 6em;
    max-width: 6em;
    align-items: center;
    text-align: center;
}
.buttonlink {
    vertical-align: bottom;
    image-rendering: pixelated;
    display: flex;
    text-align: center;
}
.buttonlink__text {
    font-size: 1.05em;
    display: block;
}
.button__text {
    margin-left: 10px;
}



.link-list__nobuttons {
    padding-left: 0px;
}
.link__nobuttons {
    background-color: #fff1ec;
    border: 7px solid aliceblue;
    border-image: url("/storage/images/lacenobg.png") 4 / 11px round; /* lots of splice/size comboes work good at 7px border */
    image-rendering: pixelated;
    padding: 0.5em 0.5em 0px 0.5em;
    list-style: none;
    margin-bottom: 23px;
    text-align: center;
    font-size: smaller;
}

.nobuttonlink {
    font-size: 1.3em;
}

@media screen and (max-width: 354px) {
    .link-list__column {
        display: unset;
    }
    .buttonlink__header {
        min-width: none;
        max-width: none;
        margin-bottom: 10px;
    }
}