/* For everything */
/* elements  */
body{
    background-color: #18141f;
}

main{
    width: 950px;
    height: 550px;
    margin: auto;
    margin-top: 50px;
    border-color:#97ce00;
    border-style: solid;
    position: relative;
}

nav{
    border-style: solid;
    width: 230px;
    margin-top: 250px;
    margin-left: 30px;
    background-color: #18141f;
}

ul{
    list-style-type: none;
    padding: 5 5 5 5;
}

li{
    font-family: monospace;
    font-size: 20px;
}

h1{
    font-family: 'Major Mono Display', monospace;
    font-size: 80px;
    padding-left: 30px;
    padding-top: 10px;
    margin: 0px;
    color: orangered;
}

i{
    opacity: 0.9;
    font-size: 22px;
    margin: auto;
}

input{
    z-index: 10;
}
/* classes */

.textBox{
    width: 740px;
    height: 150px;
    border-style: solid;
    border-color: yellow;
    margin: auto;
    position: absolute;
    top: 380px;
    left: 100px;
    display: grid;
    background-color: rgba(1, 1, 31, 0.7);
    z-index: 1;
    /* opacity: 0.7; */
}

.text{
    margin: 5px;
    /* min-width: 50;
    min-height: 110; */
    font-size: 22px;
    font-family: 'Space Mono', monospace;
    font-weight: 200;
    color: yellow;
    padding: 10px;
}

.talker{
    margin: 5px;
    /* background-color: rgb(99, 99, 33); */
}

.scroll{
    width: 500px;
    padding: 10px;
    overflow: hidden;
}

.constText{
    font-size: 22px;
    font-family: 'Space Mono', monospace;
    font-weight: 200;
    color: yellow;

    width: 480px;
    height: 110;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.popup{
    position: absolute;
    top: 100px;
    left: 340px;
    width: 250px;
    height: 250px;
    background-color: rgb(49, 43, 49);
    border-style: solid;
    border-width: 5px;
    border-color: yellow;
    z-index: 2;
}

.popupText{
    margin: auto;
    font-size: 22px;
    color: yellow;
    padding: 20px;
    font-family: 'Space Mono', monospace;
    font-style: italic;
    text-align: center;
}

.popupButton{
    width: 170px;
    height: 40px;
    padding: 10px;
    margin-top: 10px;
    margin-left: 40px;

    background-color: #d0e200;

    border: none;
    border-bottom: solid;
    border-right: solid;
    border-color: rgb(41, 1, 34);
    border-width: 5px;

    cursor: pointer;
    font-weight: bolder;
    white-space: normal;
}

.popupButton:hover{
    border-color: #dbe84c;
}

/* IDs  */
#nextLink{
    position: absolute;
    top: 10px;
    left: 90px;
    padding: 30px;
    /* border-style: solid;
    border-color: rgb(0, 107, 13); */
    background-image: url('img/background/nextIcon.png');
    background-size: 100%;
}

#nextLink:hover{
    cursor: pointer;
}








/* Index  */
/* IDs  */
#play{
    font-size: 60px;
    font-weight: 900;
    text-decoration: none;
    color: #00ffae;
}

#play:hover{
    color:rgb(196, 92, 32);
    cursor: pointer;
}

#musicMenu{
    position: absolute;
    margin: auto;
    margin-top: 100px;
    border-style: solid;
    background-color: antiquewhite;
    visibility: hidden;
}









/* Phone  */
/* classes */
.contact{
    border-style: solid;
    border-color: #d0e200;
    margin: 20px 10px 5px 10px;
    padding: 5px;
    width: 80%;
    color: #d0e200;
    font-family: monospace;
}

.contact:hover{
    cursor: pointer;
}

.interactible{
    cursor: pointer;
}

.texts{
    margin: auto;
    position: relative;
    top: 20px;
    border-style: solid;
    width: 80%;
    height: 85%;
    /* background-color: antiquewhite; */
}

/* IDs  */
#phoneBody{
    margin: auto;
    position: relative;
    top: 25px;
    width: 200px;
    height: 350px;
    background-size: 100%;
}

#contactsPage{
    margin: auto;
    position: relative;
    top: 20px;
    border-style: solid;
    width: 80%;
    height: 85%;
    /* background-color: aliceblue; */
}

#phoneOpen{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 30px;
    background-image: url('img/background/phoneIcon.png');
    background-size: 100%;
    width: 0px;
}

#phoneOpen:hover{
    cursor: pointer;
}








/* Hack/Rewire  */
/* classes */

/* IDs  */
#timer-outer{
    position: relative;
    margin: auto;
    width: 500px;
    height: 30px;
    top: 20px;
    border-style: solid;
    border-color: #6c8a76;
    background-color: #6c8a76;
}

