/* e */

:root {
    --primary-color: #000000;
    --secondary-color: #ffffff;
}

.section {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 1vh 10px;
    height: 10vh;
}

.container {
  display: lex;
  gap: 20px; 
}

.logo {
    overflow: clip;
    transition: all 0.5s ease-out;
    filter: blur(0px);
}

.banner {
    overflow: clip;
    transition: all 0.5s ease-out;
    filter: blur(0px);
}



.logo:hover {
    transform: scale(1.3) skew(45deg, 0deg);
    transition: all 1s cubic-bezier(.95,.02,.87,.99);
    filter: blur(100px);
   
}

/* fonts */

.logo-font {
    font-family: 'times-new-roman';
    font-style: italic;
    font-variant: small-caps;
    font-weight: lighter
}

/* TabSwitcher */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-btn {
    font-family: 'Times New Roman', Times, serif;
    font-style: bold;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    background-color: var(--primary-color);
    margin: 0 0px;
    color: var(--secondary-color);
    outline: var(--secondary-color) 0px solid;
    transition: all 0.3s linear;
    transform: translateY(10.1px) translateX(10px);
    height: 40px;
    border-width: 0px;
    
}
.tab-btn:hover {
    
    color: var(--secondary-color);
    background-color: var(--primary-color);
    outline: var(--secondary-color) 4px solid;
    transition: all .3s linear;
    
}

.tab-btn.active {
    background-color: var(--primary-color);

    color: var(--primary-color);
    background-color: var(--secondary-color);
    outline: var(--secondary-color) 0px solid;
    border-bottom: var(--secondary-color) 0px solid;
    transition: all 0.3s ease;
}

.tab-btn.active:hover {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    transition: all 0.3s ease;
    outline: 0px;
    
}


.content-section {
    background-color: var(--secondary-color);
    display: none;
    opacity: 20%;
    text-align: center;
    animation: fadeIn 0.5s ease;
    margin: 0px 10%;
}

.content-section.active {
    display: block;
    opacity: 100%;
    border : 2px solid var(--primary-color);
    animation: fadeIn 0.5s ease;
}

.chat {
    border: 4px solid var(--primary-color);
    border-radius: 10px;
    width: 70%;
    height: 100px;
    box-sizing: border-box;
    background-color: var(--secondary-color);
}