@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

@font-face {
  font-family: 'Kinkee';
  src: url('Kinkee.woff2') format('woff2'),
       url('Kinkee.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Zpix';
  src: url('Zpix.woff2') format('woff2'),
       url('Zpix.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'daydream';
  src: url('Daydream\ DEMO.woff2') format('woff2'),
       url('Daydream\ DEMO.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'superpixel';
  src: url('Super\ Pixel\ Personal\ Use.woff2') format('woff2'),
       url('Daydream\ DEMO.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

marquee {
background-color:#ffebf7;
font-size: 13px;
border: #e798c9 1px solid;
color: #8a3c6b;
padding:1.5px;
}

a {
 color: #e6a8cd;
}
.pinkywinkies {
    color:#e6a8cd;
}

.bluey {
    color: rgb(149, 199, 255);
}

.bluey2 {
    color: rgb(159, 216, 233);
}

.greeny {
    color: rgb(101, 202, 115);
}

.bgeffects {
    position: absolute;
    z-index: -2;
}

#bge1 img {
    width: 1200px;
}

#bge1 {
    left: 200px;
}

#bge2 img {
    width: 1200px;
}

#bge2 {
    right: 400px;
}

#v2body {
    font-family: 'Zpix','DotGothic16', sans-serif;
    background: #ffffff;
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 76%, rgba(247, 213, 239, 1) 100%);
}

#v2body p {
    color: #8a3c6b;
}

#v2main {
    width: 850px;
    height: auto;
    background-color: white;
    border:rgb(158, 88, 129) solid 1px;
    border-radius: 15px 30px 30px 30px;
    margin: auto;
    margin-top:80px;
    position: relative;
}

#topbar {
    background: #F9ADDA;
    background: linear-gradient(90deg,rgb(255, 195, 231) 0%, rgba(255, 236, 247, 1) 100%) padding-box,
        linear-gradient(to bottom, rgb(158, 88, 129), rgb(255, 236, 247, 1) 40%) border-box;
    height: 70px;
    border-radius: 50px 50px 50px 0px;
    margin-top: -50px;
    width: 45%;
    position: absolute;
    z-index: 100;
        border: 1px solid transparent;

}

#topbarmini {
    background: #FFECF7;
    background: linear-gradient(90deg,rgba(255, 236, 247, 1) 45%, rgba(255, 195, 231) 100%) padding-box,
         linear-gradient(to bottom, rgb(158, 88, 129), rgb(255, 236, 247, 1)) border-box;;
    height: 40px;
    margin-top: -20px;
    position: absolute;
    width: 100%;
    z-index: 1;
    border: 1px solid transparent;
    border-radius: 30px 0px 0px 0px;

}
#fakeendbanner {
    width: 100%;
    height: 1px;
    background-color: rgb(158, 88, 129);
    position: absolute;
    top: 22px;
}
#mainbanner {
    width: 100%;
    height: 200px;
    background-color: #ffd6ed;
    background-image: url(indximg/codepink.gif);
    margin-top: 30px;
}

#futabarender img {
    margin-left: 420px;
    width: 495px;
    z-index: 20;
    position: absolute;
    margin-top: -80px;
}

#mainbannercontent {
    display: flex;
}

#mainbannerleft {
    width: 600px;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;

}

#mainbannerbar {
    background-color: white;
    border-radius: 30px;
    width: 90%;
    text-align: left;
    padding-left: 20px;
    margin-top: -20px;
    margin-left: 40px;
    color: #e78cc3;
}

#mainbannerleft h1 {
    font-size: 50px;
    text-align: left;
    font-family: 'superpixel';
    color: #ffffff;
    filter: drop-shadow(0px 0px 1px rgb(191, 93, 150)) drop-shadow(0px 0px 0px rgb(158, 88, 129)) drop-shadow(0px 0px 1px rgb(191, 93, 150)) drop-shadow(0px 0px 0px rgb(191, 93, 150)) drop-shadow(0px 0px 1px rgb(191, 93, 150)) drop-shadow(0px 0px 1px rgb(191, 93, 150)) drop-shadow(0px 1px 0px #00000032);
}

#mainbannerplaceholder {
    width: 200px;
}

#afterbannerdiv {
    background: linear-gradient(90deg,rgba(249, 173, 218, 1) 0%, rgba(255, 236, 247, 1) 100%);
    border:rgb(158, 88, 129) solid 1px;
    font-size: 14px;
    padding-left: 20px;
    height: 25px;;
    
}

#afterbannerdiv p {
    color: white;
    height: 20px;
    margin-top: 0;
}

