@import url('https://fonts.googleapis.com/css?family=Open+Sans|Orbitron');

* {
    overflow: hidden;
}

.okvir {
    height: 100vh;
    background-color: lightblue;
}

.racunalo {
    position: relative;
    padding: 0;
    margin: 0;
    top: 7vh;
    width: 43vw;
    height: 64vh;
    left: 30vw;
    align-content: center middle;
    box-shadow: 1vw 1vh 1.6vw 1vh rgba(94, 94, 94, 1);
    border-radius: 2vw;
    -webkit-border-radius: 2vw;
    -moz-border-radius: 2vw;
    -ms-border-radius: 2vw;
    -o-border-radius: 2vw;
    z-index: 0;
    white-space: nowrap;
}

/* OKVIR RAČUNALA*/
#sciout {
    padding: 0.5vw;
    width: 100vw;
    height: 65vh;
    border-top: 0.1vw solid #262626;
    border-left: 0.1vw solid #262626;
    border-right: 0.2vw outset #262626;
    border-bottom: 0.2vw outset #262626;
    font-family: orbitron;
    font-weight: bolder;
    align-content: center middle;
    cursor: pointer;
    background: linear-gradient(top, #4095ff 0%, #277ce6 100%);
    background: -moz-linear-gradient(top, #4095ff 0%, #277ce6 100%);
    background: -webkit-linear-gradient(top, #4095ff 0%, #277ce6 100%);
    background: -o-linear-gradient(top, #4095ff 0%, #277ce6 100%);
    border: 0.1vw solid #338bf6;
    box-shadow: 0.3vw 0.3vh 0.26vw 0.3vh rgba(94, 94, 94, 1);
    text-shadow: 0.1vw 0.1vh 0vw rgba(0, 0, 0, 0.50);
    border-radius: 2vw;
    -webkit-border-radius: 2vw;
    -moz-border-radius: 2vw;
    -ms-border-radius: 2vw;
    -o-border-radius: 2vw;
    opacity: 0.8;
    z-index: 0;
    white-space: nowrap;
}

/* EKRAN */
#sciOutPut {
    padding: 0.3vw;
    margin: 0.2vw;
    width: 41vw;
    display: inline-block;
    cursor: text;
    font-family: orbitron;
    font-size: 6vh;
    align-content: center middle;
    text-align: right;
    color: #ffffff;
    text-shadow: 0.1vw 0.1vh 0vw rgba(0, 0, 0, 0.50);
    background-color: #4095ff;
    border: 0.5vw solid #338bf6;    
    box-shadow: 0.3vw 0.3vh 0.26vw 0.3vh rgba(94, 94, 94, 1);
    border-radius: 1vw;
    -webkit-border-radius: 1vw;
    -moz-border-radius: 1vw;
    -ms-border-radius: 1vw;
    -o-border-radius: 1vw;
    z-index: 1;
    white-space: nowrap;
}

/* ZGORNJI RAČUNSKI GUMBI */
.scifunc {
    margin: 0.5vw;
    width: 7vw;
    height:3vh;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 2vh;
    font-family: orbitron;
    font-weight: bold;
    color: #185290;
    background-color: #C8D8E8;
    border: 0.1vw solid #262626;
    box-shadow: 0.3vw 0.3vh 0.26vw 0.3vh rgba(94, 94, 94, 1);
    text-shadow: 0.1vw 0.1vh 0vw rgba(0, 0, 0, 0.50);
    border-radius: 1vw;
    -webkit-border-radius: 1vw;
    -moz-border-radius: 1vw;
    -ms-border-radius: 1vw;
    -o-border-radius: 1vw;
    z-index: 1;
    white-space: nowrap;
}

.scifunc:active {
     box-shadow: none;
}

/* GUMBKA */
.scird {
    margin: 0.5vw;
    width: 15vw;
    height: 3vh;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-family: orbitron;
    font-size: 2vh;
    color: #013f7d;
    border: 0.1vw solid #eeeeee;
    box-shadow: 0.3vw 0.3vh 0.26vw 0.3vh rgba(94, 94, 94, 1);
    text-shadow: 0.1vw 0.1vh 0vw rgba(0, 0, 0, 0.50);
    border-radius: 1vw;
    -webkit-border-radius: 1vw;
    -moz-border-radius: 1vw;
    -ms-border-radius: 1vw;
    -o-border-radius: 1vw;
    z-index: 2;
    white-space: nowrap;
}

/* ŠTEVILČNICA*/
.scinm {
    margin: 0.5vw;
    width: 7vw;
    height: 4vh;
    display: inline-block;
    vertical-align: middle;
    font-family: orbitron;
    font-size: 2vh;
    font-weight: bolder;
    text-align: center;
    color: black;
    background-color: whitesmoke;
    border: 0.5vw solid gold;
    box-shadow: 0.3vw 0.3vh 0.26vw 0.3vh rgba(94, 94, 94, 1);
    text-shadow: 0.1vw 0.1vh 0vw rgba(0, 0, 0, 0.50);
    border-radius: 9vw;
    -webkit-border-radius: 9vw;
    -moz-border-radius: 9vw;
    -ms-border-radius: 9vw;
    -o-border-radius: 9vw;
    z-index: 1;
    white-space: nowrap;
}

.scinm:active {
    box-shadow: none;
}

/* GUMBI + - / *  MS M+ M- MR +/- EXP RND MC */
.sciop {
    margin: 0.5vw;
    width: 6vw;
    height: 4vh;
    display: inline-block;
    vertical-align: middle;
    border: 0.1vw solid #262626;
    text-align: center;
    font-family: orbitron;
    font-size: 2vh;
    font-weight: bold;
    color: #262626;
    background-color: #ccc;
    background: #4095ff;
    background: linear-gradient(top, #4095ff 0%, #277ce6 100%);
    background: -moz-linear-gradient(top, #4095ff 0%, #277ce6 100%);
    background: -webkit-linear-gradient(top, #4095ff 0%, #277ce6 100%);
    background: -o-linear-gradient(top, #4095ff 0%, #277ce6 100%);
    border: 0.5vw solid #338bf6;
    box-shadow: 0.3vw 0.3vh 0.26vw 0.3vh rgba(94, 94, 94, 1);
    text-shadow: 0.1vw 0.1vh 0vw rgba(0, 0, 0, 0.50);
    border-radius: 1vw;
    -webkit-border-radius: 1vw;
    -moz-border-radius: 1vw;
    -ms-border-radius: 1vw;
    -o-border-radius: 1vw;
    z-index: 1;
    white-space: nowrap;
}

.sciop:active {
    box-shadow: none;
}

/* C IN JE ENAKO */
.scieq {
    margin: 0.5vw;
    width: 6vw;
    height: 4vh;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-family: orbitron;
    font-size: 2vh;
    font-weight: bold;
    color: #F00;
    text-shadow: 0.1vw 0.1vh 0vw rgba(0, 0, 0, 0.50);
    background-color: #DCADB0;
    border: 0.5vw solid #ec9ca2;
    text-shadow: 0.1vw 0.1vh 0vw rgba(0, 0, 0, 0.50);
    box-shadow: 0.3vw 0.3vh 0.26vw 0.3vh rgba(94, 94, 94, 1);
    border-radius: 1vw;
    -webkit-border-radius: 1vw;
    -moz-border-radius: 1vw;
    -ms-border-radius: 1vw;
    -o-border-radius: 1vw;
    z-index: 1;
    white-space: nowrap;
}

.scieq:active {
     box-shadow: none;
}