/*FONTS*/

@font-face {
    font-family: "Digital";
    src: url("../fonts/digital-7/digital-7.ttf");
}

/*GENERAL*/

*{
    padding:0;    
    margin:0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

html, body{
    width:100%;
    height:100%;
    background: linear-gradient(#FFF1F1,#C9DCFF);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
}

/*CALCU*/

#container_calcu{
    width:450px;
}

#back_calcu{
    width:100%;
}

#front_calcu{
    z-index:100;
    position:absolute;
    width:450px;
    right:30%;
}

/*SCREEN CALCU*/

#screen_calcu{
    width:200px;
    height:40px;
    transform: skew(-48deg,0deg);
    background-color:#1C283E;
    position:absolute;
    top: calc(50% - 100px);
    left: calc(50% - 35px);
    display: flex;
    align-items: center;
    overflow-x:scroll;
    overflow-y: hidden;
}

::-webkit-scrollbar{
    display:none;
}

#screen_calcu p{
    text-wrap:nowrap;
    color:white;
    margin: 0 20px;
    font-family: 'Digital';
    font-size:2rem;
    color:greenyellow;
}

/*BUTTONS*/

.buttons_line{
    position: absolute;
    z-index:100;
    display:flex;
    gap:-100px;
    overflow:hidden;
}


.line_1{
    top: calc(50% - 60px);
    left: calc(50% - 81px);
    height:30px;
}

.line_2{
    top: calc(50% - 35px);
    left: calc(50% - 112.5px);
    height:32px;
}

.line_3{
    top: calc(50% - 7.5px);
    left: calc(50% - 147.5px);
    height:34px;
}

.line_4{
    top: calc(50% + 22.5px);
    left: calc(50% - 185px);
    height:36px;
}

.button{
    position:relative;
}

.button:active{
    top: 5px;
}

/*BUTTONS LINE 1*/

.button_8{
    right:15px;
}

.button_9{
    right:30px;
}

.button_plus{
    right:45px;
}

/*BUTTONS LINE 2*/

.button_5{
    right:17.5px;
}

.button_6{
    right:36px;
}

.button_less{
    right:55px;
}

/*BUTTONS LINE 3*/

.button_2{
    right:22px;
}

.button_3{
    right:44px;
}

.button_multiply{
    right:65px;
}

/*BUTTONS LINE 4*/

.button_slash{
    right:17.5px;
}

/*INFO*/

#info{
    background-color:white;
    padding:5px 15px;
    font-size:2rem;
    position:absolute;
    bottom:25px;
    right:25px;
    border-radius:50px;
    border: solid 1px #3E69BB;
    transition:bottom 0.2s;
    cursor: pointer;
}

#info p{
    position:relative;
    top:5px;
    color:#3E69BB;
    transform:rotate(180deg);
    cursor:default;
    cursor: pointer;
}

#info:hover{
    bottom:30px;
}

/*DIV INFO*/

#div_info{
    width:500px;
    max-height:300px;
    position:absolute;
    top:100px;
    background-color:white;
    z-index:200;
    display:none;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.167);
    color:#3E69BB;
    overflow: scroll;
}

#div_info .cross{
    display:inline;
    cursor:pointer;
    font-size:2rem;
    padding: 0 15px;
    position: relative;
    left: 450px;
    
}

#div_info p{
    padding: 10px;
}