macintosh styling from original site

orig-mac-style.css

/* Import Statements for Google Fonts */

@import url('https://fonts.googleapis.com/css?family=Space+Mono');

    /*  body  */
    body {
        font-family: "Space Mono", monospace;
        font-size: 20px;
        line-height: 1.45;
        color: darkcyan; 
    }
    
    .main {
        width 1100px;
        margin: auto;
    }

    /*  site status  */
    .site-status{
        transform: translate(75%, 50%);
        position: absolute;
    }

    .site-status h1 {
        /*   empty until needed.   */
    }

    .site-status h2 {
        /*   empty until needed.   */
    }

    /*  computer components  */
    
    .computer-container {
        margin-top: 100px;
        position: absolute;
    }
    
    .macintosh {
        height: 500px;
        width: 320px;
        margin: 20px;
        margin-top: 4em;
        margin-left: 1em;
        background-color: #E5E0D0;
        border-radius: 5px;
        position: absolute;
        bottom: 0;
        
    }
    
    .next-step {
        height: 375px;
        width: 300px;
        margin: 10px;
        margin-top: 5%;
        background-color: #D4CFC0;
        border-radius: 1px;
        position: absolute;
        
    }
    
    .foundation {
        height: 200px;
        width: 265px;
        margin: 15px;
        margin-left: 5.5%;
        margin-top: 5%;
        background-color: #ADA99D;
        border-radius: 2px;
        position: absolute;
    }
    
    .outerscreen {
        background-color: #68695D;
        height: 175px;
        width: 245px;
        margin-left: 4%;
        margin-top: 4%;
        position: absolute;
    }

    /*  computer screen components  */
    .screen {
        height: 160px;
        width: 230px;
        margin: 20px;
        margin-left: 3%;
        margin-top: 3%;
        background-color: lightslategrey;
        position: relative;
        float: left;
        border-radius: 5px;
        overflow: hidden;
    }
    
    .screen p {
        font-size: 28px; 
        color: lightblue;
        width: 200px;
        margin: 2em;
        margin-left: .8em;
        margin-top: 1.3em;
        opacity: 0;
        transition: 400ms;
        transition-delay: 200ms;
    }
    
    .screen:hover .desktop {
        bottom: 0;
    }
    
    .screen:hover p {
        opacity: 1;
    }
    
    .desktop {
        position: absolute;
        bottom: -48px;
        width: 100%;
        height: 45px;
        background: rgba(255, 255, 255, 0.7);
        transition: 400ms;
    }
    
    .desktop div {
        margin: 0.6em;
    }
    
    .desktop div:last-child {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    .desktop div .fa-code-fork,
    .desktop div .fa-bug,
    .desktop div .fa-moon-o {
        position: relative;
        right: -120px; 
        transition: 200ms;
    }
    
    .desktop div .fa-code-fork {
        transition-delay: 400ms;
    }
    
    .desktop div .fa-bug {
        transition-delay: 600ms;
    }
    
    .desktop div .fa-moon-o {
        transition-delay: 800ms;
    }
    
    .screen:hover .desktop div .fa-code-fork,
    .screen:hover .desktop div .fa-bug,
    .screen:hover .desktop div .fa-moon-o {
        right: 0;
    }
    
    .smallbox {
        height: 30px;
        width: 30px;
        position: absolute;
        background-color: #E5E0D0;
        border-radius: 2px;
        margin-left: 20px;
        margin-top: 320px;
        
    }
    
    /*  disc components */

    .outerdisc {
        
        /*    empty until otherwise needed    */
        
    }
    
    .o-smol {
        height: 30px;
        width: 60px;
        position: absolute;
        margin-left: 225px;
        margin-top: 250px;
        background-color: #ADA99D;
        border-radius: 2px;
    }
    
    .o-long {
        height: 15px;
        width: 75px;
        position: absolute;
        margin-left: 160px;
        margin-top: 258px;
        background-color: #ADA99D;
        border-radius: 2px;
    }
    
    .innerdisc {
        
        /*    empty until otherwise needed    */
        
    }
    
    .n-smol {
        height: 21px;
        width: 50px;
        position: absolute;
        margin-left: 230px;
        margin-top: 255px;
        background-color: #68695D;
        border-radius: 1px;
    }
    
    .n-long {
        height: 5px;
        width: 75px;
        position: absolute;
        margin-left: 165px;
        margin-top: 263px;
        background-color: #68695D;
        border-radius: 1px;
    }
    

    /* desk components */

    .desk {
        width: 100%;
        height: 150px;
        background-color: rosybrown;
        position: absolute;
        z-index: -1;
        bottom: 0;
    }
    
    .frontdesk {
        width: 100%;
        height: 15px;
        background-color: #CD9C96;
        position: absolute; 
        z-index: -1;
        bottom: 0;
    }

html for macintosh available here