#search:hover{cursor: text;}

#wrap{position: relative; 
    background: rgb(62,145,141);
    width:100%;
    height: 100vh; 
    overflow: hidden; 
    margin:auto;}


#container{position:absolute; 
    width:100%;
    height: 100%;
    background: black; 
    margin:auto; 
    top:0px;left: 0px;
    cursor: pointer;}


#txt{width:110px;
    text-align: center; 
    position: absolute; 
    font-family: 'Chakra Petch', sans-serif; font-weight: 500;font-size:2em;
    right: 1.5%; 
    bottom:6px;
    }

#computer{width:90%; height: inherit; background: url(computer.jpg); 
    background-size:cover; position: absolute; margin:auto;}

#computerfront{width:90%; height: inherit; background:url(computerfront.png);
background-size: cover; position:absolute; margin:auto;
position: absolute; margin:auto;  
}

#loading{width:35%; height: 40%;
            position: absolute; left:49%; top:36%;transform: translate(-50%,-50%);
            margin:auto; background: url('loading.gif'); background-size: cover;}

#glitch{width:50%; height: 50%; background:url('glitch.gif');
background-size:cover;position: absolute; left:calc(50% - 15%); 
 top:16%; margin:auto; background-color: black;}

#startsign{font-family: 'Chakra Petch', sans-serif; font-weight: 700;font-size:2em; 
color: white; text-align: center; position: absolute;margin:auto; width:100%;
top:34%;left: calc(51% - 50%);} 

#underbar{background: url('underbar.png') no-repeat 50% 50%; background-size: cover; 
        background-size: cover; 
        width:100%;
        height: 50px;
        position: absolute; 
        bottom:0;
        animation: later 5s forwards cubic-bezier(1,.02,0,.100);}
            

#startbut{background: url('start.jpg'); 
        background-size: cover; 
        margin:auto;
        width:110px; 
        height: 45px; 
        position: absolute; 
        bottom:2px; 
        left:10px;
        cursor: pointer;}


#start2{background: url('start2.png'); 
        background-size: cover; 
        margin:auto;
        width:110px; height: 45px; 
        position: absolute; 
        bottom: 2px;
        left:10px;
        cursor: pointer;}


#menu{background:url('menu.png'); 
    background-size: cover; 
    margin:auto;
    width: 200px; height: 300px; 
    position: absolute; 
    bottom:50px; 
    z-index: 1;}

#file{background:url('file.png'); 
    background-size: cover; 
    margin:auto;
    width: 110px; 
    height: 100px; 
    position: absolute;top:30px; 
    left:-20px;
    display: block;
    cursor: pointer;}


#fileclicked{background:url('clicked.png'); 
            background-size: cover; 
            margin:auto;
            width: 80px; 
            height: 80px; 
            position: absolute;
            top:39px; left:18px;
            display: block;
            cursor: pointer;}


#mycomputer{background:url('mycomputer.png'); 
            background-size: cover; 
            margin:auto; 
            width: 95px; height: 80px; 
            position: absolute; 
            top:160px; left:0px;          
            display: block;
            cursor: pointer;}

#mycomputerclicked{background:url('clicked.png'); 
            background-size: cover; 
            margin:auto; 
            width: 80px; height: 80px; 
            position: absolute; 
            top:160px; left:18px;
            display: block;}

#trash{background:url('trash.png'); 
        background-size: cover; 
        margin:auto;
        width: 105px; height: 80px; 
        position: absolute; 
        top:400px; left:-10px;
        display: block;
        cursor: pointer;}


#internet{background:url('internet.png'); 
        background-size: cover; 
        margin:auto;
        width: 200px; height: 85px; 
        position: absolute; 
        top:270px; left:-43px;
        display: block;
        cursor: pointer;}

#internetclicked{background:url('clicked.png'); 
        background-size: cover; 
        margin:auto; 
        width: 80px; height: 80px; 
        position: absolute; 
        top:285px; left:18px;
        display: block;}

#music{background:url('music.png'); background-size: cover; margin:auto;
            width: 100px; height: 95px; position: absolute; top:500px; left:5px;
            display: block;cursor: pointer;}