#targetTyping{
    width: 350px;
    height: 50px;
    position: relative;
    top: 430px;
    left: 285px;
    background-color: #067c2f;
    color: aliceblue;
    font-size: 30px;
}

/* #hack-outer{
    margin: auto;
    width: 250px;
    height: 30px;
    top: 100px;
    border-style: solid;
} */

#timer-inner{
    margin: auto;
    height: 30px;
    top: 70px;
    background-color: rgb(27, 216, 49);
}










/* Rewire  */
/* classes */
.colour{
    padding: 25px;
    margin: 25px;
}

.colours{
    width: 50px;
    position: absolute;
    top: 40px;
}

.colliders{
    background-color: #6a0000;
    opacity: 0.8;
    border-style: double;

    position: absolute;
}

/* IDs  */
#aColours{
    float: left;
    left: 40px;
}

#bColours{
    float: right;
    right: 80px;
}

#col1{
    padding-left: 90px;
    padding-top: 60px;

    top: 80px;
    left: 350px;
}

#col2{
    padding-left: 130px;
    padding-top: 50px;

    top: 330px;
    left: 190px;
}

#col3{
    padding-left: 60px;
    padding-top: 80px;

    top: 150px;
    left: 200px;
}

#col4{
    padding-left: 180px;
    padding-top: 150px;

    top: 370px;
    left: 400px;
}

#col5{
    padding-left: 80px;
    padding-top: 230px;
    
    top: 30px;
    left: 670px;
}

#col6{
    padding-left: 100px;
    padding-top: 90px;
    
    top: 200px;
    left: 470px;
}

#startGame{
    position: relative;
    left: 31%;
    top: 8%;
    z-index: 1;

    margin-top: 5px;
    padding: 5px;

    background-color: #d0e200;

    font-size: xx-large;

    border: none;
    border-bottom: solid;
    border-right: solid;
    border-color: rgb(41, 1, 34);
    border-width: 5px;

    cursor: pointer;
    font-weight: bolder;
    white-space: normal;
}

#startGame:disabled{
    background-color: #242420;
    color: #424227;
    cursor: default;
}

#a1{
    background-image: url("img/rewire/a_c1.png");
    background-size: 100%;
}

#a2{
    background-image: url("img/rewire/a_c3.png");
    background-size: 100%;
}

#a3{
    background-image: url("img/rewire/a_c6.png");
    background-size: 100%;
}

#a4{
    background-image: url("img/rewire/a_c2.png");
    background-size: 100%;
}

#a5{
    background-image: url("img/rewire/a_c5.png");
    background-size: 100%;
}

#a6{
    background-image: url("img/rewire/a_c4.png");
    background-size: 100%;
}

#b1{
    background-image: url("img/rewire/b_c5.png");
    background-size: 100%;
}

#b2{
    background-image: url("img/rewire/b_c2.png");
    background-size: 100%;
}

#b3{
    background-image: url("img/rewire/b_c6.png");
    background-size: 100%;
}

#b4{
    background-image: url("img/rewire/b_c4.png");
    background-size: 100%;
}

#b5{
    background-image: url("img/rewire/b_c1.png");
    background-size: 100%;
}

#b6{
    background-image: url("img/rewire/b_c3.png");
    background-size: 100%;
} 







/* Kitchen1  */
/* IDs  */
#macncheese{
    position: absolute;
    padding: 30px;
    border-style: solid;
    background-color: #00ff59;
    opacity: 0.6;
    top: 260px;
    left: 60px;
}

#coffee{
    position: absolute;
    padding: 30px;
    border-style: solid;
    background-color: #00ff59;
    opacity: 0.6;
    top: 300px;
    left: 260px;
}

#radio{
    position: absolute;
    padding: 30px;
    border-style: solid;
    background-color: #00ff59;
    opacity: 0.6;
    top: 330px;
    left: 540px;
}







/* PawnShop3 */
/* IDs  */
#box{
    position: absolute;
    padding: 30px;
    border-style: solid;
    background-color: #00ff59;
    opacity: 0.6;
    top: 300px;
    left: 610px;
}
#fish{
    position: absolute;
    padding: 30px;
    border-style: solid;
    background-color: #00ff59;
    opacity: 0.6;
    top: 80px;
    left: 190px;
}
#camera{
    position: absolute;
    padding: 30px;
    border-style: solid;
    background-color: #00ff59;
    opacity: 0.6;
    top: 140px;
    left: 460px;
}
#dentures{
    position: absolute;
    padding: 30px;
    border-style: solid;
    background-color: #00ff59;
    opacity: 0.6;
    top: 210px;
    left: 60px;
}