*{
    margin:0;
}

html {
    height: 100%;
}
 
body {
    height: 100%;
    margin: 0;
    font-family:jetbrains;
    font-size: 20px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.screen{
    margin:0;
    height:100%;
    background-color: rgb(37, 5, 37);
    
}

.include{
    display:inline-flex;
    width:100%;
    height:100%;
}

.tab{
    margin:0;
    height:100%;
    padding:30px 20px;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

.tab::-webkit-scrollbar { 
    width: 0 !important;
    display: none; 
}

@font-face {
    font-family: jetbrains;
    src: url(../JetBrainsMono-ExtraLight.ttf);
}

.frame{
    width:auto;
    background-color: rgb(124, 216, 201);
    border-left:10px solid rgb(83, 84, 84);
    padding: 0 15px;
    color:rgb(60, 0, 95);
    margin-bottom:10px;
}

.card{
    position: relative;
    width:70%;
    height:auto;
    margin:15px auto;
    border-radius: 20px;
    padding:15px;
    box-sizing:border-box;
    word-wrap: break-word;
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

.card:hover{
    cursor:pointer;
}

/* .card::-webkit-scrollbar { 
    width: 0 !important;
    display: none; 
}

.card:hover{
    opacity:80%;
} */

.card:before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-100%;
    background: rgba(255,255,255,0.1);
    transition:0.5s; 
}

.card:hover:before{
    left:-50%;
    transform: skewX(-5deg);
}

.card:after{
    content:'';
    position:absolute;
    width:15%;
    height:100%;
    top:0;
    left:-50%;
    background: rgba(198, 184, 184, 0.1);
    transition:1s;
}

.card:hover:after{
    left:15%;
    transform: skewX(-5deg);
}

.button-show{
    float:right;
    transition:0.5s;
}

.hidden{
    display:none;
}

.box-animation-show{
    transform-origin: top;
    animation: show 0.5s linear;
}

.box-animation-hidden{
    transform-origin: top;
    animation: hidden 1s linear;
}

.title{
    font-size:25px;
    line-height:40px;
}

@keyframes show{
    from { transform: scaleY(0);}
    to { transform: scaleY(100%); }
}

@keyframes hidden{
    from { transform: scaleY(100%);}
    to { transform: scaleY(0); }
}