#musicclicked{background:url('clicked.png'); background-size: cover; margin:auto;
            width: 80px; height: 80px; position: absolute; top:520px; left:20px;
            display: block;}

#documents{background:url('documents.png'); background-size: cover; margin:auto;
            width: 80px; height: 95px; position: absolute; top:620px; left:10px;
           display: block;cursor: pointer;}

#documentsclicked{background:url('clicked.png'); background-size: cover; margin:auto;
            width: 80px; height: 80px; position: absolute; top:635px; left:10px;
            display: block;}

#filewindow{background:url(filewindow.png);
            background-size:cover; 
            width: 500px; 
            height: 402px; 
            position: absolute;
            top:200px; 
            left:300px; 
            margin:auto; 
            animation:bigger 0.3s;
            cursor: pointer;}
           
            @keyframes bigger{
                from{transform: scale(0,0);}
                to{transform: scale(1,1);}
            }

#windowbackground{width:450px;
                height: 270px; 
                background:url('background.jpg'); 
                background-size:cover; 
                margin:auto; 
                position: absolute; 
                left:27px; 
                top:84px;}

#carrier{background: url(carrierwoman.gif); background-size: cover; margin:auto;
        position: absolute; width: 220px; height: 180px; top:180px; left:108px;
        animation: shake 4s forwards cubic-bezier(.82,.13,.98,.28);}

        @keyframes shake{
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
                  from{left:108px;}
                  to{left:-550px;}
            }

#fileonline{background: url('fileonline.png'); 
        background-size: cover; 
        margin:auto;
        width:350px; height: 46px; 
        position: absolute; 
        bottom:1.8px;
        left:150px;
        display: block;}

#mycomputeronline{background: url('mycomputeronline.png'); 
            background-size: cover; 
            margin:auto;
            width:350px; height: 46px; 
            position: absolute; 
            bottom:1.8px; left:150px;
            display: block;}


#internetonline{background: url('internetonline.png'); 
        background-size: cover; 
        margin:auto;
        width:350px; 
        height: 46px; 
        position: absolute; 
        bottom:1.8px; 
        left:150px;
        display: block;}

#documentsonline{background: url('documentsonline.png'); 
        background-size: cover; 
        margin:auto;
        width:350px; height: 46px; 
        position: absolute; 
        bottom:1.8px; left:150px;
        display: block;}

#trashonline{background: url('trashonline.png'); 
        background-size: cover; 
        margin:auto;
        width:350px; height: 46px; 
        position: absolute; 
        bottom:1.8px; left:150px;
        display: block;}

#musiconline{background: url('musiconline.png'); 
        background-size: cover; 
        margin:auto;
        width:350px; height: 46px; 
        position: absolute; 
        bottom:1.8px; left:150px;
        display: block;}


.error{background:url("error.jpg"); 
        background-size: cover; 
        margin:auto;
        position: absolute;
        width:350px;height: 150px; 
        top:0px; left:1000px;
        animation:drop 10s; position:absolute;}

        @keyframes drop{
            from{margin-top:0;}
            to{margin-top:100px;}
        }

#theend{background:url("theend.gif"); 
        background-size: cover; 
        margin:auto;
        position: absolute;
        width:420px;height: 400px; 
        top:450px; right:calc(50% - 210px); 
        z-index: 2;cursor: pointer;
        }

#man{background:url("man.gif"); 
        background-size: cover; 
        margin:auto;
        position: absolute;
        width:300px;height: 225px; 
        top:400px; right:30px; 
        z-index: 2;
        }

#internetwindow{background:url("internetwindow.jpg"); 
        background-size: cover; 
        margin:auto;
        position: absolute;
        width:897px;height: 642px; 
        top:50px; left:300px; 
        z-index: 2;
        animation:bigger 0.3s;
        cursor: pointer;}

#search{background:url("search.png"); 
        background-size: cover; 
        margin:auto;
        position: absolute;
        width:617px; height: 47px; 
        top:290px; left:calc(50% - 308px); 
        z-index: 3;
        display: block;}

