@import url(https://fonts.googleapis.com/css?family=Merriweather);
@import url(https://fonts.googleapis.com/css?family=VT323);

body{ 
    background-color: #000000;
}

textarea {
    display: block;
    background-color: black;
    border-color: #24ef00;
    font-family: Consolas,monaco,monospace;
    border-top: none;
    color: #24ef00;
    width: 99%;
}

::placeholder{ color:#24ef00;} 

span{
    font-family:Merriweather;
    text-transform: capitalize;
    font-size: 10px;
    margin: 5px;    
}

button{
    text-transform: uppercase;
    margin:5px 0;
    padding: 5px 25px;
}
.icon{ width: 15px; float: right;}

.box{
    display: inline-block;
    text-align: left;
    border-style: solid;
    border-color: #24ef00;
    background-color: #24ef00;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.btn-cipher{
    background-color: #000000;
    border: solid #188f00;
    font-family: VT323;
    font-weight: bold;
    font-size: 18px;
    color: #188f00;
    text-transform: uppercase;
    float: left;
}

.btn-decipher{
    background-color: #188f00;
    border: solid #188f00;
    color: #000000;
    font-family: VT323;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase; 
    float: right;
}

.btn-cipher:hover{
    cursor: pointer;
    border: solid #24ef00;
    color: #24ef00;
}

.btn-decipher:hover{
    cursor: pointer;
    background-color: #24ef00;
    border: solid #24ef00;
}

#box-key{
    display: inline-block;
    text-align: left;
    border-style: solid;
    border-color: #24ef00;
    background-color: #24ef00;
    margin-left: auto;
    margin-right: auto;
    width: 206px;
}

#offset{ width: 202px; }

.item-1 { grid-area: image-1;   }
.item-2 { grid-area: cipher;    text-align: center;}
.item-3 { grid-area: key;       padding-top: 10%;   text-align: center;}
.item-4 { grid-area: image-2;   padding-top: 10%;  }
.item-5 { grid-area: decipher;  padding-top: 5%;   text-align: center;}
.item-6 { grid-area: image-3;   text-align: left; }

.grid-container{
    display: grid;
    justify-content: space-between;
    grid-template-areas: 
        'image-1 image-1 cipher cipher key key'
        'image-2 image-2 cipher cipher image-3 image-3'
        'image-2 image-2 decipher decipher image-3 image-3'
        'image-2 image-2 decipher decipher image-3 image-3';
    grid-gap: 10px;
    padding: 10px;
}

.image-display{
    display: block;
    margin-left: auto;
    margin-right: auto;
}