#hpcontentrow1 {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #ffe9f5;
    background-image: url('indximg/row1bg.png');
    background-size: contain;
    height: 243px;
}

#hpcontentrow1 a {
    color: #e78cc3;
}
#hpcontentrow2 {
    margin-top: -10px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #ffffff;
    background-size: contain;
}


#MEEE {
    background-color: #ffffff;
    width: 160px;
    height: 220px;
    padding: auto;
    border: #F9ADDA 2px solid;
    border-radius: 5px;
    text-align: center;    
}

#metext {
    width: 160px;
    height: 100px;
    font-size: 11px;
    margin-top: -8px;

}

.paragraphbox {
    background-image: url(indximg/polka.jpg);
    background-size: contain;
    background-color: #5c4848;
    border: #e798c9 1px solid;
    outline: 1px solid #F9ADDA;
    border-radius: 10px;
    width: 350px;
    height: 220px;
    margin-left: 5px;
    font-size: 11px;
}

.whiteinner {
    background-color: white;
    margin-left: 10px;
    height: 200px;
    margin-top: 8px;
    border-radius: 15px;
    border: 2px solid #F9ADDA;
    padding-left: 10px;
}

#paragraphhie {
    height: 200px;
    overflow-y: scroll;
    color:#8a3c6b;
    width: 280px;
    overflow-x: hidden;
}
#wctxt {
    width: 270px;
    height: 200px;
    overflow-y: scroll;
}

#wowwie {
    margin-top: -30px;
    background-color: hsl(325, 100%, 96%);
}

#wowwie img {
    float: right;
    width: 60px;
}

 #notice {
    font-family: 'superpixel';
}
#welcomeimg {
    float: left;
    width: 75px;

}

#pinkhearts {
    float: right;
    width: 30px;
    margin-top: -15px;
}
.montitle {
    text-align: left;
    padding-left: 20px;
    color: #e6a8cd;
    position: absolute;
    font-size: 20px;
    font-family: 'daydream';
    z-index: 10;
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) 
    drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) 
    drop-shadow(0px 1px 0px #00000032);

}

#title1 {
    font-size: 20px;
    margin-top: -20px;
    margin-left: -13px;
}

#title2 {
    margin-top: -30px;
}

#hpcontentrow1placeholder {
    width: 300px;
}

#pfphi {
    width: 150px;
    padding-top: 10px;
    padding-bottom: 0px;
}



.leftyloosey {
    background-color: #ffd6ed;
    width: 110px;
    height: 50px;
    margin-bottom: 10px;
}

.leftyloosey img {
    width: 100%;
}
#cbox {
    border: #e6a8cd 2px solid;
}
#fatter {
    margin-top: 40px;
    height: 213px;
    border: 1px solid #F9ADDA;
}

#yomama marquee {
    height: 50px;
}

#heh {
    display: flex;
}

#peanutbutter2 {
    width:180px;
    padding-right: 10px;
    margin-right: 10px;
    height: 300px;
    border-radius: 0px;
    background-image: url(indximg/pinkpolka.jpg);
}

#title6 {
    font-size: 15px;
    margin-left: -20px;
    margin-top: -30px;
}

#title7 {
    font-size: 15px;
    margin-left: 200px;
    margin-top: -30px;
}

#title7 h2 {
     color: #ffdaf0;
}

#updatesandtodo {

    background-color: white;
    width: 165px;
    margin-left: 5px;
    height: 270px;
    margin-top: 20px;
    border-radius: 15px;
    border: 2px solid #F9ADDA;
    padding-left: 10px;

}

#dateentries {
    height: 260px;
    overflow-y: scroll;
}
#navvie {
    width: 250px;
    border: #F9ADDA 2px solid;
    border-radius: 5px;
    text-align: center;    
    padding-top: 15px;
}


.navitem {
    display: flex;
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 240, 248, 1) 100%);
    padding-left: 10px;
    height: 25px;

}


.navitem img {
    height: 20px;
    padding-right: 20px;
}

.navitem p {
    font-size: 11.5px;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-top: auto;
    margin-bottom: auto;
}

#promo {
    margin-top: 10px;
    background-image: url(indximg/promobg.jpg);
    height: 120px;
    display: flex;
    background-size: cover;
    border: #ffffff 2px solid;
    outline: #e6a8cd 1px solid;
}

#promotxt {
    margin-left: 20px;
    margin-top: 17px;
    width: 114px;
    background-color: #ffffff;
    height: 75px
    ;
    border: 2px solid #f9addb;
    
    font-family: 'superpixel' 'DotGothic16';
}
#promotxt p {
    font-family: 'superpixel';
    color: #fac1e3;
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) 
    drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) 
    drop-shadow(0px 1px 0px #00000032);
}

