html {
    scroll-behavior: smooth;
  }

/* -------------------------VARIABLES----------------------------------- */
:root{
    --darkestGray:#171616;
    --brightOrange:#ff3b04;
    --lightOrange:#f96034;
    --lightGray:#dedede;
    --darkGray:#4c4c4c
}
/* -------------------------BODY----------------------------------- */
body{
    background-color:var(--darkestGray);
}
h1 {
    font-family:'Questrial', sans-serif;
    font-weight: 1000;
    font-size: 40px;
    color: var(--lightOrange);
}
/* ------------------------HEADING------------------------------- */
#heading {
    display:inline-block; 
    margin-right:10px;
} 
#logo { display:inline-block; } 

header{
    display:flex;
    margin-left:50px;
}
img{
    height:100px;
}

/* ---------------------------MESSAGES---------------------------------- */
.even_messages{
    background-color:rgba(0, 0, 0,0.2);
    border-radius:10px;
    padding:5px;
    margin:5px;
}

.odd_messages{
    background-color:rgba(0, 0, 0,0.4);
    border-radius:10px;
    padding:5px;
    margin:5px;
}
#messages span{
    color:var(--lightOrange);
}

#messages p{
    color:var(--lightGray);
}

#messages{
    font-family:'roboto mono';
    font-weight:750;
    font-size:15px;
    position:relative;
    width:50%;
    left:25%;
    overflow:auto;
    min-height:400px;
    height:70vh;
    overflow-anchor: none;
    background-color:rgba(0, 0, 0,0.3);
    border-radius:5px;
}
#messages div:hover{
    animation-name:darken;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
}
@keyframes darken{
    0%{opacity:1;
        
        }
    100%{opacity:1.6;
        box-shadow:0 0 3px 1px #090909;}
}
/* ---------------------------------INPUT BOXES------------------------------ */

.inputGroup{
    position:relative;
    left:25%;
    width:fit-content;
}

input{
    border:none;
    color:none;
    background:var(--darkGray);
    opacity:1;
    margin: 10px 10px 15px 0px;

    border-radius:5px;
    padding:12px;
    caret-color:var(--brightOrange);
    color:var(--lightOrange);
    font-size:14px;
} 

#text{
    font-family:'Roboto',sans-serif;
}

input:focus{
    border:none;
    outline:none;
}
input:active{
    border:none;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--lightGray);
    margin-left:3px;
    opacity: 0.9; /* Firefox */
    font-family:'Roboto',sans-serif;
    font-size:14px;
  }

/* -------------------------BUTTONS------------------------------------------ */
.button{
    display:inline-block;
    padding:0.7em 1.4em;
    margin:0 0.3em 0.3em 0;
    border-color:var(--brightOrange);
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    text-transform:uppercase;
    font-weight:400;
    color:#FFFFFF;
    background-color:var(--darkestGray);
    box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
    text-align:center;
    position:relative;
    border-radius:5px;
    transform:translate(0,2px)
}
    @media all and (max-width:30em){
    .button{
        display:block;
        margin:0.4em auto;
    }
}

.button:focus{
    outline:none;
}

.hvr-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active {
  box-shadow: 0 0 8px var(--brightOrange);
}


/*--------------------------SCROLL BAR---------------------------*/





::-webkit-scrollbar {
    width: 10px;
    
    background-color: transparent;
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.17);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 10px;
}