html, head, body {
    margin: 0;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
}

body {
    color: black;
}

.dark-mode {
    body {
        color: white;
    }

    .dark-mode-toggle {
        background-image: url("content/icons/night_16.png");
        alt: "moon";
    }

    .navbar {
        background-color: hsl(300, 27%, 15%);
        border-top: 4px, solid, hsl(300, 6%, 30%);
        color: white;
    }

    .task-container {
        border: 1px solid hsl(300, 6%, 30%);
    }

    .centext {
        border: 2px, solid, hsl(300, 6%, 30%);
    }

    .home-button {
        &:hover {
            background-color: gray;
        }
    }

    .home-menu {
        color: white;
        border: solid 4px hsl(300, 6%, 30%);
        background-color: hsl(300, 27%, 15%);
    }

    .pfp-zone {
        color: white;
        background-color: PINK;
        border: 3px solid hsl(300, 6%, 30%);
    }

    .info-zone, .button-zone, .link-zone {
        color: white;
        border: 2px solid hsl(300, 6%, 30%);
    }

    .styling {
        background-color: hsl(300, 27%, 25%);
        scrollbar-color: hsl(299, 17%, 28%) hsl(299, 17%, 48%);
        &:nth-child(even) {
            background-color: hsl(300, 27%, 15%);
        }
        &.a:hover{
        background-color: rgba(100, 149, 237, .2);
        border: 2px solid rgba(100, 149, 237, .15);
        }
    }

    .running-prog {
        border: solid 4px hsl(300, 6%, 30%);
        background-color: white;
    }

    .running-prog.term {
        border: solid 4px hsl(0, 0%, 21%);
    }

    .running-icons {
        &:hover {
        background-color: gray;
        }
    }

    .restart, .sleep, .power, .dark-mode-toggle {
        &:hover {
            background-color: grey;
        }
    }

    .highlight:hover {
        background-color: rgba(100, 149, 237, .2);
        border: 2px solid rgba(100, 149, 237, .15);
    }

    .head {
        color: white;
        &.common {
            background-color:  hsl(300, 27%, 15%);
            border-bottom: 2px solid hsl(300, 6%, 30%);
        }
        &.term {
            background-color: hsl(0, 0%, 53%);
            border-bottom: solid 2px hsl(0, 0%, 21%);
        }
        &.site-header {
            background-color: rgb(60, 48, 71);
            color: white;
            border-bottom: 2px solid hsl(300, 6%, 30%);
        }
    }

    .desktop-full:hover {
        background-color: rgba(100, 149, 237, .2);
        border: 2px solid rgba(100, 149, 237, .15);
    }

    .sticky-footer {
        color: white;
        border-top: 2px solid hsl(300, 6%, 30%);
        background-color:  hsl(300, 27%, 15%);
    }

    .submit-duck {
        color: black;
        background-color: hsla(59, 89%, 50%, 0.753);
    }

    .submit-trash {
        color: black;
        background-color: hsla(0, 7%, 94%, 0.753);
    }

    .content {
        color: white;
        background-color: rgb(91, 82, 94);
        &.site-header-program{
            color: black;
        }
    }

    .duck-bio {
        border-top: 1px solid rgb(223, 164, 14);
    }

    .duck-radio {
        accent-color: rgb(255, 255, 36);
    }

    .duck-icon {
        border: 3px solid rgb(209, 154, 14);
    }

    .file-entry {
        border: 1px solid grey;
    }

    .build {
        background-color: rgb(91, 82, 94);

    }

    .talk-box {
        background-color: rgb(31, 31, 31); 
        border: 1px solid white;
        color: white;
    }
}