#textcursor{position: absolute; width:20px; left: 10px; top:16px;}

#upper{background:url("upper.png"); 
        background-size: cover; 
        margin:auto;
        position: absolute;
        width:897px; height: 124px; 
        top:0px; left:calc(50% - 448px); 
        z-index: 3;
        display: block;}

 #steady{width: 500px;
        top:150px;
        left:calc(50% - 250px); 
        position: absolute; 
        z-index: 4;}

 #cd{width: 290px; 
    height:351px;
    top:300px; 
    left:-40px; 
    position: absolute; 
    z-index: 6;
    margin:auto;
    background:url('cd.gif');
    background-size: cover;}


#drill{width: 300px; 
    height:309px;
    top:200px; 
    right:-50px; 
    position: absolute; 
    z-index: 6;
    margin:auto; 
    background:url('drill.gif'); 
    background-size: cover;}

#word{background:url(word.jpg); 
    background-size:cover; 
    width: 753px; 
    height: 565px; 
    position:absolute;
    top:100px; 
    left: 300px;
    cursor: pointer;}

#kermit{background:url(kermit.gif); 
    background-size:cover; 
    width: 240px; 
    height: 358px; 
    position:absolute;
    top:180px; 
    left:calc(80% - 120px);
    cursor: pointer;}

.flo{height: 40px; 
    margin-left:-20px;
    margin-top:180px; 
    position: absolute; 
    font-weight: bold; 
    animation: helpp 1s forwards; 
    opacity: 0; 
    transition : all 1s;
    font-family: 'Chakra Petch', sans-serif; 
    font-weight: 500;font-size:2em;}
        
    @keyframes helpp{
        from {left:0; opacity: 0;}
        to{left:50px; opacity: 1;}
        }


#byekermit{background-size: cover; 
    background: url(kermit2.gif); 
    width:300px; bottom:0px; 
    height:450px;
    position: absolute; 
    animation:ohyeah 3s forwards cubic-bezier(.82,.13,.98,.28);
    z-index: 9999;}

        @keyframes ohyeah {
            from{right: -30px;}
            to{right: 3000px;}
        }

#arrow{background-size: cover; 
    background: url(arrow.gif); 
    width:180px; height: 90px; 
    text-align: center; font-family: 'Chakra Petch', sans-serif; font-weight: 500;
    font-size:1.5em; 
    position: absolute; 
    bottom:10px; left: 300px;}

.kermitt{height: 40px; 
        margin-left:0px;
        margin-top:250px;
        position: absolute; 
        font-weight: bold; 
        animation: kermitt 2s forwards;
        transition : all 1s;font-family: 'Chakra Petch', sans-serif; 
        font-weight: 500;font-size:6em; color: rgb(247,0,94);}
       
        @keyframes kermitt{
            from {visibility: visible;}
            to{transform: rotateY(80deg) rotateX(380deg); visibility: hidden;}
        }

.kermitt2{height: 40px; 
    margin-left:600px; 
    margin-top:250px;
    position: absolute; 
    font-weight: bold; 
    animation: kermitt 2s forwards;  
    transition : all 1s;font-family: 'Chakra Petch', sans-serif; 
    font-weight: 500;font-size:6em; 
    color: rgb(247,0,94);}

.kermitt3{height: 40px; 
    margin-left:1200px; 
    margin-top:250px;
    position: absolute; 
    font-weight: bold; 
    animation: kermitt 2s forwards;  
    transition : all 1s;font-family: 'Chakra Petch', sans-serif; 
    font-weight: 500;font-size:6em; color: rgb(247,0,94);}

#trashclicked{background:url('clicked.png'); background-size: cover; margin:auto;
            width: 80px; height: 80px; position: absolute; top:398px; left:17px;
            display: block;}

#trashwindow{background:url('trashwindow.png'); background-size:cover; margin:auto;
width:465px; height: 445px; display:block; position: absolute; top:200px; right:600px;
cursor: pointer;}

#water{position:absolute; width:445px; height:257px; top:133px;left: 
    calc(50% - 222.5px);}

