@font-face { font-family: "[kindergarten]"; src: url("kindergarten.ttf") format("opentype"); } 

    body {
        margin: 0;
        background-color: #00eeff;
        background-image: url(aquarium.gif);
        background-size: 100% 100%;
        color: #00c3ff;
        font-family: monospace;
    }
    .fix-stroke {
        paint-order: stroke fill;
    }

    h1{
        font-family: "[kindergarten]";
        -webkit-text-stroke: 5px #008cff;
        color:rgb(255, 217, 0);
    }

    * {
        box-sizing: border-box;
    }

    #container {
        max-width: 50vw;
        margin: 0 auto;

    }

    #container a {
        color: #64f577;
        font-weight: bold;

    }

    #headerMain{
        border: 6px solid rgb(255, 217, 0);
        border-radius:5px;
        -webkit-box-shadow:  0px 0px 36px 5px #ffbb00; 
        box-shadow:  0px 0px 36px 5px #ffbb00; 
        
    }

    #top {
        width: 100%;
        height: 30px;
        padding: 10px;
        font-size: smaller;
        background-color: #008cff;
        background-image:url(bubbles2.gif);
        background-size:20% 200%;
        color: #ffe600;
    }

    #header { 
        display: flex;
        background-color: #ffd000;
        background-image: url(sunshinewallpaper.gif);
        background-size: cover;
        height: 25vh;
        font-weight: bolder;    
        -webkit-box-shadow: inset 0px 0px 36px 18px #FF8800; 
        box-shadow: inset 0px 0px 36px 18px #FF8800;       
        overflow:hidden;
    }

    .header img {
        width:25vw;
        height: 25vh;
        filter: drop-shadow(4px 1px 21px #ffef5b)
                drop-shadow(4px 1px 21px #ffff80);


    }
    .headerimg2{
        -webkit-mask: 
        linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
        -webkit-mask-composite: intersect;
        mask-composite: intersect;
    
    }


    #logo:hover {
        transform: rotateZ(1100deg);
        transition: transform 4s ;
        filter: drop-shadow(4px 1px 21px #0084ff)
                drop-shadow(4px 1px 21px #0099ff);
    }
    #navbar {
        height: 6vh;
        width:100%;
        background-image:url(fishesbanner.gif);
        background-size:50% 400%;
        border:5px solid #003cff;
        font-size:1.2em;
        -webkit-text-stroke: 2px rgb(255, 255, 255);
        box-shadow: inset 0px 0px 36px 7px #00ff15b2,  0px 0px 36px 7px #00ff0d59;
    }

    #navbar ul {
        display: flex;
        padding: 0;
        margin: 1vh;
        list-style-type: none;
        justify-content: space-evenly;
        align-items: center;
    }

    #navbar li{
        margin-top: -0.5vh;
    }

    #navbar li img {
        margin-top: 0px;
        height:2vw;
    }

    #navbar li a {
        color: #008cff;
        text-decoration: none;
        background-image:url(a18d9e99a78af94f38ed66edae5574a9.jpg);
        background-size: contain;
        padding:5px;
        border-radius: 10px;
        filter: drop-shadow(4px 1px 21px #ffef5b);
        border:  6px solid rgb(30, 255, 0,0.6);
        
    }

    #navbar li a:hover, .dropdown:hover {
        color: #ffee00;
        text-decoration: underline;
        background-image: url(ocean.gif);
        -webkit-text-stroke: 2px rgb(30, 255, 0);
    }

    .dropdown {
        float: left;
    }

    .dropdown-content {
    display: none;
    position: absolute;
    margin-top:10px;
    min-width: 50px;
    z-index: 1;
    }

    .dropdown-content a {
    float: none;
    text-decoration: none;
    display: block;
    text-align: center;
    }

    .dropdown:hover .dropdown-content {
    display: block;
    }

    #flex {
        display: flex;
    }

    aside {
        background-color: #0077ff;
        width: 10vw;
        padding: 10px;
        border-radius: 10px;
        border-image: url(yellowsunshine2bgblue.png) 30 25 round;
        border-width: 10px;
        border-style:solid;
        -webkit-box-shadow:  0px 0px 36px 10px #0066ff; 
        box-shadow:  0px 0px 36px 10px #0066ff; 

    }
    
    aside li{
        list-style-type: none;
        
    }

    aside ul{
        padding:0
    }

    aside img{
        width:100%
    }

    main {
        background-color: #ffe600;
        background-image: url(sunshinewallpaper.jpg);
        background-size: 100% 100%;
        border: 5px solid rgb(255, 217, 0);
        box-shadow: inset 0px 0px 36px 7px #00ff157c,  0px 0px 36px 7px #00ff0d59;
        border-radius: 10px;
        flex: 1;
        padding: 20px;
        order: 2;
        font-size: 1.4em;

    }

    main p{
        paint-order: stroke fill;
        -webkit-text-stroke: 3px #002fff;
        color:#fffb00;
    }

    main p::selection{
        background: #1eff00;
        color:#ffbb00;
    }

    main img{
        max-width:100%;
        max-height:100%;
    }

    .sousmarin{
        padding:20px;
        border-width:10px;
        border-style:solid;
        border-image: url(yellowsunshine2.png) 27 25 round;
    }

    .sousmarin h1{
        margin: 0;
        font-size: 1.5em;
    }

    #leftSidebar{
        color:#64f577;
        background-image: url(sidebarbg2.gif);
        background-size: 100% 30%;
    }

    #rightSidebar{
        background-image: url(sidebarbg1.gif);
        background-size: 100% 30%;
    }

    */ #leftSidebar {
        order: 1;
    }

    #rightSidebar {
        order: 3;
    }

    footer {
        background-color: #ffe600;
        background-image: url(spiral.jpg);
        background-size:cover;
        margin-left:50%;
        transform:translate(-50%);
        width: fit-content;
        height: 40px;
        padding: 10px;
        border-radius:10px;
        text-align: center;
    }

    .window {
        position: fixed;
        top:15vh;
        left:5vw;
        max-width: 15vw;
        height: calc(250px - 2vh);
        border:5px solid #003cff;
        color:white;
        -webkit-text-stroke: 3px rgb(0, 140, 255);
        border-radius: 10px;
        backdrop-filter: blur(5px);
        background-color: rgb(255, 255, 255,0.4);
        z-index:99;
        -webkit-box-shadow:  0px 0px 36px 5px #ffffff; 
        box-shadow:  0px 0px 36px 5px #ffffff;
        overflow:scroll;
        user-select: none;
        cursor: move;
    }

    .windows-content {
        padding:10px;
        padding-top: 15px;;
    }

    .window-top{
        position:fixed;
        padding: 5px;
        height:2.5vh;
        width:14.6vw;
        background-image:url(clownfish.gif);
        background-color: #003cff;
        background-size: 100% 110%;

    }

    .tiktok-container{
        display: none;
        position: absolute;
        background:black;
        top: 10vh;
        left: 40vw;
        width: 600px;
        height:900px;
        max-width: 90vw; 
        max-height: 90vh; 
        border: 2px solid #003cff;
        box-shadow: 0 0 10px rgb(0, 17, 255);
        box-shadow: 1 1 10px rgb(0, 17, 255);
        box-shadow: 1 1 10px rgb(0, 17, 255);
        border-radius: 10px;
        overflow: hidden;
        z-index: 9999;
    }

    .tiktok-header{
        background: #003cff;
        color: white;
        padding: 17px;
        cursor: grab;
    }

    .tiktok-content{
        width:100%;
        height:calc(100% - 40px);
        overflow:hidden;
    }

    .marquee {
        position: relative;
        width: 30vw;
        height:93%;
        max-width: 100%;
        overflow: hidden;
    }

    .track {
        overflow: visible;
        position: absolute;
        white-space: nowrap;
        will-change: transform;
        animation: marquee 20s linear infinite;
    }

    .track:hover{
        animation-play-state: paused;
    }

    .searchbar{
        width: 100%;
        box-sizing: border-box;
        border: 5px solid #00ff00;
        border-radius: 4px;
        font-size: 16px;
        background-color: rgb(255, 255, 255);
        background-image: url('searchicon.png');
        background-size: 10% 95%;
        padding-left: 2vh;
        background-repeat: no-repeat;
        color: #003cff;
    }

    @keyframes marquee {
        0% { transform: translateY(0%); }
        100%{ transform: translateY(-50%); }
    }
    
    .chatbox{
        background:url(oceanbackground.png);
        background-size:cover;
        border: 3px outset rgb(30, 255, 0);
        border-radius: 10px;
    }

    @media only screen and (max-width: 600px) {

        * {
            box-sizing: border-box;
        }

        #container{
            min-width:80vw;
        }


        #flex {
            flex-wrap: wrap;
        }

        .marquee-header {
            margin-left:5vw;
        }

        aside {
            width: 100%;
        }


        main {
            order: 1;
        }

        #leftSidebar {
            order: 2;
        }

        #rightSidebar {
            order: 3;
        }
        #navbar {
            min-height: 80px;
            min-width:auto;
            padding:0;
            margin:0;

        }
        #navbar ul {
            flex-wrap: wrap;
            justify-content: center;

        }

        #navbar li a {
            padding:5px;
            font-size: 0.5em;
        }

        .tiktok-container{
            width: 70vw;
            height: 60vh;
            max-width: none; 
            max-height: none;
        }

        .window{
            min-width:50vw;
        }

        .window-top{
            width:47.4vw;

            }

        #floating{
            display:none;
        }

    }