style.css

* {
    margin: 0;
    padding: 0;
}

body {
    max-width: 100vw;
    max-height: 100vh;
    color: white;
}

#container {

    position: absolute;
    z-index: 0;

    width: 100vw;
    height: 100vh;

    background: darkblue

}

#headerArea {

    width: 95vw;
    height: 13vh;

    position: absolute;
    top: 2vh;
    left: 2vw;
    
    border-radius: 1vh;
    
    overflow-wrap: unset;
    overflow-y: auto;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: rgb(100,100,100);
    font-size: 1.5rem;
    
}

#headIcon {
    display: block;
    
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    
    margin-right: 2vh;
    
    background-color: blue;
    background-image: url('./img/avatar.jpg');
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    border: solid rgb(200,150,250) 0.5vh;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
}



/* output area elements style beging here */

#outputArea {

    width: 95vw;
    height: 60vh;

    position: absolute;
    top: 20vh;
    left:  2vw;

    background: none;

    overflow-wrap: unset;
    overflow-y: auto;

}

/***/
.chatBubble {

    min-height: 6vh;
    width: 70vw;
    
    padding: 0.5em;
    margin: 1vh;

    border: solid 2px grey;

    overflow-wrap: break-word;

    display: flex;
    flex-direction: column;
}

.sended {
    margin-left: 7vw;
    background: rgb(50,70,200);
    ;
    border-radius: 15px 15px 0px 15px;

    border-right-color: darkblue;
    border-bottom-color: darkblue;

}

.received {
    margin-left: 3vw;
    background: rgb(20,100,230);
    border-radius: 15px 15px 15px 0px;

    border-left-color: darkblue;
    border-bottom-color: darkblue;
    
}

.error {

    width: 80vw;

    margin-left: 4vw;
    background: rgb(200,30,30);
    border-radius: 5px 5px 5px 5px;

    border-left-color: darkred;
    border-bottom-color: darkred;

}

.message {

    width: 80vw;
    
    margin-left: 4vw;
    background: rgb(100,100,130);
    border-radius: 5px 5px 5px 5px;

    border-color: white;
    text-align: center;
    
}

.messageBox {
    display: block;
}

.controlBox {

    width: 100%;
    height: 4vh;

    display: flex;
    justify-content: end;
    align-items: stretch;

}

.message .controlBox {
    display: none;
}

.deleteButton {

    display: block;
    width: 1.2rem;
    height: 1.2rem;

    margin-right: 1vw;

    background: none;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-position: 50% 50%;
    
    background-image: url('img/delete-blank.png');
    
    border-radius: 0.3rem;
    border: none;
    
}

.deleteButton:hover {
    background-color: #307;
    border: solid white 1px;
}

.statusIcon {

    display: block;
    width: 1.2rem;
    height: 1.2rem;

    margin-right: 1vw;

    background: none;
    background-repeat: no-repeat;
    background-image: url('img/delete-message.svg');
    background-size: 80% 80%;
    background-position: 50% 50%;

    border: none;
}

.statusSended {
    background-image: url('img/clock.svg');
}

.statusChecked {
    background-image: url('img/check.svg');
}

.satusError {
    background-image: url('img/error.svg');
}

/** Input area elements style begin here **/

#inputArea {

    width: 95vw;
    height: 15vh;

    position: absolute;
    bottom: 2vh;
    left:  2vw;

    display: flex;
    justify-content: center;
    align-items: center;

    border: solid 2px grey;
    border-radius: 5vh;

    background: gray;

}

#inputComand {

    width: 75vw;
    height: 11vh;

    margin: 1vh;

    font-size: 1.5em;
    text-align: start;
    vertical-align: top;

    border: solid 2px grey;
    border-radius: 2vh;

    background-color: rgb(0,0,100);
    color: white;

}

#clearButton {

    width: 7vh;
    height: 7vh;

    margin: 1vh;

    font-size: 0.7em;
    text-align: center;

    background-color: white;

    border: solid 2px rgb(150, 100, 100);
    border-radius: 1vh;

    display: flex;
    align-items: center;
    justify-content: center;

}

#clearButton .svg-icon {
    width: 5vh;
    height: 5vh;
}

#clearButton .svg-icon-path {
    fill: rgb(150, 100, 100);
}

#clearButton:hover .svg-icon-path {
    fill: red;
}


#sendButton {

    width: 10vh;
    height: 10vh;

    margin: 1vh;

    font-size: 0.7em;
    text-align: center;

    background-color: rgb(0,0,100);
    background-image: linear-gradient(135deg, fuchsia, blue, cyan);
    background-size: 300% 100%;

    animation: background-default 5s ease infinite;

    border: solid 5px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    
}

#sendButton:hover {

    background-color: rgb(0,0,50);
    background-image: linear-gradient(45deg, blue, cyan);

    animation: background-hover 5s ease infinite;
    
    border: solid 5px cyan;
}

#sendButton .svg-icon {
    width: 7vh;
    height: 7vh;
}

#sendButton .svg-icon-path {
    fill: white;
}

#sendButton:hover .svg-icon-path {
    fill: white;
}

/** animations keyfraes desriptors begin here **/

@keyframes background-default {
    0% {
        background-position: 0% 50%;
        border-color: cyan;

    }
    50% {
        background-position: 100% 50%;
        border-color: fuchsia;

    }
    100% {
        background-position: 0% 50%;
        border-color: cyan;

    }
}

@keyframes background-hover {
    0% {
        background-position: 0% 50%;
        border-color: cyan;

    }
    50% {
        background-position: 100% 50%;
        border-color: blue;

    }
    100% {
        background-position: 0% 50%;
        border-color: cyan;

    }
}


@keyframes icon-gradient {
    0% {
        fill: #FFFFAB;
    }
    50% {
        fill: white;
    }
    100% {
        fill: #FFFFAB;
    }
}

@keyframes vibrate {
    0%{
        rotation: 45deg;
    }
    
    100% {
        rotation: 360deg;
    }
}