/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Raleway');

body { 
    padding: 0; 
    margin: 0;
}

#title, #subtitle {
    margin-bottom: 20px;
}

#prompt {
    margin-top: 50px;
}

#description {
    margin-bottom: 50px;
}

#actions {
    margin-top: 35px;
    margin-bottom: 35px;
    padding-top: 20px;
}

@media (min-width: 800px) {
    /* CSS that should be displayed if width is equal to or more than 800px goes here */
    #size-sel {
        padding-left: 25%;
        padding-right: 25%;
    }
  }

#key-size-tip {
    padding-bottom: 25px;
} 
  
#copy-keys-action {
    margin-left: 33%;
    padding-bottom: 15px;
    visibility: hidden;
}  

#copy-encrypted-action, #copy-decrypted-action {
    padding-bottom: 15px;
    display: none;
}

#private-key, #public-key {
    margin-left: 15%;
    padding-bottom: 15px;
    width: 70%;
    visibility: hidden;
}

#private-key-tag, #public-key-tag {
    width: 100px;
}

#private-key-text, #public-key-text {
    overflow: hidden;
}

.col-sm-4 {
    margin-bottom: 10px;
}

#public-key-encrypt, #message-encrypt, #private-key-decrypt, #message-decrypt {
    margin-top: 3px;
    margin-left: 15%;
    padding-bottom: 15px;
    width: 70%;
    height: 200px;
}

#public-key-encrypt-tag, #message-encrypt-tag {
    width: 125px;
}

#private-key-decrypt-tag, #message-decrypt-tag {
    width: 165px;
}

#encrypt-action, #decrypt-action {
    margin-top: 20px;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

#encrypted-result, #decrypted-result {
    margin-left: 15%;
    padding-bottom: 15px;
    width: 70%;
    display: none;
}

#encrypted-result-tag, #decrypted-result-tag {
    width: 100px;
}

#encrypted-message-text, #decrypted-message-text {
    overflow: hidden;
}

/* loading dots */
#loading, #loading-encrypt, #loading-decrypt {
    padding-left: 48.5%;
    display: none;
}

.loading:after {
    font-size: 48px;
    content: ' .';
    animation: dots 1s steps(5, end) infinite;
}
  
@keyframes dots {
    0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);
    }
    40% {
    color: black;
    text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);
    }
    60% {
    text-shadow:
        .25em 0 0 black,
        .5em 0 0 rgba(0,0,0,0);
    }
    80%, 100% {
    text-shadow:
        .25em 0 0 black,
        .5em 0 0 black;
    }
    
}