html{
    overflow: hidden;
    background-color: #000000;
}

.icon-text{
    text-align: center;
}

#portfolio{
    top: 10px;
}

#resume{
    top: 40px;
}

button{
    border: None;
    background: None;
}

mark{
    background-color: #DDDDDD;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 0px;
}

@media only screen and (min-width: 1400px){
    .screen{
        max-width: 1400px; 
    }
    .pop-up{
        width:40%;
    }
}

@media only screen and (min-height: 900px){
    .screen{
        height: 900px;
    }    
}

@media only screen and (max-height: 899px){
    .screen{
        height: 90vh;
    }    
}

@media only screen and (max-width: 1399px){
    .screen{
        width: 95vw;
    }
    .pop-up{
        width:80%;
    }
}

.desktop{
    height: -webkit-calc(100% - 50px);
    height:    -moz-calc(100% - 50px);
    height:         calc(100% - 50px);
}

.screen{
    position: relative;
    transition: 1s;
    transition-timing-function: ease;
    margin: auto; 
    background-color: #007C7F;
}

.icon:hover{
    border: None;
    background: #CCCCCC;
    cursor: pointer;
}

.icon-img:hover{
    cursor: pointer;
}

.icon{
    text-align: center;
    width: 100px; 
    height: 100px; 
    padding: 0.6em; 
}

.icon-img{
    width: 64px;
    height: 64px;
}

p, h1, h2, h3, h4, h5, h6 {
    font-family: 'w95font', Courier New;
    color: #FFFFFF;
}

.taskbar {
    background-color: #999999;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 50px;
}

#os-img {
    width: 32px;
    height: 32px;
}

.WasayOS {
    padding: 3px;
    border: 2px dotted black;
    max-width: 150px;
}

.os-text {
    text-align:center;
    padding-left: 10px;
    padding-right: 10px;
    line-height:6px;
    height:100px;
}

@font-face {
    font-family: 'w95font';
    src: url('/assets/fonts/w95fa-webfont.woff2') format('woff2'),
         url('/assets/fonts/w95fa-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.pop-up{
    height: 50%;
    background-color: #AAAAAA;
    
    box-shadow: 1px 1px #000;
}

.pop-up-top{
    width: 100%;
    height: 55px;
    background-color: #777777;
    display: flex;
    position: relative;
    vertical-align: top;
    align-items: center;
    justify-content: flex-end;
    box-shadow:inset 0px 0px 0px 1px #000000;
}

.pop-up-content{
    overflow-y: scroll;
    height: calc(100% - 55px);
}

.window-action-div{
    height: 32px;
    float: right;
    background-color: #AAAAAA;
    box-shadow:inset 0px 0px 0px 1px #000000;
    padding: 5px;
}

#portfolio-folder, #syncify-folder, #little-brother-folder, #workout-buddy-folder{
    visibility: hidden;
}

#portfolio-folder{
    top: 10px;
    left: 10px;
    position: absolute;
}

#syncify-folder{
    top: 20px;
    left: 20px;
    position: absolute;
}

#little-brother-folder{
    top: 30px;
    left: 30px;
    position: absolute;
}

#workout-buddy-folder{
    top: 40px;
    left: 40px;
    position: absolute;
}

.up{
    position: absolute;
    top: 0px;
    left: calc(50% - 12px);
}

.down{
    position: absolute;
    bottom: 0px;
    left: calc(50% - 12px);
}

.arrow{
    background-color: #999999;
    box-shadow:inset 0px 0px 0px 1px #000000;
    left: 0px;
    right: 0px;
}

.intro-text-content{
    float: left;
    width: -webkit-calc(100% - 32px);
    width:    -moz-calc(100% - 32px);
    width:         calc(100% - 32px);
    
}

.intro-text-content h1, h2, h3, h4, h5, h6, p{
    color: #333333;
}

.window-action-button{
    width: 32px;
}

.window-action-div:hover{
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
}

#intro-text{
    left: 30%;
}

.folder-array{
    display: flex;
}

/* Shout out to AlexBSoft on Github for his Windows 95 Code that I am gently using here */


div::-webkit-scrollbar {
  width: 20px;
    height: 90%;
}
div::-webkit-scrollbar-button:end:increment,::-webkit-scrollbar-button:start:decrement {
    display: block
}
div::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:vertical:start:increment {
    display: none
}
div::-webkit-scrollbar-button:vertical:increment {
    width: 18px;
    background: silver url("assets/images/down-arrow.png") no-repeat 50%;
    height: 18px;
    margin: 1px 1px 1px 10px;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    border: 1px outset #fff;
    box-shadow: 1px 1px #000;
}
div::-webkit-scrollbar-button:vertical:decrement {
    width: 11px;
    background: silver url("assets/images/up-arrow.png") no-repeat 50%;
    height: 16px;
    margin: 1px 1px 1px 10px;
    transform: rotateX(180deg);
    -webkit-transform: rotateY(180deg);
    border: 1px outset #fff;
    box-shadow: 1px 1px #000
}
div::-webkit-scrollbar-track{
    background-image: url(assets/images/background.bmp)
}
div::-webkit-scrollbar-thumb:vertical {
    border: 1px outset #fff;
    box-shadow: 1px 1px #000;
    height: 40px;
    background-color: silver
}
div::-webkit-scrollbar-corner:vertical {
    background-color: #000
}
div:-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
    display: block
}
div::-webkit-scrollbar-button:horizontal:end:decrement,::-webkit-scrollbar-button:horizontal:start:increment {
    display: none
}
div::-webkit-scrollbar-button:horizontal:increment {
    background: silver url("assets/images/up-arrow.png") no-repeat 50%;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg)
}
div::-webkit-scrollbar-button:horizontal:decrement,::-webkit-scrollbar-button:horizontal:increment {
    width: 18px;
    height: 18px;
    margin: 1px 1px 1px 10px;
    border: 1px outset #fff;
    box-shadow: 1px 1px #000
}
div::-webkit-scrollbar-button:horizontal:decrement {
    background: silver url("assets/images/down-arrow.png") no-repeat 50%;
    transform: rotateX(180deg);
    -webkit-transform: rotateY(180deg)
}
div::-webkit-scrollbar-track-piece {
    margin: 1px;
}
div::-webkit-scrollbar-thumb:horizontal {
    border: 1px outset #fff;
    box-shadow: 1px 1px #000;
    height: 40px;
    background-color: silver
}