@font-face {
    font-family: 'Determination';
    src: url('content/fonts/determination/determination.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pixel Sans Serif';
    src: url('content/fonts/pixel_sans_serif/Pixel\ Sans\ Serif.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BitPap';
    src: url('content/fonts/BitPap.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gumball';
    src: url('content/fonts/Gumball\ Thick\ Wires.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jersey15';
    src: url('content/fonts/Jersey15-Regular.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1 {
    margin: 0;
    padding: 0;
}

.image-container {
    background-image: url('./content/Desktop.png');
    background-size: cover;
    background-color: transparent;
    min-height: 100dvh;
    min-width: 100dvw;
    display: flex;
    flex-flow: column;
}

@media screen and (max-width: 768px) {
    .image-container {
        background-image: url(./content/Mobile.png);
        background-color: transparent;
        background-color: transparent;
        min-height: 100dvh;
        min-width: 100dvw;
        display: flex;
        flex-flow: column;
    }
}

.desktop-space {
    display: flex;
    top: 0;
    width: 100%;
    flex: 2 1 0;
    position: relative;
    justify-content: center;
}

.nav-space {
    display: flex;
    flex: 0 1 auto;
    margin: 0px;
    z-index: 100;
    position: relative;
}

.navbar {
    background-color: hsl(299, 24%, 58%);
    border-top: 4px, solid, hsl(299, 17%, 48%);
    display: flex;
    flex-direction: row;
    bottom: 0;
    height: fit-content;
    width: 100%;
    margin: 0px;
}


.home-container {
    align-self: flex-start;
    margin: 5px;
    height: max-content;
}

.task-container {
    /* display: flex; */
    padding: relative;
    flex: 1 1 0;
    margin: 0px;
    align-self: center;
    height: 52px;
    max-height: 52px;
    width: 100%;
    border: 1px solid hsl(299, 17%, 48%);
    overflow-x: scroll;
    flex-direction: column;

}

.time-container {
    align-self: flex-end;
    flex: 0 1 auto;
    margin: 5px;
    height: 48px;
    border: 1px solid hsl(299, 17%, 48%);
    align-items: center;
    line-height: 48px;
    padding: 2px;
}

.centext {
    border: 2px, solid, hsl(299, 17%, 38%);
    line-height: 48px;
    display: block;
    align-self: center;
}

.home-button {
    padding: 6px;
    width: 50px;
    height: 50px;
    background-image: url("content/icons/home_24.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    border: transparent;
    &:hover {
        background-color: gray;
    }
}

.home-menu {
    display: none;
    position: absolute;
    z-index: 100;
    left: 0rem;
    bottom: 0rem;
    padding: 10px;
    width: 400px;
    height: 500px;
    border: solid 4px hsl(299, 17%, 28%);
    background-color: hsl(299, 17%, 48%);
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    transition-delay: 300ms;
}

.pfp-zone {
    background-color: pink;
    position: absolute;
    right: 0rem;
    top: 0rem;
    width: 160px;
    height: 160px;
    margin-right: 10px;
    margin-top: 10px;
    border: 3px solid hsl(299, 17%, 28%);
    background-image: url("content/Untitled.png");
    background-size: 170px 170px;
    border-radius: 50%;
    background-position: -10px -5px;
    
}

.info-zone {
    background-color: transparent;
    position: absolute;
    right: 0rem;
    width: 160px;
    height: 250px;
    margin-top: 180px;
    margin-right: 10px;
    border: 2px solid hsl(299, 17%, 28%);
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.button-zone {
    position: absolute;
    right: 0rem;
    bottom: 0rem;
    width: 160px;
    height: 48px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: 2px solid hsl(299, 17%, 28%);
    align-items: center;
    justify-content: center;
    display: flex;
}

.link-zone {
    /* background-color: brown; */
    border: 2px solid hsl(299, 17%, 28%);
    display: flex;
    flex-flow: column;
    position: absolute;
    left: 0rem;
    bottom: 0rem;
    width: 220px;
    height: 495px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.styling {
    list-style-type: none;
    margin: 0px;
    padding: 3px;
    line-height: 30px;
    background-color: hsl(299, 17%, 50%);
    overflow-y: scroll;
    scrollbar-color: hsl(299, 17%, 28%) hsl(299, 17%, 48%);
    scrollbar-width: thin;
    &:nth-child(even) {
        background-color: hsl(299, 17%, 48%);
    }
    &.a {
        display: block;
    }
    &.a:hover{
        background-color: rgba(100, 149, 237, .2);
        border: 2px solid rgba(100, 149, 237, .15);
    }
}

.running-prog {
    display: none;
    flex-flow: column;
    position: absolute;
    z-index: 90;
    width: 700px;
    height: 500px;
    border: solid 4px hsl(321, 17%, 56%);
    background-color: white;
    cursor: pointer;
    align-self: center;
}

.running-prog.term {
    border: solid 4px hsl(0, 0%, 21%);
}

.running-term {
    background-color: black;
    color: chartreuse;
    height: 100%;
    width: 100%;
    margin: 0;
    /* padding: 4px; */
    overflow-y: scroll;
    overflow-x: hidden;
}

.licon {
    display: inline-flexbox;
    float: left;
    margin: 3px;
    height: 24px;
    width: 24px;
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("content/icons/missing_24.png");
    &.github {
        background-image: url("content/icons/github_24.png");
    }
    &.instagram {
        background-image: url("content/icons/insta_24.png");
    }
    &.linkedin {
        background-image: url("content/icons/lkdin_24.png");
    }
    &.pixelfed {
        background-image: url("content/icons/pixelfed_24.png");
    }
    &.website {
        background-image: url("content/icons/Favicon.png");
    }
    &.art {
        background-image: url("content/icons/art_24.png");
    }
    &.cv {
        background-image: url("content/icons/cv_24.png");
    }
    &.duck {
        background-image: url("content/icons/duck_24.png");
    }
    &.term {
        background-image: url("content/icons/term_24.png");
    }
    &.file {
        background-image: url("content/icons/file_24.png");
    }
    &.music {
        background-image: url("content/icons/music_24.png");
    }
    &.plant {
        background-image: url("content/icons/plant_24.png");
    }
    &.email {
        background-image: url("content/icons/email_24.png");
    }
    &.trash {
        background-image: url("content/icons/trash_24.png");
    }
    &.txt-txt {
        background-image: url("content/icons/txt_24.png");
    }
    &.txt-pdf {
        background-image: url("content/icons/pdf_24.png");
    }
}

.lspan {
    position: relative;
    margin: 3px;
}

.running-icons {
    display:block;
    position: relative;
    float: left;
    margin: 2px;
    width: 48px;
    height: 48px;
    flex: 1 1 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url("content/icons/missing_24.png");
    border: transparent;
    &:hover {
    background-color: gray;
    }

    &.art {
        background-image: url("content/icons/art_24.png");
    }
    &.cv {
        background-image: url("content/icons/cv_24.png");
    }
    &.duck {
        background-image: url("content/icons/duck_24.png");
    }
    &.txt {
        background-image: url("content/icons/cv_24.png");
    }
    &.file {
        background-image: url("content/icons/file_24.png");
    }
    &.music {
        background-image: url("content/icons/music_24.png");
    }
    &.plant {
        background-image: url("content/icons/plant_24.png");
    }
    &.terminal {
        background-image: url("content/icons/term_24.png");
    }
    &.trash {
        background-image: url("content/icons/trash_24.png");
    }
    &.txt-txt {
        background-image: url("content/icons/txt_24.png");
    }
    &.txt-pdf {
        background-image: url("content/icons/pdf_24.png");
    }
    &.site-header {
        background-image: url("content/icons/link_24.png");
    }
}

.restart {
    position: flexbox;
    background-color: transparent;
    height: 32px;
    width: 32px;
    margin: 8px;
    margin-right: 0px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size:contain;
    background-image: url("content/icons/restart_16.png");
    alt: "restart";
    background-position: 0px 1px;
    &:hover {
        background-color: grey;
    }
}


.sleep {
    position: flexbox;
    background-color: transparent;
    height: 32px;
    width: 32px;
    margin: 8px;
    margin-right: 0px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size:contain;
    background-image: url("content/icons/sleep_16.png");
    alt: "sleep";
    background-position: 0px 1px;
    &:hover {
        background-color: grey;
    }
}


.power {
    position: flexbox;
    background-color: transparent;
    height: 32px;
    width: 32px;
    margin: 8px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size:contain;
    background-image: url("content/icons/power_16.png");
    alt: "power down";
    background-position: 0px 2px;
    &:hover {
        background-color: grey;
    }
}

.highlight:hover {
    background-color: rgba(100, 149, 237, .2);
    border: 2px solid rgba(100, 149, 237, .15);
}

.dark-mode-toggle {
    position: flexbox;
    /* background-color: transparent; */
    height: 32px;
    width: 32px;
    margin: 8px;
    margin-left: 0px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 125%;
    padding: 2px;
    background-position: -3px -2px;
    background-image: url("content/icons/day_16.png");
    alt: "sun";


    &:hover {
        background-color: grey;
    }
}



.line {
    display: flexbox;
    width: 90%;
    margin: 4px;
    border-bottom: 2px solid hsl(299, 17%, 28%);
    height: 10 px;
    align-self: center;
}

.info-span {
    display: flexbox;
    margin-top: 4px;
}

.head {
    display: flex;
    width: 100%;
    height: 44px;
    top: 0rem;
    flex-flow: row;
    position: sticky;
    &.common{
    background-color: hsla(322, 93%, 82%, 0.67);
    /* background-color: rgb(146, 224, 255); */
    border-bottom: 2px solid hsl(321, 17%, 56%);
    }
    &.term {
        background-color: hsl(0, 0%, 53%);
        border-bottom: solid 2px hsl(0, 0%, 21%);
    }
    &.site-header {
        background-color: rgb(179, 137, 218);
        color: black;
        border-bottom: 2px solid hsl(321, 17%, 56%);

    }
}

.button-head {
    display: flexbox;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    margin: 4px;
    background-size: cover;
    background-repeat: no-repeat;;
    margin-right: 5px;

    &.min {
        background-image: url("content/icons/min_16.png");
         alt: "minus sign";

    }
    &.max {
        background-image: url("content/icons/max_16.png");
        alt: "window screen";
    }

    &.close {
        background-image: url("content/icons/close_16.png");
        alt: "red X";
    }
    &.download {
        background-image: url("content/icons/download_16.png");
        alt: "download";
        background-position: 2px 0px;
        background-size: 24px 24px;

    }
    &.next {
        display: inline-block;
        background-image: url("content/icons/next_16.png");
        alt: "right arrow";
    }
    &.prev {
        display: inline-block;
        background-image: url("content/icons/next_16.png");
        alt: "left arrow";
        transform: scaleX(-1);
    }
}

.span-title {
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    flex: 1 1 0;
}

.desktop-full {
    width: 90px;
    height: 120px;
    margin: 5px;
    display: flex;
    z-index: 90;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    flex-flow: column;
    position: absolute;

}

.desktop-full:hover {
    background-color: rgba(100, 149, 237, .2);
    border: 2px solid rgba(100, 149, 237, .15);
}

.desktop-icon {
    width: 90px;
    height: 90px;
        content: url("content/icons/missing_24.png");
        alt: "missing icon";
    &.art {
        content: url("content/icons/art_32.png");
        alt: "paint palette icon";
    }
    &.cv {
        content: url("content/icons/cv_32.png");
        alt: "cv icon";
    }
    &.duck {
        content: url("content/icons/duck_32.png");
        alt: "rubber duck icon";
    }
    &.email {
        content: url("content/icons/email_32.png");
        alt: "email icon";
    }
    &.file {
        content: url("content/icons/file_32.png");
        alt: "file folder icon";
    }
    &.music {
        content: url("content/icons/music_32.png");
        alt: "cd and music note icon";
    }
    &.plant {
        content: url("content/icons/plant_32.png");
        alt: "house plant icon";
    }
    &.term {
        content: url("content/icons/term_32.png");
        alt: "terminal icon";
    }
    &.trash {
        content: url("content/icons/trash_32.png");
        alt: "recycle bin icon";
    }
    &.site-header {
        content: url("content/icons/link_32.png");
        alt: "zelda link icon";
    }
}


.pic-head {
    width: 32px;
    height: 32px;
    display: flexbox;
    background-color: transparent;
    vertical-align: middle;
    margin: 4px;
}



.desktop-icon-text {
    display: flexbox;
    /* position: relative; */
    justify-content: flex-end;
    justify-self: center;
    color: white;
    align-self: center;
    font-family: 'Courier New', Courier, monospace;
    line-height: 25px;
    text-align: center;
}

.sleep-overlay {
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: url(content/from_online/bubbles\ 4.gif);
    background-repeat: repeat;
    z-index: 200;
    position: fixed;
    opacity: 1;
    top: 0px;
    left: 0px;
    animation: fadeIn;
    animation-duration: 1s;
}

.sticky-footer {
    position: absolute;
    right: 0rem;
    bottom: 0rem;
    border-top: 2px solid hsl(321, 17%, 56%);
    background-color: hsla(322, 93%, 82%, 0.233);
    height: 40px;
    position: sticky;
    bottom: 0rem;
    padding: 5px;
    vertical-align: middle;
    flex-flow: row;
}

.submit-duck {
    position: flexbox;
    float: right;
    border: 50%;
    height: 40px;
    width: 120px;
    align-self: center;
    align-content: center;
    word-wrap: normal;
    background-color: hsla(59, 100%, 50%, 0.233);
}

.submit-trash {
    position: flexbox;
    float: right;
    border: 50%;
    height: 40px;
    width: 120px;
    align-self: center;
    align-content: center;
    word-wrap: normal;
    background-color: hsla(0, 0%, 69%, 0.445);
}

.content {
    flex-grow: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: rgb(245, 224, 250);
}

.term .content {
    flex-grow: 1;
    overflow-y: hidden;
    overflow-x: hidden;
}

.duck-bio {
    min-height: 200px;
    vertical-align: middle;
    width: 100%;
    display: flex;
    flex-grow: 1;
    border-top: 1px solid rgb(117, 86, 6);
    flex-flow: row;
}
 .about-fmt {
    display: flexbox;
    flex-grow: 1;
 }

.duck-radio {
    align-self: center;
    display: flexbox;
    width: 2rem;
    height: 2rem;
    accent-color: yellow;
    margin-right: 30px;
}

.duck-icon {
    margin: 20px;
    align-self: center;
    display: flexbox;
    height: 150px;
    width: 150px;
    border: 3px solid rgb(117, 86, 6);
    border-radius: 3%;
    background-color: transparent;
    content: url("content/icons/missing_24.png");
    alt: "missing.png";


    &.higgs {
        content: url("./content/ducks/higgs.jpg");
        alt: "Higgs Boson .png";
    }
    &.nami {
        content: url("./content/ducks/nami.jpg");
        alt: "Nami .png";
    }
    &.tommy {
        content: url("./content/ducks/tommy.jpg");
        alt: "Tommy .png";
    }
    &.timmy {
        content: url("./content/ducks/timmy.jpg");
        alt: "Timmy .png";
    }
    &.nimda {
        content: url("./content/ducks/nimda.jpg");
        alt: "Nimda .png";
    }
    &.guy {
        content: url("./content/ducks/guy.jpg");
        alt: "Guy .png";
    }
    &.shaduck {
        content: url("./content/ducks/shaduck.jpg");
        alt: "Shaduck The Hedgehog .png";
    }
    &.napstar {
        content: url("./content/ducks/napstar.jpg");
        alt: "Napstar .png";
    }
    &.brock {
        content: url("./content/ducks/brock.jpg");
        alt: "Guy .png";
    }
}

.duck-frame {
    width: 30px;
    height: 30px;
    &.napstarR{
        background-position: -1px 0px;
    }
    &.napstarL{
        background-position: -1px 0px;
        transform: scaleX(-1);
    }
    &.nimdaR{
        background-position: -1px -36px;
    }
    &.nimdaL{
        background-position: -1px -36px;
        transform: scaleX(-1);
    }
    &.brockR{
        background-position: -1px -72px;
    }
    &.brockL{
        background-position: -1px -108px;
    }
    &.guyR{
        background-position: -1px -144px;
    }
    &.guyL{
        background-position: -1px -144px;
        transform: scaleX(-1);
    }
    &.namiR{
        background-position: -1px -180px;
    }
    &.namiL{
        background-position: -1px -216px;
    }
    &.timmyR{
        background-position: -1px -252px;
    }
    &.timmyL{
        background-position: -1px -288px;
    }&.tommyR{
        background-position: -1px -324px;
    }
    &.tommyL{
        background-position: -1px -360px;
    }
    &.higgsR{
        background-position: -1px -396px;
    }
    &.higgsL{
        background-position: -1px -432px;
    }
    &.shaduckR{
        background-position: -1px -468px;
    }
    &.shaduckL{
        background-position: -1px -504px;
    }
}

.termput {
    display: flexbox;
    background-color: transparent;
    border-color: transparent;
    outline: none;
    caret-color: chartreuse;
    color: chartreuse;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    margin-left: 0px;
    padding-left: 0;
    width: 100%;
    flex:2 1 0;
}

.history {
    height: fit-content;
    flex-grow: 1;
    width: 100%;
    color: chartreuse;
    margin-top: 6px;
}

.art-page {
    display: none;
    overflow-y: scroll;
    padding: 50px;
}

.art-fig {
    width: fit-content;
}

.art-img {
    width: 50%;
    height: auto;
    display: flexbox;
    margin-right: 50px;
}

.art-title {
    width: 100%;
    display: flexbox;
    text-align: center;
}

.art-talk {
    display: flexbox;
    flex-grow: 1;
    top: 5rem;
    right: 0rem;
}

.talk-box {
    background-color: azure; 
    border: 1px solid black; 
    padding: 5px;
}

.tip {
    position: relative;
    width: 30%;
    display: flexbox;
    padding-left: 10px;
}

.file-entry {
    display: flex;
    overflow-x:hidden;
    margin: 0px;
    padding: 0px;
    border: 1px solid grey;
}

.menu-min {
    display: flex;
    width: 250px;
}

.col-text {
    display: flex;
    text-align: left;
    width: 100%;
}
.col-text.r {
   display: flexbox;
   width: 50%; 
   right: 0;
}
.col-text.l {
   display: flexbox;
   width: 50%; 
}

.list-text {
    display: block;
    text-align: left;
    width: 100%;
}

.list-col {
    display: inline-block;
    margin: 5px;
    margin-left: 0;
    margin-right: 20px;
}

.word {
    margin-top: 20px;
}

.def {
    width: 80%;
    margin-top: 20px;
    margin-left: 30px;
}

.term-history {
    margin-left: 10px;
}

.displaying {
    min-width: 700px;
    max-width: 900px;
    display: flexbox;
    background-color: rgb(203, 243, 221);
    border-left: 3px solid chartreuse;
    border-right: 3px solid chartreuse;
    overflow: hidden;
    scrollbar-color: purple chartreuse;
}

.site-home-stuff {
    position: relative;
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(6, .5fr);
    margin: 10px;
    row-gap: 20px;
}

.home1 {
    grid-area: 1 / 2 / 2 / 21;
}

.home2 {
    grid-area: 2 / 5 / 3 / 27;
    text-align: center;
    background-color: aquamarine;
    border: 2px solid teal;
}

.home3 {
    grid-area: 3 / 2 / 5 / 14;
    vertical-align: middle;
}

.home3-style {
    grid-area: 3 / 2 / 5 / 14;
    border: 2px solid chartreuse;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    color: white;
    background-color: black;
    margin-top: 20%;
}

.home4 {
    grid-area: 5 / 6 / 6 / 25;
    padding: 15px;
    padding-top: 60px;
    text-align: center;
    font-style: oblique;
}

.home5 {
    grid-area: 6 / 2 / 7 / 30;
    text-align: center;
    background-image: url(content/from_online/sora5.gif);
    border: 2px solid ;
}

.home6 {
    grid-area: 3 / 15 / 4 / 31;
    padding: 15px;
    padding-top: 60px;
    text-align: center;
    
}

.home7 {
    grid-area: 4 / 16 / 5 / 30;
}

.home7-style {
    display: flexbox;
    grid-area: 4 / 16 / 5 / 27;
    text-align: center;  
    margin: 10px;
    padding: 10px;
    background-image: url(content/from_online/purp027.jpg);    
    border: 2px solid palevioletred;
}

.gif7 {
    padding-top: 50px;
    grid-area: 4 / 27 / 5 / 31;
    display: flexbox;
    right: 0;
}


.gif1 {
    grid-area: 1 / 24 / 2 / 30;
    /* padding: 10%; */
}

.gif2 {
    grid-area: 2 / 2 / 3 / 4;
    padding-top: 50%;
}

.gif3 {
    grid-area: 4 / 15 / 5 / 31;
    
}

.gif4 {
    grid-area: 2 / 28 / 3 / 30;
    padding-top: 50%;
}

.gif5 {
    grid-area: 5 / 2 / 6 / 6;
    padding-top: 60%;
    padding-left: 10%;
}

.gif6 {
    grid-area: 5 / 25 / 6 / 31;
    padding-top: 40%;
    padding-right: 10%;
}

.build {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: rgb(245, 224, 250);
    flex-grow: 1;
    overflow-x: hidden;
    background-image: url(content/background_moulding.png), url(content/background_moulding.png);
    background-size: 60% 20%, 256px 64px;
    background-position: bottom, top;
    background-repeat: repeat-x, repeat-x;
}

.small_bk_a {
    display: inline-block;
    border: 3px white solid;
    content: url(content/Desktop.png);
    width: 55%;
    height: auto;
    margin-right: 10px;
}

.small_bk_b {
    display: inline-block;
    border: 3px white solid;
    content: url(content/Mobile.png);
    width: 25%;
    height: auto;
}

.boarder {
    width: 100%;
    background-image: url(content/from_online/19.gif);
    background-repeat: repeat-x;
    height: 80px;
}

.duck-space {
    width: 288px;
    height: 150px;
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    /* border: 2px solid chartreuse; */
}

@keyframes duck1r {
    0% {transform: translateX(0px);}
    100% {transform: translateX(32px);}
}

@keyframes duck2r {
    0% {transform: translateX(0px);}
    100% {transform: translateX(64px);}
}

@keyframes duck3r {
    0% {transform: translateX(0px);}
    100% {transform: translateX(96px);}
}

@keyframes duck4r {
    0% {transform: translateX(0px);}
    100% {transform: translateX(128px);}
}

@keyframes duck5r {
    0% {transform: translateX(0px);}
    100% {transform: translateX(160px);}
}

@keyframes duck6r {
    0% {transform: translateX(0px);}
    100% {transform: translateX(192px);}
}

@keyframes duck7r {
    0% {transform: translateX(0px);}
    100% {transform: translateX(224px);}
}

@keyframes duck8r {
    0% {transform: translateX(0px);}
    100% {transform: translateX(256px);}
}

@keyframes duck1l {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-32px);}
}

@keyframes duck2l {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-72px);}
}

@keyframes duck3l {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-96px);}
}

@keyframes duck4l {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-128px);}
}

@keyframes duck5l {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-160px);}
}

@keyframes duck6l {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-192px);}
}

@keyframes duck7l{
    0% {transform: translateX(0px);}
    100% {transform: translateX(-224px);}
}

@keyframes duck8l {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-256px);}
}

.duck-buddy {
    width: 32px;
    height: 32px;
    bottom: 0;
    /* border: 1px solid cornflowerblue; */
    

    position: absolute;
    display: flexbox;
    animation-timing-function: linear;
    animation-delay: 10ms;
}

.duckorator {
    width: 32px;
    height: 32px;
    position: absolute;
    background-image: url(content/ducks/ducks_32.png);
}