#cursorpromo {
    position: absolute;
    margin-left: 100px;
    margin-top:70px;
    z-index: 2;
}

#cursorpromo img {
    width: 30px;
}
#laptoppromo {
    position: absolute;
}

#laptoppromo img {
    width: 220px;
    margin-top: -10px;
    margin-left: -30px;
    z-index: -2;
}

#promoimg img{
    position: absolute;
    margin-left: 25px;
    margin-top: 0px;
    height: 120px;
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) 
    drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) 
    drop-shadow(0px 1px 0px #00000032)

}
.titleee {
    background-color: #ffd6ed;
    border-radius: 15px;
    margin: 5px;
}

#bottombarmini {
    background: #FFECF7;
    background: linear-gradient(90deg,rgba(255, 236, 247, 1) 45%, rgba(255, 195, 231) 100%);
    height: 40px;
    width: 100%;
    border: 1px solid ;
    font-size: 12px;
    margin: auto;
    text-align: center;
    border-radius: 0px 0px 30px 30px;

}

#bottombarmini p {
    color: #e798c9;
}
/* techblog page! */

#techblogdesktop {
    font-family: 'Zpix','DotGothic16', sans-serif;
    background-image: url(tchblgimg/techblogbg.png);
    background-size: cover;
    position: relative;
    display: flex;
    padding: 30px;
    margin: auto;
}

#taskbar {
    background-color: #f9addb67;
    border: 1px #f9addb solid;
    position: fixed;
    bottom: 0;
    width: 70%;
    height: 50px;
    border-radius: 50px;
    margin: auto;
    text-align: center;
    margin-left: 13%;
    margin-right: 10%;
    bottom: 10px;
    align-items: center;
}

.taskbaricons img {
    margin-top: 5px;
    width: 40px;
}

.taskbaricons img:hover {
    opacity: 0.5;
    
}

#taskbaricons {
    display: flex;
    width: 200px;
    justify-content: space-between;
    margin: auto;
}

#taskbaricons:hover{
    display: flex;
    width: 200px;
    justify-content: space-between;
    margin: auto;
}

#tbterminalborder {
    height: auto;
    width:auto;
    background-color: rgb(43, 40, 41);
}

#terminalribbon {
    width: 750px;
    background: linear-gradient(90deg,rgb(255, 195, 231) 0%, rgba(255, 236, 247, 1) 100%) padding-box,
        linear-gradient(to bottom, rgb(158, 88, 129), rgb(255, 236, 247, 1) 40%) border-box;
        border: 1px solid #F9ADDA;
}

#terminalfunctions {
    width: 750px;
    border: 1px solid #ffffff;
    background-color: white;

}
#tbterminal {
    background-color: rgb(43, 40, 41);
    height: auto;
    width: 750px;

}

.terminalz {
    padding: 20px;
    display: flex;
    border: 2px white solid;
}

#tm1 {
    width: 700px;
    background-color: rgb(43, 40, 41);
}
#futaba {
    letter-spacing: .2px;
    font-size: 3.5px;
}
#futaba p {
    color: #ffffff;
}

#sysinfo {
    padding: 20px;
    padding-top: 0;
    color: #ffd6ed;
    font-size: 13px;
}

.tmwhite {
    color: white;
}

#tm2 {
    height: 470px;
    width: 742px;
    display: flex;
    background-color: rgb(43, 40, 41);

}

#asciigif {
    color: rgb(149, 199, 255);
    font-size: 13px;
    text-align: center;
}

#asciigif a {
    color: white;
}


#asciigif img {
    float: left;
    width: 200px;
}

.tbentries p {
    color: #f1c4df;
    font-size: 13px;
}

.tbentry {
    height: 450px;
    overflow-y: scroll;
}

#leftwindow {
    background-color: #ffd5ee;
    box-shadow: inset 13px 0px 6px -10px #ffb6da, inset -13px 0px 6px -10px 
    #f79dc4c7, inset 0px 13px 10px -10px #ffffff, inset 0px -13px 6px -10px
     #f79dc4b0;
    width: 300px;
    margin-right: 20px;
    font-size: 13px;
}

#leftwindow p{
    color: #e78cc3;
}


#yasss {
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-left: 40%;
}

#title5 {
    margin-top: -20px;

}

#introtechtion {
    background-color: white;
    width: 260px;
    margin: auto;
    border: 2px solid #fdcaea;
    outline: 2px solid #e798c9;
    margin-top: 20px;
    padding: 10px;
}

#techtiontext {
    height: 160px;
    overflow-y: scroll;
    margin-bottom: 10px;
}

