* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html {
height: 100%;
background-image: url('./cyberletter-assets/clay2.jpg');
background-size: cover;
background-attachment: fixed;
cursor: url('./n-cursor.cur');

}


body {
position: fixed;
margin: 0 0;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(2, 2, 2, 0.6);
color: #c2baf4;
font-family: "Panchi Mono";
letter-spacing: 1px;
box-shadow: 0px 0px 60px blue inset;
cursor: url('./n-cursor.cur'), auto;
}

@font-face {
    font-family: "Panchi Mono";
    src: 
      url("./panchi/PanchiMono.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    

}

@keyframes float {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }

            100% {
                transform: translateY(0);
            }
        }

@keyframes blink {

from {color: lavender;}
to {color: deeppink;}

}

@keyframes spun {
  100% {transform: rotate(.5turn)}
}


u {
text-decoration-color: lavender;

}

#title {
display: block !important;
position: fixed; 
left: 30%; 
top: 3%; 
transform: rotate(0deg);
width: 500px;
height: 150px;
}

#backlink {
position: fixed;
top: 3%;
left: 3%;
text-align: center;
background-color: whitesmoke;
border: 3px outset whitesmoke;
color: black;
font-size: 19px;
text-decoration: none;

}

#backlink:active {

border-style: inset;

}

#fill {
width: 100%;
height: 150px;
color: black;
-webkit-text-stroke: 1px black;
filter: grayscale(0%) brightness(177%);
transform: skewY(0deg);
}

#title {
font-size: 20px;
text-decoration: underline;

}

#sample {

position: absolute;
width: 33%;
height: 7%;
right: 0%;
top: 93%;
padding: 1%;
text-shadow: 0px 0px 9px pink;
color: black;
font-size: 22px;
}

.tagline {
width: 33%;
height: 80%;
margin: 150px auto;
overflow-y: hidden;
text-shadow: 0px 0px 9px pink;
-webkit-text-stroke: 2.3px #c2baf4;
opacity: 95%;
color: blue;
font-size: 22px;
padding: 1%;
text-align: justify;
border-radius: 40px;


}


.creature1 {
position: absolute;
right: 5%;
top: -10%;
z-index: 0;
}

.creature2 {
position: absolute;
right: -10%;
top: -10%;
z-index: 0;
}

.creature3 {
position: absolute;
right: -2%;
top: -10%;
z-index: 0;
}

.blink {

animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate-reverse;


}

#egg {
animation: spun 8s infinite linear alternate-reverse;

}


/*

failure romance

*/

.text {

width: 60%;
height: 88%;
overflow: scroll;
padding: 1%;
margin: 50px auto;
font-size: 20px;
color: deeppink;
border-radius: 5px;
background-color: silver;

}


#sample-backlink {
position: fixed;
top: 3%;
left: 3%;
padding: 1%;
color: chartreuse;
border: 1px dotted;
text-decoration: none;
font-size: 19px;
background-color: transparent;
line-height: 19px;
}

#sample-backlink:hover {

border: 1px solid;

}

/*

box-shadow: 0px 0px 18px indigo inset;
outline: 0.5px black;
background-color: dimgray;
border: 0.5px solid indigo;



*/