p{
    letter-spacing: 1px;
    word-spacing: 1px;
    font-size: 18px
}

li{
    letter-spacing: 1px;
    margin:3px;
    font-size: 18px
}
h1{
    letter-spacing: 2px
}
h2{
    letter-spacing: 2px;
    font-weight: normal;
}
html {
    /*background-color: #100817;*/
    /*background-color: rgb(230,200,255);*/
    font-family: Wonder;
    color: white;
    background-image: url(background_xmas.png);
    background-attachment: fixed;
    background-size: auto 120%;
    background-position-y: bottom;
    scroll-behavior: smooth;
    
}

#two {
    /*border: rgb(50,0,80) 10px solid;*/
    /*
    background-image: url(background2.webp);
    background-attachment: fixed;
    background-size: auto 100%;
    */
    margin: auto;
    width: 1000px;
    height: auto;
    /*color: rgb(50,0,50);*/
    /*color:pink;*/
    padding: 10px;
    position: relative
    
}

[data-button]{
    display: none;
}

.active[data-button]{
    display: block;
}

[data-button-pressed]{
    display: none;
}

.active[data-button-pressed]{
    display: block;
}

[data-comm-button]{
    display: none;
}

.active[data-comm-button]{
    display: block;
}

[data-comm-button-pressed]{
    display: none;
}

.active[data-comm-button-pressed]{
    display: block;
}

#bot {
    
    margin: auto;
    width: 800px;
    background-image: url(String_xmas.png);
    padding-inline: 100px;
    padding-top: 1px;
    padding-bottom: 10px;
}
a {
    color: rgb(250,220,50)
}
[data-tab-content] {
    display: none;
}

.active[data-tab-content] {
    display: block;
}


#TabsBox {
    margin: auto;
    margin-bottom: -5px;
    height: auto;
    width: 1000px;
    align-content: center;
    
}

[data-comm-tab-content] {
    display: none;
}

.active[data-comm-tab-content] {
    display: block;
}

.active-tab{
    border: blue 5px solid;
}

.example{
    width: 200px
}

.price-tag{
    width: 120px;
    margin-left: -80px;
    margin-bottom: -50px
    
}

.example-section{
    width: 250px;
    margin: 10px
}

.emote_example {
    width: 100px;
    margin: 25px;
}

.portfolio-art {
    height: 400px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.spoiler-content {
    display: none
}

#bubble {
    background: rgba(66, 0, 0, 0.82); 
    color: white;
    height: 200px;
    width: 120%;
    position: absolute;
    bottom: 0;
    left: -10%;
    padding: 5px;
    border: 10px, rgb(100,0,0), solid;
}

#talk_box {
    margin-top: 110px;
    position: relative;
    /*background-color: rgba(20,15,60,0.7);*/
    width: 700px;
    left:-100px;
    margin-right: -100px;
    height: auto;
    /*border: 5px, rgb(20,0,100), solid;*/
    padding: 5px;
}

.choice {
    list-style-type: none;
    padding: 5px;
    border: 3px, darkblue, solid;
    font-size: 18px;
    background-color: rgb(25,0,75);
    margin: 5px;
    margin-right: 25px;
}

.hide {
    transform: scale(0)
}

#screen {
    width: 100%;
    min-height: 100%;
    position: fixed;
    left:0;
    background-color: black;
    z-index: 1;
    opacity: 70%;
    margin: 0;
    padding: 0;
    top: 0;
}

#adult_window {
    width: 80%;
    max-width: 500px;
    aspect-ratio: 5/3;
    display: block;
    margin-inline: auto;
    border: pink 10px solid;
    position: fixed;
    background-color: black;
    inset: 0;
    top: 30%;
    z-index: 2;
    padding: 10px;
    color:white;
}

.text_box {
    background-color: rgba(66, 0, 0, 0.82); 
    /*background-color: rgba(50,0,50,0.7); */
    padding: 25px;
    /*box-shadow: 5px 5px 5px rgba(40,0,40,0.6)*/
    box-shadow: 0 0 10px rgba(32, 255, 24, 0.9);
    /*box-shadow: 1px 3px 3px rgba(0, 50, 4, 0.4);*/
    color: white;
    /*border: 2px solid rgb(255,100,200);*/
}

.box1 {
    background-image: url(background_block_xmas.png);
    background-size: auto 300%;
    background-position: center;
    box-sizing: border-box;padding-block:25px;
    line-height: 20px;
    /*height: 250px;*/
    padding-inline: 25px;
    box-shadow: 2px 4px 1px rgba(50,0,50,0.4);
    
}

.button {
    cursor: pointer;
    z-index: 2;
}
[data-button],#Oral_Report_read,#TOA_prologue_read,#TOA_chapter1_read {
    filter:hue-rotate(60deg)brightness(100%)contrast(125%)saturate(140%);
}
[data-button-pressed] {
    filter:hue-rotate(50deg)brightness(120%)contrast(120%);
}
[data-comm-button] {
    filter:hue-rotate(60deg)brightness(100%)contrast(125%)saturate(140%);
}
[data-comm-button-pressed] {
    filter:hue-rotate(50deg)brightness(120%)contrast(120%);
}
.comic_page {
    width: 150px;
    display: none;
}
.active_comic {
    display: initial;
}
#comic_reader {
    display: none
}

@keyframes idle{0%{transform: scale(1,1)translate(0,0)}50%{transform: scale(1,0.995)translate(0,5px)}100%{transform: scale(1,1)translate(0,0)}}

#sprite {
    animation-name:idle;
    animation-duration:6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    width: 479px;
}

.snowflake {
  color: rgba(255,255,255,0.4);
  font-size: 4em;
  /*font-family: Arial, sans-serif;*/
  text-shadow: 0 0 5px rbga(255,255,255,0.6);
}

.snowflake,.snowflake .inner {
    animation-iteration-count:infinite;
    animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;
    -webkit-user-select:none;
    user-select:none;
    cursor:default;
    pointer-events:none;
    animation-name:snowflakes-shake;
    animation-duration:3s;
    animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}