#catputer {
    float: left;
    width: 80px;
}
#projects {

    background-color: white;
    width: 260px;
    margin: auto;
    border: 2px solid #fdcaea;
    outline: 2px solid #e798c9;
    margin-top: 30px;
    padding: 10px;
}

#seedsudo {
    width: 284px;
    padding-left: 8px;
    margin:auto;
}
#title4 {
    margin-left: -30px;
    margin-top: -30px;
    font-size: 18px;
}

#projects img {
    width: 260px;
}
.desktopicons {
    position: absolute;
}

.desktopicons img {
    width: 40px;
}

.desktopicons p {
    font-size: small
}

#godot {
    top: 100px;
}

#vsc {
    top: 175px;
}

#arduino {
    top: 250px;
}

#cherrytree {
    left: 110px;
}

#docs {
    left: 110px;
    top: 100px;
}

/* techblog page! */

/* docs compendium */

#docspage {
    background-image: url(tchblgimg/compendiumbg.png);
    background-size: cover;
}

#docspage p {
    color: rgb(44, 228, 69);
    font-family: 'DotGothic16';
}

#docspage pre {
    color: rgb(44, 228, 69);
    font-family: 'DotGothic16';
    font-size: 10px;
}

#doclinks {
    height: 100%;
    overflow-y: scroll;
    padding: 20px;
}

#docspage h1 {
    color: #eeeeee;
    font-family: 'daydream';
    padding-left: 20px;
    
}

#docspage:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 100;
    background-image: url('tchblgimg/connectinggif.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    animation: yourAnimation 2s ease 0s 1 normal forwards;
    pointer-events: none;}
    @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} 
} 

/* gameblog design */

#gameblogbody {
    background-image: url(gameblog/gamebg.png);
    background-size: cover;
}

#gameblogmain {
    background-color: #f1c4df;
    margin: auto;
    width: 900px;
    height: 800px;
    border: 1px solid #e6a8cd;
}

#twobmaxx {
    position: absolute;
    margin-left: -100px;
    z-index: 3;
}

#twobmaxx img {
    height: 800px;
}

#controllercute {
    position: absolute;
    z-index: 4;
    rotate: -35deg;
    margin-top: 600px;
    margin-left: 700px;
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) 
    drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) 
    drop-shadow(0px 1px 0px #00000032);

}

#controllercute img {
    width: 300px;
}
#gbtitlebanner {
    padding-right: 20px;
}

#gbtitlebanner h1 {
    color: #eeeeee;
}

#gbtitlebanner h1{
    font-family: 'daydream', 'Zpix', 'DotGothic16', sans-serif;
    color: #ffffff;
    text-align: right;
    font-size: 40px;
        margin-block-start: 0em;
    margin-block-end: 0.67em;

}

#currentlyplaying {
    margin-top: -20px;
}
.cpggame {
    height: 300px;
}

.cpggame:hover {
    opacity: 0.5;
}


#cuptitle {
    background: linear-gradient(90deg,rgb(255, 195, 231) 0%, rgba(255, 236, 247, 1) 100%) padding-box;
    position: absolute;
    margin-top: 253px;
    margin-left: 435px;
    padding: 10px;
    z-index: 2;
    font-family: 'daydream';
    border-radius: 30px 0px 0px 0px;
    height: 20px;
    padding-bottom: 15px;
    font-size: 15px;
    border: #e6a8cd 3px solid;
    outline: white 2px solid;
}

#cuptitle h3{
    display: block;
    font-size: 1.17em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
    color: white;
    filter: drop-shadow(0px 0px 1px rgb(255, 184, 226)) drop-shadow(0px 0px 0px rgb(255, 184, 226)) drop-shadow(0px 0px 1px rgb(255, 184, 226)) drop-shadow(0px 0px 0px rgb(255, 184, 226)) drop-shadow(0px 0px 1px rgb(255, 184, 226)) drop-shadow(0px 0px 1px rgb(191, 93, 150)) drop-shadow(0px 1px 0px #00000032)
}

#bottomsup {
    display: flex;
}

#glplaceholder {

    width: 450px;
}

#gamelogs {
    margin: auto;
    border: #e6a8cd 2px solid;
    background-color: white;
    width: 420px;
    height: 370px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 30px;
}

#title3 {
    margin-left: 460px;
    font-family: 'daydream' 'DotGothic16';
}

.wingdivider {
    margin: auto;
    margin-left: 10px;
}
.wingdivider img {
    width: 400px;
    margin: auto;
}

.gbentry {
    width: 370px;
    margin: 20px;
    font-size: 12px;
    font-family: 'Zpix', 'DotGothic16';
    color: #8a3c6b;
}