.seaweed{width:130px; position: absolute; bottom: 42px; left: 10px;cursor:pointer;}

.plant{width:250px; position: absolute; bottom: 40px; right: -50px;cursor:pointer;}
.plant2{width:150px; position: absolute; bottom: 40px; right: 80px;cursor:pointer;}

#chicken{width:147px; position: absolute; cursor: move; 
         top:150px; right:200px; 
         animation: dolphin 5s infinite cubic-bezier(.5,.92,.82,.95);
         transform-origin: 50% 50%;}

        @keyframes dolphin {
        from{transform: scale(0,0);}
        to{transform:scale(2,2);}
        }

#dolphin2{width:200px; position: absolute; cursor: move; 
        animation:swim 5s infinite;}

         @keyframes swim {
            from{top:800px; left:100px;}
            to{top:350px; left:500px;}
         }
#fish{width:150px; position:absolute; cursor: move; right: 350px; bottom:200px;
   animation:shakee 2s infinite;}

        @keyframes shakee {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }

#starfish{ position: absolute; top:50px; left:100px; cursor:move; width:200px; }
#starfish2{ position: absolute; top:500px; left:1000px; cursor:move; width:300px; }
#starfish3{ position: absolute; bottom:100px; left:300px; cursor:move; width:220px; }
#starfish4{ position: absolute; bottom:30px; right:100px; cursor:move; width:200px; }

#starfishh{ position: absolute; top:400px; left:100px; cursor:move; width:100px; }
#starfishh2{ position: absolute; top:5px; right:1000px; cursor:move; width:250px; }
#starfishh3{ position: absolute; top:100px; right:400px; cursor:move; width:200px; }
#landingnet{position: absolute;width:250px;background: red;}
#tongue{width:400px; left:calc(50% - 200px); position:absolute; 
    animation:here 3s forwards cubic-bezier(1,.03,.59,.96); 
    display: block; cursor: pointer;}

    @keyframes here {
        from{top:-400px;}
        to{top:250px;}
    }


#canvasDiv{position:absolute; top:100px; left:500px;}

#windowbox{width:700px; height: 340px; position: absolute; top:200px; left: 400px;}

#musicwindow{width:700px; height: 340px; background:url(musicwindow.png);
background-size: cover; position: absolute;cursor: pointer;}

* {
  box-sizing: border-box;
}

.row {
  display: flex; position: absolute;
  width:680px; height: 287px;
  top:50px; left: 10px;
}

/* Left column (menu) */
.left {
  flex: 35%;
  padding: 15px 0;
}

.left h2 {
  padding-left: 8px;
}

/* Right column (page content) */
.right {
  flex: 65%;
  padding: 15px;
}

/* Style the search box */
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border:1px solid #ddd;
  font-family: font-family: 'Chakra Petch', sans-serif; 
  font-weight: 700;font-size:1em;
}

/* Style the navigation menu inside the left column */
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-family: font-family: 'Chakra Petch', sans-serif; font-weight: 
  700;font-size:1em;
}

#myMenu li a {
  backgrxound-color: #f6f6f6;
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myMenu li a:hover {
  background-color: blue;
  color:white;
}

.whatkindofmusic{font-family:'Chakra Petch', sans-serif; 
font-weight: 700;font-size:1em; line-height: 1em;}

#lips{width:200px; position: absolute; top:35px; right: 15%;}

#sadsongvid{position: absolute; width:400px; height: 100%;right:0px; }

#rocksongvid{position: absolute; width:400px; height: 100%;right:0px; }

#jazzsongvid{position: absolute; width:400px; height: 100%;right:0px; }

#singing{position: absolute; width:400px; height: 100%;right:0px; }

#singing2{position: absolute; width:400px; height: 100%;right:0px; }

#thuglife{animation:thug 3s forwards;position: absolute; width:400px; right:70px;}
@keyframes thug{
    from{top:-200px;}
    to{top:-40px;}
}
#fu{position: absolute; width:80px; left:120px; bottom:0px;}
#superbella{position: absolute;width:250px; right: 100px; top:180px;}