@font-face {
    font-family: 'W95FA';
    src: url(fonts/W95FA.otf);
}

@font-face {
    font-family: '2Credits';
    src: url(fonts/2Credits.ttf);
}
@font-face {
    font-family: 'ModernDOS';
    src: url(fonts/ModernDOS8x16.ttf);
    
}

table.window {
    margin: auto;
    margin-bottom: 4%;
    width: 610px;
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 1px;
}

table.window #titlebar {
    background-image: url(backgrounds/98sky.gif);
    background-position: 50%;
    height: 25px;
}

table.window td.menubar#menu_bar {
    color: #3f3836;
    text-shadow: 0.5px 0.5px #647b96;
    font-size: smaller;
    height: 20px !important;
    display: block;

}

td.menubar p.trackwindmenu span.menu_bar_items {
    display: inline-block;
}

td.menubar p.trackwindmenu label#file:hover {
    
    color: #faffb3;
}


td.menubar p.ul {
    display: inline-block;
    text-decoration: underline;
    padding: 0 auto;
    margin: 0 auto;
}

td.menubar p.one {
    margin-left: 1%;
}

table.window td.menubar#menu_bar p.trackwindmenu {
    white-space: nowrap;
    text-overflow: hidden;
    display: inline-block;
    margin: 0%;
}


td.windowbody {
    background-color: #faffb3;
}

td.windowbody#sitemapwindowbody {
    background-image: url(backgrounds/shootingstar.gif);
    height: 420px;
}

td.windowbody#moodboard {
    background-image: url(backgrounds/tinyheartgrid.gif);
}

td.windowbody li {
    align-content: baseline;
}

td.windowbody li a {
    font-family: "2Credits";
    letter-spacing: 5px;
    color: #647b96;
    text-shadow: 1px 1px #f7adff;
    font-size: medium;
    font-weight: bold;
}

td.windowbody li a:hover {
    text-shadow: 1px 1px #faffb3;
}


.unicornbg {
    margin: auto;
    border-top: 3px double #cee4fd;
    border-left: 3px double #647b96;
    border-right: 3px double #5a5268;
    border-bottom: 3px double #3f3836;
    background-image: url(images/roadbg.png);
    width: 400px;
    height: 232px;
}

img#unicorn {
    float: right;
    display: flexbox;
}

img#construction {
    top: 240px;
    left: 150px;
    float: left;
    display: flexbox;
    position: absolute;
}


.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    float: left;
    gap: 8px;
    max-width: 220px;
    margin-top: 15px;
    padding: 5px 5px;
}

.gallery img {
    
    max-width: 100px;
    height: 200px;
    
  }

  .gallery::after {
    content: "";
    width: 100px;
  }

a.backbutton {
    position: absolute;
    bottom: 8px;
    left: 4;
    font-variant: small-caps;
    font-weight: bolder;
    z-index: 3;
}



a.backbutton#nobg:hover {
    background-image: url(backgrounds/skywal1.gif);
    color: #e15ea2;
    text-shadow: 1px 1px #faffb3;
    border-radius: 50%;
    border: 1px dotted #7386FF;
}

a.backbutton#backbuttwithbg {
    color: #faffb3;
    border: 1px solid #ffadd6;
    text-shadow: 1px 1px #415fc0;
    background-color: #9aa4e5;
    border-top-right-radius: 50%;
    border-top-left-radius: 2px;
}

a.backbutton#backbuttwithbg:hover {
    color: #ffadd6;
    border: 1px dotted #96fbb3;
    text-shadow: 1px 1px #415fc0;
    background-color: #ca8ed1;
}






a.backbuttonmachine {
    position: absolute;
    bottom: 35px;
    left: 45px;
    font-size: 12px;
    font-family: "W95FA";
    text-decoration: none;
    font-variant: small-caps;
    font-weight: bolder;
    z-index: 3;
    cursor: url('cursor/cur902.gif'), url('cursor/02.cur'), default;
}





a.backbutton#backbuttwithbgmachine {
    color: #faffb3;
    
   
    text-shadow: 1px 1px #415fc0;
    
}

a.backbutton#backbuttwithbgmachine:hover {
    scale: 110%;
}

#dreamTheatre h1 {
    display: inline-block;
    font-family: "2Credits";
    padding: 10px;
    padding-bottom: 15px;
    font-size: 30px;
    font-weight: 100;
    color: #477ce6;
    text-shadow: 1px 1px #003066;
    border-radius: 50%;
    box-shadow: 0px 0px 10px #f7adff;
    border: 5px double #6479d8;
    background-color: rgba(176, 202, 240, 0.8);
}

#dreamTheatre p {
    display: inline-block;
    font-family: "2Credits";
    font-size: 20px;
    font-weight: 100;
    text-shadow: 1px 1px #2b82aa;
    color: #f1e7ac;
    box-shadow: 0px 0px 10px #f7adff;
    padding: 12px;
    border-radius: 50%;
    border: 1px dotted #faffb3;
    background-color: rgb(231, 119, 213, 0.8);
}

