<div class="pyro">
  <div class="before"></div>
  <div class="after"></div>
</div>
<div id="app"></div>

html {height: 100%;
      max-height: 100%; 
       margin: 0;
       body: 0;}

body {
  height: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

p {
  padding: 0;
  margin: 0;
  color: white;
  font-size: 0.9rem;
}


.container {
  
  height: 100vh;
  background: #00787f;
  box-sizing: border-box;
  
}

#layer1 {
  background: null;
 position: absolute;
  resize: both;
  z-index: 1;
  height: calc(0vh - 2rem);
  width: 100%;
  opacity: 1;
}

#emptybox {
  
  height: 0px;
  width: 0px;

      
  background: #bfb8bf;
  border-right: 1.5px solid black;
  border-bottom: 1.5px solid black;
  border-left: 1.5px solid white;
  border-top: 1.5px solid white; 
  
  box-shadow: inset -1.5px -1.5px #7f787f,
              inset 1.5px 1.5px #dfd8df ;
  
  resize: both;
  overflow: auto;
}


#grid {
  
  height: calc(100vh - 2.0rem);
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(20, 1fr);
}


#footer {
  left: 0;
  bottom: 0;
  z-index: 999;
  position: fixed;
  width: 100%;
  padding-left: 0.2rem;
  display: flex;
  align-items: center;
  height: 2.0rem;
  background: #bfb8bf;
  border-top: solid white 1px;
  box-shadow: 0rem -1px #dfd8df;
  
   }

#start-button {
  padding: 3.5px;
  outline: 0;
  display: flex;
  align-items: center;
border-right: 1.5px solid black;
  border-bottom: 1.5px solid black;
  border-left: 1.5px solid white;
  border-top: 1.5px solid white; 
  
  box-shadow: inset -1.5px -1.5px #7f787f,
              inset 1.5px 1.5px #dfd8df ;
}

#start-button:active {
  
  border-right: 1.5px solid white;
  border-bottom: 1.5px solid white;
  border-left: 1.5px solid black;
  border-top: 1.5px solid black; 
  
  box-shadow: inset -1.5px -1.5px #dfd8df,
              inset 1.5px 1.5px #7f787f ;
}

#start-logo {
  width: 18px;
  padding-right: 4px;
}

.footer2{  
  height: 2rem;
  
  }


.mycomputer {
  padding-bottom: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-row-start: 2;
  
 }

#mycomputer {
  width: 3.0rem;
  padding-bottom: 0.3rem;
}

.network {
  padding-bottom: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-row-start: 4;
}

#network {
  width: 3.0rem;
  padding-bottom: 0.3rem;
}

.recycle {
  padding-bottom: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-row-start: 6;
}

#recycle {
  width: 3.0rem;
  padding-bottom: 0.3rem;
}

.inbox {
  padding-bottom: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-row-start: 8;
}

#inbox {
  width: 3.0rem;
  padding-bottom: 0.3rem;
}

.files {
  padding-bottom: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-row-start: 10;
}

#files {
  width: 3.0rem;
  padding-bottom: 0.3rem;
}
$particles: 50;
$width: 500;
$height: 500;

// Create the explosion...
$box-shadow: ();
$box-shadow2: ();
@for $i from 0 through $particles {
  $box-shadow: $box-shadow,
               random($width)-$width / 2 + px
               random($height)-$height / 1.2 + px
               hsl(random(360), 100, 50);
  $box-shadow2: $box-shadow2, 0 0 #fff
}
@mixin keyframes ($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }

    @-moz-keyframes #{$animationName} {
        @content;
    }

    @-o-keyframes #{$animationName} {
        @content;
    }

    @-ms-keyframes #{$animationName} {
        @content;
    }

    @keyframes #{$animationName} {
        @content;
    }
}

@mixin animation-delay ($settings) {
    -moz-animation-delay: $settings;
    -webkit-animation-delay: $settings;
    -o-animation-delay: $settings;
    -ms-animation-delay: $settings;
    animation-delay: $settings;
}

@mixin animation-duration ($settings) {
    -moz-animation-duration: $settings;
    -webkit-animation-duration: $settings;
    -o-animation-duration: $settings;
    -ms-animation-duration: $settings;
    animation-duration: $settings;
}

@mixin animation ($settings) {
    -moz-animation: $settings;
    -webkit-animation: $settings;
    -o-animation: $settings;
    -ms-animation: $settings;
    animation: $settings;
}

@mixin transform ($settings) {
    transform: $settings;
    -moz-transform: $settings;
    -webkit-transform: $settings;
    -o-transform: $settings;
    -ms-transform: $settings;
}

body {
  margin:0;
  padding:0;
  background: #000;
  overflow: hidden;
}

.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 0%;
  box-shadow: $box-shadow2;
  @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
}
    
.pyro > .after {
  @include animation-delay((1.25s, 1.25s, 1.25s));
  @include animation-duration((1.25s, 1.25s, 6.25s));
}
        
@include keyframes(bang) {
  to {
    box-shadow:$box-shadow;
  }
}
    
@include keyframes(gravity)  {
  to {
    @include transform(translateY(200px));
    opacity: 0;
  }
}
    
@include keyframes(position) {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {  
    margin-top: 20%;
    margin-left: 70%
  }
  60%, 79.9% {  
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {  
    margin-top: 30%;
    margin-left: 80%;
  }
}

class Windows95 extends React.Component {
  
  
    
  render () {
    
   
     
    return (
    <div className="container">
      
          <div id="footer">
        
          <button id="start-button"><img id="start-logo"src="https://www.dropbox.com/s/fy6rtivvy23cgk4/StartLogo.png?raw=1"/>Start</button>
        
        </div> 
        
        
        <div id="layer1">
          <div id="emptybox"></div>
                </div>
        
        
        <div id="grid">
        
          
          <div class="mycomputer">
            
            <img id="mycomputer" src="https://www.dropbox.com/s/vmit12fdi4azzr1/mycomputer.png?raw=1" alt="My Computer" />
            <p>My Computer</p>
            
          </div>
          
            
          <div class="network">
            
            <img id="network" src="https://www.dropbox.com/s/xcu1cqvr66oqwm4/network.png?raw=1" alt="My Computer" />
            <p>Network Neighborhood</p>
            
          </div>
          
           <div class="recycle">
            
            <img id="recycle" src="https://www.dropbox.com/s/lytta04a3d4vtd7/recycle.png?raw=1" alt="My Computer" />
            <p>Recycle Bin</p>
            
          </div>
          
                <div class="inbox">
            
            <img id="inbox" src="https://www.dropbox.com/s/9sxfb1a8lyafu5k/inbox.png?raw=1" alt="Inbox" />
            <p>Inbox</p>
            
          </div>
          
     <div class="files">
            
            <img id="files" src="https://www.dropbox.com/s/83xf2bzroqhfzqm/files.png?raw=1" alt="Files" />
            <p>Files</p>
            
          </div>
          
          
          
        </div>
        
        <div class="footer2"></div>
        
        </div>
    )
    
  }
  
  
}

ReactDOM.render(<Windows95 />, document.getElementById("app"))