@font-face{font-family: determination; src: url("imgs/font/DeterminationSansWebRegular-369X.ttf")}
@font-face{font-family: LOGO; src: url("imgs/font/American\ Captain.ttf")}
@font-face{font-family: kindaArial; src: url("imgs/font/KGRedHands.ttf")}
@font-face{font-family: handwrite; src: url("imgs/font/Shine\ Flower.otf")}



/*   _______________           ____________-PHOTO */
.photo-fix{
    padding: 2em 1em 2em 5em;
}

.photos h1{
    padding: 1em;
    font-size: 30px;
    font-family: kindaArial;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.516);
    text-shadow: rgb(183, 13, 118) 3px 2px;
    background-color: #8b7fa04a;
}

/* ________________________________________________ */

.frost{color: rgb(65, 182, 255);}
.kari{color: rgb(255, 241, 164);}

.keep-right{ right: 20em;}

.linky{font-size: 18px;color: white !important;}

.linky:hover{ color:rgb(242, 25, 159) !important;}

input {
display: none;
}

.zoom-in {
  transition: transform .2s; /* Animation */

}
.zoom-in:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

h1 {
padding-left: 2em;
padding-top: 2em;
font-size: 30px;
font-family: LOGO;
letter-spacing: 2px;
color: black;
text-shadow: rgb(183, 13, 118) 2px 1px;
}

h2 {
margin-top: 1em;
font-size: 20px;
font-family: kindaArial;
}

.book p{margin-left: 3px; color: rgb(46, 46, 46)}

.book img {margin-top: 1em; padding: 1px;}

.book {
display: flex;
}
#cover {
    height: 550px;
    width: 400px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;
border-left: 3px double #f0f0f0;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("art-pages-folder/paperbg.jpg");
box-sizing: border-box;
padding: 0 13px;

}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-image: url("art-pages-folder/paperbg.jpg");
}
.next-btn {
position: absolute;
width: 30px;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor:  url("imgs/font/water.png"), default;
color: #000;

}
.back-btn {
position: absolute;
width: 30px;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: url("imgs/font/water.png"), default;
color: #000;
}
#p1 {
z-index: 5;
}
#p2 {
z-index: 4;
}
#p3 {
z-index: 3;
}
#p4 {
z-index: 2;
}
#p5 {
z-index: 1;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}

#c3:checked ~ .flip-book #p1 {
display: none;
}
#c4:checked ~ .flip-book #p2 {
display: none;
}
#c5:checked ~ .flip-book #p3 {
display: none;
}




                         /* BOOK THING  */

/* _____________________________________________________________________ */

.cards-title{font-weight: bolder;font-family: Arial, Helvetica, sans-serif; color: rgba(255, 255, 255, 0.514); text-shadow: rgb(107, 7, 114) 3px 2px; font-size: 20px; margin-top: 5px;}


.page-title{font-size: 34px;color: rgb(137, 244, 153); text-shadow: rgb(255, 255, 255) 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; text-align: center;}

.link {color:rgb(147, 136, 232);}

.white {color: white;} 

ol { list-style-type: trad-chinese-informal; }
li {font-family: Arial, Helvetica, sans-serif; } 

main a {
    color: rgb(255, 145, 255);

}

main a:hover {
    color: rgb(148, 122, 241);
    cursor: url("imgs/font/cursor.png"), default;
} 

.zoom {
  padding: 50px;
  /* background-color: green; */
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}


.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.frame h2{
    color: rgb(131, 41, 126);
    font-family: LOGO;
    font-size: 40px;
}

.frame p{ color: black; font-family: kindaArial; font-size: 14px;}

.frame img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* width: 100%;  */

}

.frame{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;;
    display: inline-block;
    border: 3px dashed rgb(155, 37, 116);
    border-radius: .2em;
    background-color: rgb(236, 160, 251);
    margin: 1.4em;
    
    /* border size */
    width: 36em;
    height: 28em;

    /* overflow-y: scroll; */
    overflow-block: auto;
    scrollbar-color: rgb(140, 119, 246) rgb(162, 149, 220);

    display: block;
    margin-left: auto;
    margin-right: auto;


}

/* _____________________________GALLERY'S CARD _____________________________ */

.card:hover{
    width: 9.2em;
    height: 13.2em;
    /* cursor: src: url */
    
}