body#dreamTheatre {
    background-image: url(images/glare.gif);
    background-size: cover;
    background-size: 170%;
    text-align: center;
    cursor: url(https://syntheticfruits.neocities.org/cursor/cur918.gif), url(cursor/01.cur), default;
}

img#pixelHeart {
    scale: 110%;
    display: block;
    position: absolute;
    margin-top: 3%;
    margin-left: 42%;
}

body#machine {
    background: none;
    overflow: hidden;
    width: 600px;
    height: 420px;
    margin: 0%;
    cursor: url(https://syntheticfruits.neocities.org/cursor/cur918.gif), url(cursor/01.cur), default;
}

machinebody {
    margin: auto;
    display: block;
    padding-top: 40px;
    width: 590px;
    height: 420px;
   
    background-image: url(backgrounds/bluerough.png);
    box-shadow: inset -1px -1px #523cdf,
      inset 1px 1px #dfdfdf, inset -1px -1px #f16eff,
      inset 1px 1px #ffffff;
    
    border: 1px solid #7386FF;
    border-radius: 80px 80px 50px 50px;
    
}

window {
    margin: auto;
    display: block;
    width: 500px;
    height: 300px;
    background-color: rgb(177, 213, 255, 0.5);
    box-shadow: inset 0px 0px 20px #77b2f5;
    border: double 2px #376497;
    border-radius: 40px 40px 20px 20px;
    box-shadow: 0px 0px 5px #376497;
   
}

iframe#machinewindow {
    display: block;
    margin: auto;
    width: 500px;
    height: 300px;
    border-radius: 40px 40px 20px 20px;
    background-color: #77b2f5;
    cursor: url(https://syntheticfruits.neocities.org/cursor/cur918.gif), url(cursor/01.cur), default;
    
}

controls {
    display: block;
    margin: auto;
    text-align: center;
    margin-top: 10px;
    width: 560px;
    height: 75px;
    background-image: url(backgrounds/rbowlinebg.gif);
    background-size: 25%;
    box-shadow: inset 0px 0px 30px #d573e0;
    box-shadow: 0px 0px 10px #5183bb;
    border: 1px solid #99afe0;
    padding-top: 5px;
    padding-bottom: 10px;
    border-radius: 50px;
     cursor: url(https://syntheticfruits.neocities.org/cursor/cur918.gif), url(cursor/01.cur), default;
}

controls a {
    display: inline-block;
    font-family: "2Credits";
    size: 20px;
    color: #dcdd7e;
    text-shadow: 2px 1px 2px #5a8ec9;
    text-decoration: none;
    font-variant: small-caps;
    line-height: 30px;
    background-image: url(backgrounds/rbowlinebg.gif);
    background-position: 20px;
    border: 1px solid #70a3d6;
    border-top: 1px dotted #dea5df;
    border-left: 1px solid #dc97cf;
    border-radius: 20px;
    box-shadow: 0px 2px 5px #5a8ec9;
    width: 30px;
    padding: 0px;
    height: 31px;
    margin: 8px;
    margin-top: 5px;
    margin-bottom: 0px;
     cursor: url(https://syntheticfruits.neocities.org/cursor/cur918.gif), url(cursor/01.cur), default;
}

controls a:hover {
    scale: 110%;
    cursor: url('cursor/cur902.gif'), url('cursor/02.cur'), default;
}

controls a:active {
    position: relative;
    top: 1px;
}


td.windowbody#platformFolder {
    background-image: url(backgrounds/cloudswallpaper.png);
    background-size: cover;
    height: 420px;
}


.angelIcon {
    background-image: url(images/angelic.jpg);
    width: 352px;
    height: 289px;
    margin: auto;
    margin-bottom: 10px;
}

.nextButton {
    border: 1px dotted #57caff;
    background-color: #faffb3;
    color: #003066;
    width: 320px;
    height: 55px;
    margin: auto;
}

#nextArrow {
    margin-top: 10px;
    float: right;
}

p#angelSpeak {
    font-family: '2Credits';
    padding-left: 10px;
    padding-right: 10px;
}

td.windowbody#platformFolder2 {
    height: 420px;
    background-image: url(backgrounds/desktop.gif);
    background-size: cover;
    
}

monitor {
    display: block;
    
    width: 365px;
    height: 230px;
    margin-left: 28%;
    margin-top: -13%;
    transform: rotate(-3deg);
    padding: 10px;
}
monitor img{
    margin: 5px;
}

img#heartIcon {
    width: 50px;
    vertical-align: middle;
}
img#cameraIcon {
    width: 50px;
    vertical-align: middle;
}
img#screenIcon {
    width: 50px;
    vertical-align: middle;
}
img.icon:hover {
    scale: 110%;
}
a.icon:active {
    position: relative;
    top: -2px;
}

/* ---- the desktop icons ------------------------------------------------
   One cell per icon: the art in a fixed box so captions line up no matter
   what shape the source gif is, then a flat name plate under it.

   Flat on purpose -- solid fill, a 1px border and a hard offset shadow. No
   gradients, no blur, and pixelated art so nothing gets smoothed. The idle
   bob is staggered per icon so the desktop breathes instead of pulsing in
   unison, and hover swaps it for a wiggle. */

