:root{
    --bgalpha: 0;
}

html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
body{
    background-image: url(\../images/galaxy.jpg);
    background-size:300%;
    /* backdrop-filter: drop-shadow(200px); */
    transition-duration: 0.2s;
}

.flex1{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.flex2{
    display:flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}
.flex3{
    display:flex;
    justify-content:space-evenly;
    align-items: left;
    flex-direction: column;
}

header{
    background-color: rgba(75, 141, 141, var(--bgalpha));
    width: 100%;
    height:10%;
}
    #head-logo{
        width: 40%;
        height: 100%;
        background-color: rgba(38, 100, 100,var(--bgalpha));
    }
    nav{
        width: 60%;
        height: 100%;
        font-size: x-large;
        background-color: rgba(66, 6, 94,var(--bgalpha));
    }
        nav a {
            text-decoration: none;
            color: #4cff00;
            padding: 10px;
            margin: 5px;
            border-radius: 8px;
            transition: box-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
        }
        
        nav a {
            text-decoration: none;
            color: rgb(22, 177, 22);
            padding: 5px;
            margin: 5px;
            border-radius: 8px;
            transition: 0.7s;
        }
        
        nav a:hover {
            color: rgb(87, 255, 81)
        }
        
        .curImg{
            width: 20%;
        }



main{
    background-color: rgba(65, 58, 95, var(--bgalpha));
    width: 100%;
    height: 86%;
    color: white;
}
    #your-balance{
        width: 100%;
        height: 10%;
        background-color: rgba(95, 71, 58, var(--bgalpha));
    }
        .mybalance-box{
            width:14%;
            height: 100%;
            background-color:rgba(54, 165, 42, var(--bgalpha));
            font-size: larger;

            border-bottom: 1.5px solid #ccc;
            padding-bottom: 5px; 
            margin-bottom: 10px; 
            margin:5px;

        }
            .mybalance-box span{
                margin: 10px;
                font-size: large;
            }

            .mybalance-box:hover{
                transform: rotateZ(5deg);
                transition: 2s;
            }

            :not(hover){
                transition: 3s;
            }

            #balanceTotal{font-size: large;}
    #main-area{
        background-color: rgba(102, 97, 51, var(--bgalpha));
        width: 100%;
        height: 90%;
        display: flex;
    }
        #crypto-form{
            width: 85%;
            height: 100%;
            background-color: rgba(138, 6, 120, var(--bgalpha));
        }
            #crypto-form-c{
                width: 100%;
                height: 100%;
                background-color: rgba(211, 102, 102, var(--bgalpha));
            }
                    .crypto-form-choice
                    {
                        width: 40%;
                        height: 50%;
                        background-color: rgba(184, 181, 45, var(--bgalpha));
                    }
                        .crypto-form-choice img{
                            width: 10%;
                        }
                        #transfer-img{
                            transform: rotate(90deg);
                            font-size: 100px;
                            width: 10%;
                            background-color: rgba(211, 102, 102, var(--bgalpha));
                        }


                    #crypto-form-header{
                        height:20%
                    }
                    #crypto-form-input{
                        background-color: rgba(104, 76, 34, var(--bgalpha));
                        width:100%;
                        height:50%;
                    }
                    #crypto-form-submit{
                        background-color: rgba(128, 109, 146, var(--bgalpha));
                        width:100%;
                        height:20%;
                        flex-direction: column;
                        justify-content: space-between;
                    }
                        #crypto-form-submit-box
                        {
                            width:100%;
                            background-color: rgba(36, 58, 58, var(--bgalpha));
                            display: flex;
                            justify-content: center;
                        }
                    #crypto-form-footer{
                        background-color: rgba(45, 168, 66, var(--bgalpha));
                        height: 10%;
                    }

                    #submit{
                        font-size: x-large;
                    }

                    aside {
                        background-color: rgba(95, 73, 73, var(--bgalpha));
                        width: 15%;
                        height: 100%;
                        font-size: medium;
                        text-align: center;
                        transition-duration: 0s;
                    }
    

        aside p{
            height: 10%;
            align-items: center;
            padding: 0;
            font-size: x-large;
        }            
        aside div{
            width: 90%;
            height: 15%;
            /* background-color: rgba(102, 0, 97, 0.3);
            border-radius: 20px;
            border: 1px solid white; */
            margin-top: 10px;
            color: rgb(143, 250, 143);
            border-left: 1px dashed white;
            border-right: 1px dashed white;
        }
        aside span{
            margin-top: 0;
            font-size: medium;
            text-decoration:wavy;
            text-decoration-line:overline;
        }


footer{
    background-color: rgba(131, 141, 255, var(--bgalpha));
    width: 100%;
    height: 4%;
    font-size: large;
    color: wheat;
    text-align: rigth;
    animation-name: footerAnimation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes footerAnimation {
    0%{color: #d6ffc4; }
    50%{color: #a7beff; }
    100%{color: #f69cd0;}
}