terminal.css

@font-face {
    font-family: 'Cascadia-Code';
    src: url('./assets/CascadiaMono-Regular.otf');
}

body{
    margin: 0%;
    background-color: black;
}

.console-box {
    /*Position and sizing*/
    width: 92vw;
    height: 99.6vh;

    background-color: rgba(0,0,0,0.3);
    
    
    /*padding*/
    padding: 0.2vh 4vw;
    /*overflow*/
    overflow-x: hidden;
    overflow-y: scroll;
    /*hide scroll bar: firefox & IE*/
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    
    transition: all 0.3s ease 0s;
    /*blur*/
    filter:blur(2px);
    transition: all 0.3s ease 0s;
}

/*Chrome 和 Safari 隱藏滾動條*/
::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

.console-box:hover {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    
}

#console-text-entry {
    border: none;
    background-color: transparent;
    color: white;
    padding: 0%;
    width: 50%;
}


/* word-size = (the size of the entire art) / word count*/
/* Fake terminal word count per line: 101 */
.ascii-art-fake-terminal{
    font-size: calc(100vw / 101 + 0.4vw);
    transition: all 0.3s ease 0s;
}

.ascii-art-yi-ting-chiu{
    font-size: calc(100vw / 96 + 0.2vw);
    transition: all 0.3s ease 0s;
}

@media (orientation: landscape){
    .ascii-art-fake-terminal{
        font-size: calc(65vw / 101);
    }
    .ascii-art-yi-ting-chiu{
        font-size: calc(50vw / 96);
    }
    .console-box{
        padding: 3vh 3vw;
        width: 94vw;
        height: 94vh;
    }

}

input:focus {
    outline: none;
}


.cmd-text {
    color: white;
    font-family: "Cascadia-Code";
    font-size: 1rem;
}

.cmd-link {
    color: gray;
    transition: all 0.3s ease 0s;
}

.cmd-link:hover {
    transition: all 0.3s ease 0s;
    color: rgb(211, 211, 211);
}

/* color shortcuts */

.green{
    color: rgba(0, 255, 0);
}

.red{
    color: red;
}

.dodgerblue{
    color: dodgerblue;
}

.grey{
    color: grey;
}

#particles-js{
    position: absolute; 
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    background-image: url('');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    filter:blur(1px)
}