monitor {
    /* font-size 0 collapses the whitespace between the inline-block cells;
       letter-spacing has to go too, or the inherited 2px from Styles4.css is
       still applied to that whitespace and every cell drifts 2px right. */
    font-size: 0;
    letter-spacing: 0;
}

monitor a.desk-icon {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 84px;
    /* fixed height = art + two caption lines, so a wrapped name never shoves
       the row below it down and the two rows stay square with each other */
    height: 90px;
    margin: 2px 0 4px;
    text-align: center;
    text-decoration: none;
    line-height: 1;
}

monitor a.desk-icon img {
    display: block;
    width: 46px;
    height: 50px;
    margin: 0 auto 5px;
    object-fit: contain;          /* uniform cell, original aspect kept */
    image-rendering: pixelated;   /* stay crisp -- no smoothing */
    filter: drop-shadow(1px 1px 0 rgba(70, 40, 110, .55));
    animation: deskBob 2.6s ease-in-out infinite;
}

monitor a.desk-icon .desk-label {
    display: inline-block;
    padding: 1px 3px;
    /* ModernDOS is an 8x16 bitmap face, so 16px is its native size -- one font
       pixel to one screen pixel. Any other size lands off the grid and the
       glyphs go soft, which is the whole thing we are avoiding here. */
    font-family: 'ModernDOS', 'W95FA', monospace;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0;   /* the face is monospaced already -- 8px to the cell */
    /* a two-word name wraps onto a second line rather than widening the cell,
       which is what Windows does and what keeps the top right of the wallpaper
       (the birds) clear */
    max-width: 100%;
    white-space: normal;
    color: #fff;
    background: none;   /* clear -- the wallpaper reads straight through */
    /* no antialiasing: let the edges stay square */
    -webkit-font-smoothing: none;
    font-smooth: never;
    text-rendering: geometricPrecision;
    /* a hard 1px outline in place of a fill: still flat, still no blur, and
       it keeps the caption legible over both the pale sky and the dark hills */
    text-shadow: 1px 1px 0 #4b1a3c, -1px 1px 0 #4b1a3c,
                 1px -1px 0 #4b1a3c, -1px -1px 0 #4b1a3c;
}

monitor a.desk-icon:hover img {
    animation: deskWiggle .5s ease-in-out infinite;
    scale: 112%;
}

monitor a.desk-icon:hover .desk-label {
    animation: deskFlick .5s steps(1) infinite;
}

monitor a.desk-icon:active {
    top: 1px;
}

monitor a.desk-icon:active img {
    animation: none;
}

/* offset starts, so they never bob in lockstep */
monitor a:nth-of-type(1) img { animation-delay: 0s; }
monitor a:nth-of-type(2) img { animation-delay: .3s; }
monitor a:nth-of-type(3) img { animation-delay: .6s; }
monitor a:nth-of-type(4) img { animation-delay: .9s; }
monitor a:nth-of-type(5) img { animation-delay: 1.2s; }
monitor a:nth-of-type(6) img { animation-delay: 1.5s; }

@keyframes deskBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@keyframes deskWiggle {
    0%   { transform: translateY(-2px) rotate(0deg); }
    25%  { transform: translateY(-3px) rotate(-7deg); }
    50%  { transform: translateY(-4px) rotate(0deg); }
    75%  { transform: translateY(-3px) rotate(7deg); }
    100% { transform: translateY(-2px) rotate(0deg); }
}

/* two frames, no tweening -- the old-web way to blink */
@keyframes deskFlick {
    0%, 49%   { color: #ffd6f4; }
    50%, 100% { color: #b7f0ff; }
}

@media (prefers-reduced-motion: reduce) {
    monitor a.desk-icon img,
    monitor a.desk-icon:hover img,
    monitor a.desk-icon:hover .desk-label { animation: none; }
}

td.windowbody#photoFolder {
    background-image: url(backgrounds/cloudswallpaper.png);
    background-size: cover;
}

td.windowbody#photography {
    background-image: url(backgrounds/paperpattern.gif);
    background-repeat: repeat;
}

.album {
    background-image: url(images/diary3.png);
    background-size: contain;
    width: 600px;
    height: 420px;
}

div#gallery {
        display: block;
        width: 500px;
        height: 420px;
        margin-left: 0px;
        margin-top: 0px;
        padding: 20px;
}  
div#gallery img {
    width: 200px;
    padding: 2px;
}

div#collections {
    display: block;
    position: absolute;
    width: 500px;
    height: 320px;
    
    margin-left: 50px;
    margin-top: 50px;
    padding: 20px;
}
div#collections img {
    vertical-align: middle;    
}

img#pc {
    position: absolute;
    margin-left: 1%;
    margin-top: 33%;
}
img#ladybugs {
    position: absolute;
    margin-left: 23%;
    margin-top: 48%;
}
img#flower {
    position: absolute;
    margin-left: 58%;
    margin-top: 43%;
}
img#frog {
    position: absolute;
    margin-left: 62%;
    margin-top: 20%;
}