@import "/ui/Hud/Style.scss";

Abilities{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
        background-color: rgba(0, 0, 0, 0.913);
        backdrop-filter: $fullscreen-blur;
        pointer-events: all;
        transition: opacity 0.5s ease;
        
            &:intro {
                opacity: 0;
            }

        .sidehud {
        position: absolute;
        right: 88%;
        top: 1%;
        height: 100%;
        width: 7%;
        z-index: 10;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.068);
        margin-top: 50px;
        flex-direction: column;
        justify-content:flex-start;
        border-radius: 10px;
        margin-top: 10px;
        gap:45px;
       
        
        }
        .playe3 {
            position: absolute;
            left: 15%;
            
            top:2%;
            width: 20%;
            background-color: rgba(0, 0, 0, 0);
            color:white;
            font-size: 25px;
            font-weight: 1000;
            border-radius: 10px;
            padding:10px;
            border-color: rgb(255, 255, 255);
            border-width:1px;
            justify-content: center;
            
            .playe2{
                position: relative;
                justify-content: center;
                align-items: center;
                height: 100%;
                width: 100%;
                color: rgb(201, 201, 201);
                
                
                
            }
            .nu {
            position: relative;
            width: 100%;
            font-size: 25px;
            justify-content: center;
            align-items: center;
            color: rgb(0, 255, 64);
            font-weight: 1000;
            animation: blink 1s linear infinite;
            
            
            }
            
            
            
            
            
        }

        .main{
            position: relative;
            left: 15%;
            top: 15%;
            width: 60%;
            height: 70%;
            
            
            
            
            
            .panel{
                position: relative;
                width: 100%;
                height: 100%;
                background-image: url(/ui/textures/wood.jpg);
                border-radius: 10px;
                border-color: black;
                border-width: 1px;
                font-family: Geneva;
                .panel-header{
                    position: absolute;
                    width: 100%;
                   
                   border-radius: 10px;
                    justify-content: center;
                    align-items: center;
                    top: -60px;
                    height: 7%;
                    
                    background-image: url(/ui/textures/wood.jpg);
                    border-radius: 10px;
                    border-color: black;
                    border-width: 1px;
                    margin-top: 2px;

                  
                    .panel-header-text{
                        
                        position: relative;
                        width: 100%;
                        height: 100%;
                        font-family: Geneva;
                        text-align: center;
                        text-shadow: 5px 5px 5px black;
                        font-style: italic;
                        font-size: 32px;
                        letter-spacing: 1px;
                        font-weight: bold;
                        color: rgb(255, 255, 255);
                        justify-content: center;
                        align-items: center;

                       
                    }
                }
                .panel-content{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    font-family: Geneva;
                    
                    padding: 15px;
                    
                    
                    .panel-content-text{
                        position: relative;
                        width: 100%;
                       
                        
                    }

                    .panel-content-layout{
                        position: relative;
                        width: 100%;
                        background-color: rgba(0, 0, 0, 0.826);
                        background-size: 100%;
                        background-position: center;
                        border-radius: 10px;
                        border-color: rgba(0, 0, 0, 0.404);
                        border-width:1px;
                        padding: 15px;
                        color:rgb(246, 246, 246);
                       
                        overflow-x: scroll;
                        
                        
                        
                        
                       
                        .panel-button-layout{
                            position: relative;
                            gap: 30px;
                            flex-direction: column;
                            width: 100%;
                            height: 100%;
                           
                            align-content: center;
                            overflow-y: scroll;
                                                        
                            
                            .box
                            {
                                
                                position: relative;
                                width: 100%;
                                height: 5%;
                                gap:5px;
                                
                                
                                
                               
                                
                            .amount {
                                    position: relative;
                                    width:100%;
                                    height: 20%;
                                   
                                    color: rgb(255, 255, 255);
                                    font-size: 20px;
                            
                            
                                    border-color: rgb(0, 0, 0);
                                    background-color: rgba(11, 0, 0, 0.73);
                                    justify-content: center;
                                    
                            
                            
                                }
                            
                                .coast {
                                    position: relative;
                            
                                    justify-content: space-evenly;
                                    color: rgba(255, 0, 0, 0.495);
                                    width: 100%;
                                    height: 100%;
                                    font-size: 20px;
                                    color: rgb(0, 0, 0);
                                    border-width: 1%;
                                    border-color: rgb(0, 0, 0);
                                    background-color: rgb(255, 255, 255);
                                    justify-content: center;
                                    align-items: center;
                            
                                }
                            
                                .info {
                                    position:  relative;
                                    font-size: 24px;
                                    width: 20%;
                                    height: 100%;
                                    color: rgb(0, 255, 64);
                                    font-size: 20px;
                            
                                   
                                    border-color: rgb(0, 0, 0);
                                    background-color: rgb(136, 136, 136);
                                    justify-content: center;
                                    align-items: center;
                            
                                    :hover:not(.disabled) {
                            
                            
                                        cursor: pointer;
                                        sound-in: 'hover';
                            
                                        border-radius: 5%;
                                        transform: scale(1.3);
                                    }
                            
                                    &:active:not(.disabled) {
                                        sound-in: 'light_click';
                                        background-color: rgb(250, 134, 39);
                                        padding: 0 1%;
                                        border-radius: 5%;
                                        align-items: center;
                                    }
                            
                                }
                            
                                .txt {
                                    width: 100%;
                                    position: relative;
                                    height: 100%;
                                    font-size: 20px;
                                    color: rgb(0, 0, 0);
                            
                                    border-color: rgb(0, 0, 0);
                                    background-color: rgba(255, 255, 255, 0.74);
                                    justify-content: center;
                                    align-items: center;
                            
                                }
                            
                                .txt2 {
                                    width: 100%;
                                    font-size: 24px;
                                    color: rgb(0, 0, 0);
                            
                                    border-color: rgb(0, 0, 0);
                                    background-color: rgb(198, 233, 0);
                                    justify-content: center;
                                    align-items: center;
                                }
                            
                                .Button2 {
                                    position: relative;
                                    width: 50%;

                                    height: 100%;
                                    color: rgb(255, 255, 255);
                                    background-image: url(/ui/hud/menuchar.png);
                                    background-size: 100%;
                                    font-weight: 1000;
                            
                                    font-size: 20px;
                            
                                  
                                    border-color: rgb(0, 0, 0);
                                    background-color: rgb(136, 136, 136);
                                    justify-content: center;
                                    align-items: center;
                            
                                    :hover:not(.disabled) {
                                        background-color: rgba(117, 255, 163, 0.822);
                                        width: 90%;
                            
                                        height: 100%;
                                        cursor: pointer;
                                        sound-in: 'hover';
                                        padding: 0 1%;
                                        border-radius: 5%;
                            
                                        align-items: center;
                                    }
                            
                                    &:active:not(.disabled) {
                                        sound-in: 'light_click';
                                        background-color: rgb(250, 134, 39);
                                        padding: 0 1%;
                                        border-radius: 5%;
                                    }
                                }
                            
                                .Button1 {
                                    position: relative;
                                    width: 50%;
                                    height: 100%;
                                    color: rgb(255, 255, 255);
                                    background-image: url(/ui/hud/menuchar.png);
                                    background-size: 100%;
                                    font-weight: 1000;
                            
                                    font-size: 14px;
                            
                                    border-width: 1%;
                                    border-color: rgb(0, 0, 0);
                                    background-color: rgb(136, 136, 136);
                                    justify-content: center;
                                    align-items: center;
                                }
                            
                                .info1 {
                            
                                    width: 20%;
                                    color: rgb(0, 0, 0);
                                    font-size: 14px;
                                    font-weight: bold;
                                    border-width: 1%;
                                    border-color: rgb(0, 0, 0);
                                    background-color: rgb(136, 136, 136);
                                    justify-content: center;
                                    align-items: center;
                                }
                                
                            }
                            
                            
                        
    
                        } 
                    }
                    .panel-content-context{
                        
                            position: relative;
                            width: 50%;
                            flex-direction: column;
                            height: 100%;
                            background-color: rgba(0, 0, 0, 0.548);
                            border-radius: 10px;
                            border-color: rgba(255, 255, 255, 0.411);
                            border-width: 4px;
                            color:white;
                            padding: 1%;
                            font-size: 23px;
                            font-family: Geneva;
                            overflow-x: scroll;

                            .head{
                                position: relative;
                                width: 100%;
                                height: 8%;
                                font-size: 25px;
                                font-weight: bold;
                                color: rgb(0, 0, 0);
                                background-color: rgb(255, 255, 255);
                                border-radius: 10px;
                                border-color: black;
                                border-width: 1px;
                                margin-top: 2px;
                                margin-bottom: 2px;
                                padding: 1%;
                                text-align: center;
                                justify-content: center;
                            }
                            .text, .text2{
                                position: relative;
                                width: 100%;
                                height: 25%;
                                padding: 1%;
                                font-size: 20px;
                                font-weight: 1000;
                                color: rgb(240, 81, 7);
                                font-family: Geneva;
                                overflow-x: scroll;
                               
                                
                            }
                            
                            
                                
                        }
                    
                }
  
            }
            
        }
        
        
}