.card a{ cursor: url("imgs/font/cursor.png"), default;}
.card:active{

    background-color: rgb(146, 130, 217);
}


.card img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* width: 100%;  */

    height: 150px;
    width: 150px;
}

.card{
    padding-top: 0.5em;
    padding-bottom: 1em;
    padding-left: 1.5em;
    padding-right: 2em;;
    display: inline-block;
    border: 1px solid rgb(255, 255, 255);
    border-radius: .2em;
    background-color: rgb(255, 255, 255);
    margin: 1.4em;
    
    width: 9em;
    height: 13em;

    /* overflow-y: scroll; */
    overflow-block: auto;
    scrollbar-color: rgb(140, 119, 246) rgb(162, 149, 220);


}

.card-wrap{ margin: 2em;}





:root {
    --accent-color: #633aac;
    --link-color: #09218c;
    --button-color: #8f4492; /*link buttons and shadows*/
    --bg-color: url("imgs/purptexture.jpg"); 
    --bg-color2: #86c2b1; /*background for name and bio*/
    --text-color: #470563;
}

/* this is for when you select text on the page */
::selection {
    background: #7a3f93;
    color: #ffffff;;
    
}

body {
    /* C:\Users\Cireaya L\Documents\not-a-portfolio\imgs\dont-go-insane.jpg */
    background-image: url("imgs/dont-go-insane.jpg");
    cursor: url("imgs/font/soul.png"), default;
    background-attachment: fixed;
    margin: 1pm;
}
/* i think having better line spacing helps text to be more readable, but you can remove it if you want */
p {line-height: 1.5em; font-family: handwrite; color: white; font-size: 18px;}



nav {
    /*padding: 1em;*/
    margin-top: 2em;
    font-weight: bold;
}

nav > ul {
    max-width: 960px;
    margin: auto;
    line-height: 3rem;
/* this stuff makes it wrap around on mobile */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
/* this line takes away the dot in front of the list items */
    list-style-type: none;
/* list items have default padding but we don't need it for these */
    padding-left: 0;
/* and this spaces out the buttons so they're not touching */
    justify-content: space-evenly;
}
nav li {
    text-align: center;
}
nav li > a {
    background-color: var(--button-color);
    padding: .5em 3em;
    box-shadow: rgb(214, 100, 214) 0 0 6px;
/* this takes away the link underline */
    text-decoration: none;
    font-family: monospace;
    color: rgb(43, 1, 52);
}
nav li > a:visited {
    color: var(--link-color);
}
nav li > a:hover {
    box-shadow: var(--bg-color) 0 0 6px;
    color: rgb(230, 33, 128);
    background-color: rgb(0, 0, 0);
}

a {
    color: rgb(180, 9, 103);
    background: rgba(172, 50, 172, 0.352);

}
a:visited {
    color: rgb(180, 9, 103);
}
a:hover {
    color: white;
    cursor: url("imgs/font/cursor.png"), default;
}

/* you can change this to anything you want :) */

 /*list-style-type: "❤︎ "; */
/* ul { list-style-type: trad-chinese-informal;} */
ul {list-style-image: url("imgs/yes.png");}

nav ul{list-style: none;}


main {
    background-image: url("imgs/gallery-bg.gif"); /*change this one later*/
    padding: 1em 2em;
    margin: 1em;
    border: 2px double white;
    border-radius: 2px;
    word-spacing: 0.3em;
    color: white;

    width: 40.5em; 
}

main > h1,
main > h2,
main > h3 {

    color:white;
    border-radius: .4em;
    padding: .2em .5em;
    font-family: LOGO;
}

/* a class for centering text and images */
.center { text-align: center; }
/* made this a class so i can change it to be centered on mobile */
.img-right { float: right; }
.img-left{float:left;}

.img-center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%; 
}

.stickers{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 73%; 
}

footer {
    text-align: center;
    font-size: small;
    margin: 1em auto;
    max-width: 960px;
}


/* ____________________________________________SIDE THING ____________________________*/

#sidebar {
    background: var(--bg-color);
    /* min-width: 200px; */
    max-width: 110px;
    margin: 1em;
    padding: 1em;

    max-height: 990px;
}


/* context div should wrap around them to make side divs */
/* something for galley cards?? */

#content {
    display: flex;
    max-width: 960px;
    margin: auto;
}