/* =========================
   MonkeyBus OS Installer
   ========================= */


* {

    box-sizing:border-box;

}



body {

    margin:0;

    min-height:100vh;

    background:#08152f;

    font-family:"MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;

    overflow:hidden;

}



/* Background logo watermark */

body::before {

    content:"";

    position:fixed;

    inset:-200px;


    background-image:url("../images/logo.png");

    background-repeat:repeat;

    background-size:140px;


    opacity:0.08;


    transform:rotate(-15deg);


    z-index:-1;

}



/* Main installer area */

.installer {

    position:fixed;

    inset:0;


    display:flex;

    justify-content:center;

    align-items:center;

}



/* Main Windows 98 style box */

.install-window {


    width:420px;


    background:#c0c0c0;


    border:

    3px outset white;


    box-shadow:

    8px 8px 0 black,

    15px 15px 25px rgba(0,0,0,.6);



}



/* Title bar */

.install-title {


    background:#000080;


    color:white;


    padding:5px 8px;


    font-weight:bold;


    font-size:14px;



}



/* Content */

.install-content {


    padding:25px;


    text-align:center;


}



.install-content h1 {


    font-size:22px;


    margin-top:0;


}



/* Text area */

#install-text {


    min-height:25px;


    margin:20px 0;


}



/* Progress bar */

.install-bar {


    width:100%;


    height:22px;


    background:white;


    border:

    3px inset white;


    padding:2px;



}



/* Progress fill */

.install-progress {


    height:100%;


    width:0%;


    background:#000080;


    animation:

    installProgress 7s linear forwards;



}



/* Progress animation */

@keyframes installProgress {


    from {

        width:0%;

    }


    to {

        width:100%;

    }


}



/* Version text */

.version {


    margin-top:20px;


    font-size:12px;


}



/* Mobile */

@media(max-width:600px){


    .install-window {


        width:90%;


    }



    .install-content {


        padding:15px;


    }



    .install-content h1 {


        font-size:18px;


    }


}

.installer {

    position:fixed;

    inset:0;

    background:#08152f;

    display:flex;

    justify-content:center;

    align-items:center;

}



.install-window {

    width:420px;

    background:#c0c0c0;

    border:3px outset white;

    box-shadow:8px 8px black;

}



.install-title {

    background:#000080;

    color:white;

    padding:5px;

    font-weight:bold;

}



.install-content {

    padding:20px;

    text-align:center;

}



.install-bar {

    height:20px;

    background:white;

    border:2px inset white;

}



.install-progress {

    height:100%;

    width:100%;

    background:#000080;

    animation:install 6s linear;

}



@keyframes install {

    from {

        width:0%;

    }

    to {

        width:100%;

    }

}

.install-status {

    margin-top:20px;

    text-align:left;

}



.status-box {

    background:white;

    border:

    2px inset white;

    padding:5px;

    font-family:monospace;

    color:#000080;

    overflow:hidden;

}



#percent {

    font-weight:bold;

}