/*
 *  ZEUS - An Electrifying Build System
 *  Copyright (c) 2017 Philipp Mieden <dreadl0ck [at] protonmail [dot] ch>
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

* {
    box-sizing: border-box;
}

i {
    color: white; 
    font-size: 15px !important;
}

.buttons {
    position: absolute;
    top: 180px;
    right: 10px;
}

#main-spinner {
    display: none;
    position: absolute;
    right: 20px;
    top: 20px;
    .loader {
        border-radius: 50%;
        width: 5em;
        height: 5em;
    }
}

html {
    background-color: gray;
}

.logo {
    opacity: 0.7;
    width: 250px;
    height: 185px;
    margin-left: 11px;
    margin-top: 5px;
    margin-bottom: -5px;
}

.navbar {
    position: absolute;
    top: -60px;
    width: 100%;
}

footer {
    float: right;
    color: white;
    margin: 10px;
}

.screen {
    margin: 10px;
    background-color: black;
    color: #00B100;
    opacity: 0.8;
    height: 580px;
    border-radius: 15px;
    padding: 20px;
    width: 98%;
}

.inspect-button {

    cursor: pointer;
    background-color: black;
    border: 2px gray solid;
    border-radius: 5px;
    color: white;
    width: 100px;
    height: 50px;

    &.hvr-glow:hover,
    &.hvr-glow:focus {
        box-shadow: 0 0 10px rgba(0,128,0,1);
    }


    .fa {
        font-size: 16px;
    }

    &:hover,
    &:focus,
    &.highlight {
        border-color: 00b100;
        color: white;
    }

}

// Spinner

/* Spinner animation & element. */
.loader {
    margin: 0 auto;
    margin: 60px auto;
    font-size: 10px;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: loading-spin 1.1s infinite linear;
    animation: loading-spin 1.1s infinite linear;
}

h1 {
    color: #FFF;
    b {
        top: -35px;
        position: relative;
    }
    text-align: center;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

@-webkit-keyframes loading-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loading-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
