html, body {
  margin: 0;
  padding: 0;
  height:100%;
}

body{
  background-color: rgb(0, 141, 143);
  width:100%;
  justify-content: center;

  align-items: center;
}

span{
    text-overflow: ellipsis;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    position: relative;
    top: 2px;
}

.hover:hover{
  background-color: blue;
  color:white;  
}

.file{
  background-color: none;
  max-width: 50px;
  max-height: 50px;
}

.file::before{
  content: url(sprites/File.ico);
  height:30px;
  width:30px;
  position:relative;
  left:20%;
}


.folder{
  background-color: none;
  width:15%;
  height:15%;
  padding: 2%;
}

.folder::before{
  content: url(sprites/Folder.ico);
  height:30px;
  width:30px;
}

.icon{
    background-color: none;
  width:100px;
  padding: 2%;
  display: block;
  align-content: center;
}

.label {
  width:100%;
}

.computer::before{
  content: url(sprites/MyComputer.ico);
  margin-left:30%;
}

.Web::before{
  content: url(sprites/web.ico);
  margin-left:30%;
}

.Treasure::before{
  content: url(sprites/Joy.ico);
  margin-left:30%;
}

.Emulaton::before{
  content: url(sprites/MyComputer.ico);
  margin-left:30%;
}

.bar {
  height:25px;
  width:99%;
  margin:auto;
  display: flex;
}


.button {
  height:22px;
  width: 22px;
}

.window{
  display: block;
  position:absolute;
  top:30%;
  left:30%;
  width:30%;
  min-height:300px;
  background-color:rgb(199, 199, 199);
  flex-wrap: wrap;
  padding: 5px;
}

.content{
  width:99%;
  min-height: 280px;
  height:95%;
  margin:auto;
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  flex-grow: 1;
}


.taskbar {
  position:absolute;
  bottom:0%;
  height:5%;
  width: 100%;
  background-color: rgb(199, 199, 199);
  box-shadow: 
    
    inset 0px 1px #dfdfdf,
    
    inset 0px 2px #fff;
}

.shadow{
  background-color: rgb(199, 199, 199);
  box-shadow: 
  inset -1px -1px #000000,
  inset 1px 1px #dfdfdf,
  inset -2px -2px grey,
  inset 2px 2px #fff;
}