:root{
    --blue-1000: #002535;
    --blue-900: #002e41;
    --blue-800: #255d7e;
    --blue-700: #3d708f;
    --blue-600: #5383a18f;
    --blue-500: #6996b3;
    --blue-400: #7faac6;
    --blue-300: #94bed9;
    --blue-200: #abd2ec;
    --blue-100: #c1e7ff;
    --lg-navbar-width: 200px;
    --header-height: 10vh;
    --section-height: 90vh;
    --header-padding: 25px;
    --navbar-text: rgb(155, 155, 155);
    --card-text: white;
    --section-header: rgb(255, 255, 255);
    --logo-color: rgb(87, 221, 255);
    font-size: 24px;
    font-family: 'Lato';
}

@font-face {
    font-family: 'Lato';
    src: url(./Lato/Lato-Regular.ttf);
}

html,body{
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
    
.navbar { grid-area: 1 / 1 / 6 / 2; } NAVI
.header { grid-area: 1 / 2 / 2 / 6; } 
.sales { grid-area: 2 / 2 / 3 / 4; } CONGRATS
.statistic { grid-area: 2 / 4 / 3 / 6; } STATISTICS



.full-height{
    min-height: 100vh;
    height: 100%;
}
.full-size{
    min-width: 100vw;
    min-height: 100vh;
    height: 100%;
    width: 100%;
}


.content-wrapper{
    background-image: url(./circle-scatter-haikei.svg);
    display: grid;
    grid-template-columns: .3fr 1fr 1fr 2fr 2fr ;
    grid-template-rows: .1fr .5fr .5fr .5fr 2fr;
}

/* NAVI HEADER */

.navbar{
    background-color: var(--blue-1000);
    display: grid;
    grid-auto-rows: auto;
    color: var(--blue-600);
    position: fixed;
    height: 100%;
    
}

.navbar>a{
    text-decoration: none;
    justify-self: center;
    align-self: center;
    color: inherit;
}

.navbar>i{
    font-size: 1rem;
}

.navbar>span{
    justify-self: center;
    align-self: center;
    color: rgb(160, 156, 156);
}

.metamask{
    background-image: url(./metamask-transparent.png);
    width: 65px;
    height: 65px;
    border-radius: 25px;
    background-size: cover;
    background-position:  right 50% top 25%;
    margin: 10px 10px 0 10px;
}

.header{
    background-color: var(--blue-900);
    grid-area: 1 / 2 / 2 / 6; 
    display: grid;
    grid-template-columns: 1fr 2fr .8fr 0.5fr;
    margin: 15px;
    border-radius: 25px;
}

.header-icons{
    grid-area: 1 / 1 / 2 / 2;
    justify-self: center;
    align-self: center;
    color: var(--blue-600)
}

.header-icons>i{
    padding: 0 10px;
}

.profile-box{
    font-size: .4em;
    grid-area: 1 / 4 / 2 / 5;
    justify-self: center;
    align-self: center;
    display: flex;
}

.profile-icons{
    grid-area: 1 / 3 / 2 / 4;
    justify-self: center;
    align-self: center;
    color: var(--blue-600)
}
.profile-box>p{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    font-size: .6rem;
    font-weight: bold;
    color: var(--blue-400)
}

.profile-box>p>span{
    font-weight: normal;
    font-size: .5rem;
}

.profile-icons>i{
    padding: 0 10px;
}


.image{
    background-image: url(./giraffe.jpg);
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-size: cover;
    background-position:  right 20% top 25%;
    margin: 10px;
    
}



/* MAIN COMPONENTS */


/*SALES BOX*/

.sales{
    background-color: var(--blue-900);
    margin: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border-radius: 15px;
    align-self: stretch;
}

.congrats{
    grid-area: 1 / 1 / 2 / 2;
    padding-left: .8rem;
    font-size: .8rem;
    color: var(--blue-500)
}


.sales-button-wrap{
    grid-area: 2 / 1 / 3 / 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: .5rem;
    color: var(--blue-400);
}

.sales-button-wrap>span{
    padding: 0 0 2px 2px;
}

.sales-button-wrap>button{
    background-color: var(--blue-600);
    border-radius: 10px;
    font-size: .7rem;
    border: none;
    padding: .3rem .4rem;
    color: var(--blue-400);
    margin-top: .2rem;
}


.medal{
    background-image: url(./award-first-place-gold-medal-prize-winner-icon-png-11.png);
    background-size: cover;
    width: 120px;
    height: 120px;
    grid-area: 1 / 2 / 4 / 3;
    margin: 0 20px 20px 20px;
    transform: scale(1);
    justify-self: center;
    align-self: flex-start;
}



.statistic,
.balance,
.earnings,
.news,
.ravenue,
.trending,
.data{
    margin: 15px;
    border-radius: 15px;
}

.content-wrapper>*{
    
}

/* STATISTIC BOX */

.statistic{
    background-color: var(--blue-900);
    grid-area: 2 / 4 / 3 / 6;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: .1fr 1fr;
    justify-self: stretch;
    align-self: stretch;
}

.widget-stats{
    grid-area: 2 / 1 / 6 / 5;
}

.widget-stats>*{
    justify-self: center;
    align-self: center;
}

.intervals{
    grid-area: 1 / 2 / 2 / 4;
    justify-self: center;
    align-self: center;
}

.intervals>button{
    padding: .2rem .3rem .2rem .3rem;
    margin-left: .4rem;
    margin-right: .4rem;
    font-size: .6rem;
    color: var(--blue-600);
    background-color: var(--blue-1000);
    border: 1px solid black;
    border-radius: 5px;
}

.movers{
    grid-area: 1 / 1 / 2 / 2;
    font-size: .6rem;
    justify-self: flex-start;
    align-self: center;
}

.movers>strong{
    color: var(--blue-600)
}

.last-updated{
    grid-area: 1 / 4 / 2 / 5;
    font-size: .6rem;
    justify-self: flex-end;
    align-self: center;
}

.movers, .last-updated{
    color: var(--blue-600);
    padding: 0 1rem 0 1rem;
}




/* BALANCE */

.balance{
    background-color: var(--blue-900);
    grid-area: 3 / 2 / 4 / 4;
    display: grid;
    grid-template-rows: .1fr 1fr 1fr 1fr;
    grid-template-columns: .1fr 1fr 1fr 1fr 1fr;
    font-size: .7rem;
    position: relative;
    padding-bottom: .5rem;
}


.balance>p{
    grid-area: 1 / 1 / 2 / 5;
    justify-self: flex-start;
    align-self: center;
    padding: 0 0 0 .5rem;
    margin: 0 0 0 .5rem;
    color: var(--blue-500)
}

.balance>p>strong{
    color: var(--blue-400);
}

.balance-text{
    color: var(--blue-500);
}


.balance-text{
    grid-area: 1 / 5 / 2 / 6;
    justify-self: center;
    align-self: center;
}

.btc-row{
    grid-area: 2 / 1 / 3 / 6;

}

.eth-row{
    grid-area: 3 / 1 / 4 / 6;

}

.bnb-row{
    grid-area: 4 / 1 / 5 / 6;
    margin-bottom: .1rem;
    
}

.btc-row, .eth-row, .bnb-row{
    justify-self: flex-start;
    align-self: center;
    padding: 0 0 0 .5rem;
    margin: 0 0 0 .5rem;
    background-color: #002e4163;
    border-radius: 15px;
    display: grid;
    grid-template-columns: 4fr .5fr 1fr;
    width: 92%;
    color: var(--blue-500)
}

.btc-row>p>strong, .eth-row>p>strong, .bnb-row>p>strong{
    color: var(--blue-400);
}

.btc-precent, .eth-precent, .bnb-precent{
    justify-self: center;
    align-self: center;
}

.btc-precent{
    grid-area: 1 / 3 / 2 / 4;
}

.eth-precent{
    grid-area: 1 / 3 / 2 / 4;
}

.bnb-precent{
    grid-area: 1 / 3 / 2 / 4;
}



.wallet-balance{
    grid-area: 2 / 1 / 3 / 3;
}

.wallet-balance:nth-child(1){
    grid-area: 2 / 2 / 3 / 3;
}

/* EARNINGS */



.earnings{
    background-color: var(--blue-900);
    grid-area: 4 / 2 / 5 / 4; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: .5fr 1fr;
}

.earnings>p{
    grid-area: 1 / 1 / 2 / 4;
    justify-self: center;
    align-self: center;
    color: var(--blue-500)
}

.earnings>p>strong{
    color: var(--blue-400);
}

.earn-24h{
    grid-area: 2 / 1 / 3 / 2;
}

.earn-7d{
    grid-area: 2 / 2 / 3 / 3;
}

.earn-30d{
    grid-area: 2 / 3 / 3 / 4;
}

.earn-24h, .earn-7d, .earn-30d{
    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #002e4186;
    padding: .5rem 1rem .5rem 1rem;
    border-radius: 10px;
    margin: 0 0 .5rem 0;
    color: var(--blue-500);
    width: 50%;
}

.value24h, .value7d, .value30d{
    padding-top: .3rem;
    color: rgba(0, 255, 0, 0.4)
}


/* BALANCE HISTORY */

.ravenue{
    background-color: var(--blue-900);
    grid-area: 3 / 4 / 5 / 6;
    padding: 1rem;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr; 
}

.ravenue>span{
    color: var(--blue-600);
}

.ravenue>div{
    position: absolute;
}

.btc-chart{
    justify-self: center;
    align-self: center;
    width: 100%;
}

/*TRENDING */

.trending{ 
    background-color: var(--blue-900);
    grid-area: 3 / 5 / 5 / 6;
}

/* DATA */

.data{
    background-color: var(--blue-900); 
    grid-area: 5 / 2 / 6 / 5;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;
    grid-template-rows: .2fr 1fr .6fr .6fr .6fr;
    grid-auto-rows: .6fr
}

.data>span{
    color: var(--blue-400);
    font-size: .8rem;
}

.market{
    grid-area: 1 / 1 / 2 / 6;
    padding: .5rem;
    justify-self: center;
    align-self: center;
}

.num{
    grid-area: 2 / 1 / 3 / 2;
}

.coin{
    grid-area: 2 / 2 / 3 / 3
}

.price{
    grid-area: 2 / 3 / 3 / 4;
}

.marketcap{
    grid-area: 2 / 4 / 3 / 5
}

.volume{
    grid-area: 2 / 5 / 3 / 6;
}

.num,.price, .marketcap, .volume{
    justify-self: center;
    align-self: center;
}

.coin{
    justify-self: flex-start;
    align-self: center;
    padding-left: 2rem;
}

/*BTC */

.row-btc{
    grid-area: 3 / 1 / 4 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
}

.name{
    grid-area: 1 / 2 / 2 / 3;
}

.pricevalue{
    grid-area: 1 / 3 / 2 / 4
}

.marketcapvalue{
    grid-area: 1 / 4 / 2 / 5;
}

.volumevalue{
    grid-area: 1 / 5 / 2 / 6
}

.pricevalue, .marketcapvalue, .volumevalue{
    color: rgba(192, 187, 187, 0.5);
}

.row-btc>span{
    color: rgba(192, 187, 187, 0.8);
}

.data>span:first-child{
    margin-top: 0.4rem;
    font-size: .9rem;
}

.row-btc>*, .row-eth>*, .row-bnb>*, .row-doge>*, .row-tether>*, .row-usdc>*,
.row-busd>*, .row-xrp>*, .row-ada>*, .row-sol>*{
    justify-self: center;
    align-self: center;
}

.btc-img{
    background-image: url(./Bitcoin.svg.png);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.name{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.btc-label, .label{
    color: var(--blue-400)
}
.btc-label>span, .label>span{
    color: rgba(192, 187, 187, 0.5);
}

/*ETH */

.row-eth{
    grid-area: 4 / 1 / 5 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
    background-color: #002535b7;
}

.eth-img{
    background-image: url(./cdnlogo.com_ethereum-eth.svg);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.row-eth>span{
    color: rgba(192, 187, 187, 0.8);
}

/*BNB */

.row-bnb{
    grid-area: 7 / 1 / 8 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
}

.bnb-img{
    background-image: url(./Binance-coin-bnb-logo.png);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.row-bnb>span{
    color: rgba(192, 187, 187, 0.8);
}

/* TETHER */

.row-tether{
    grid-area: 5 / 1 / 6 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
}

.tether-img{
    background-image: url(./tether.png);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.row-tether>span{
    color: rgba(192, 187, 187, 0.8);
}

/* USDC */

.row-usdc{
    grid-area: 6 / 1 / 7 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
    background-color: #002535b7;
}

.usdc-img{
    background-image: url(./usd-coin-usdc-logo.png);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.row-usdc>span{
    color: rgba(192, 187, 187, 0.8);
}

/* BUSD */

.row-busd{
    grid-area: 8 / 1 / 9 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
    background-color: #002535b7;
}

.busd-img{
    background-image: url(./busd-logo.png);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.row-busd>span{
    color: rgba(192, 187, 187, 0.8);
}

/* XRP */

.row-xrp{
    grid-area: 9 / 1 / 10 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
}

.xrp-img{
    background-image: url(./ripple-removebg-preview.png);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.row-xrp>span{
    color: rgba(192, 187, 187, 0.8);
}

/* CARDANO */

.row-ada{
    grid-area: 10 / 1 / 11 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
    background-color: #002535b7;
}

.ada-img{
    background-image: url(./Cardano-Crypto-Logo.png);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.row-ada>span{
    color: rgba(192, 187, 187, 0.8);
}

/* SOLANA */

.row-sol{
    grid-area: 11 / 1 / 12 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
}

.sol-img{
    background-image: url(./Solana-Crypto-Logo-PNG-File.png);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.row-sol>span{
    color: rgba(192, 187, 187, 0.8);
}

/* DOGE */

.row-doge{
    grid-area: 12 / 1 / 13 / 6 ;
    display: grid;
    grid-template-columns: .2fr 1fr 1.2fr 1.5fr 1.2fr;;
    font-size: .7rem;
    background-color: #002535b4;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.doge-img{
    background-image: url(./dogecoin-logo-png-transparent.png);
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-size: cover;
    margin: 10px;
}

.row-doge>span{
    color: rgba(192, 187, 187, 0.8);
}

/* NEWS */

.news{
    background-color: var(--blue-900); 
    grid-area: 5 / 5 / 6 / 6; 
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: .4fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: 1fr;

}

.news-text{
    grid-area: 1 / 1 / 1 / 3;
    padding: .5rem;
    justify-self: center;
    align-self: center;
    color: var(--blue-400)
}

.news-text>*{
    align-self: center;
    justify-self: center;

}

.news1-row{
    grid-area: 2 / 1 / 3 / 3;
}

.news1-image{
    background-image: url(./news-eth.jpg);
    width: 90%;
    height: 90%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:  right 50% top 25%;
    grid-area: 1 / 1 / 2 / 2;
    justify-self: center;
    align-self: center;
    border-radius: 10px;
}

.news1-text, .news2-text, .news3-text, .news4-text, .news5-text{
    grid-area: 1 / 2 / 2 / 3;
    font-size: .9rem;
    justify-self: center;
    align-self: center;
    padding: 1rem;

}

.news1-row, .news2-row, .news3-row, .news4-row{
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.177);
    margin: .5rem;
    padding-bottom: .7rem;
}

.news2-row{
    grid-area: 3 / 1 / 4 / 3;
}


.news3-row{
    grid-area: 4 / 1 / 5 / 3;
}

.news4-row{
    grid-area: 5 / 1 / 6 / 3;
}

.news5-row{
    grid-area: 6 / 1 / 7 / 3;
}

.news2-image{
    background-image: url(./news2.jpg);
    width: 90%;
    height: 90%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:  right 50% top 25%;
    grid-area: 1 / 1 / 2 / 2;
    justify-self: center;
    align-self: center;
    border-radius: 10px;
}

.news3-image{
    background-image: url(./news3.jpg);
    width: 90%;
    height: 90%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:  right 50% top 25%;
    grid-area: 1 / 1 / 2 / 2;
    justify-self: center;
    align-self: center;
    border-radius: 10px;
}

.news4-image{
    background-image: url(./news4.jpg);
    width: 90%;
    height: 90%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:  right 50% top 25%;
    grid-area: 1 / 1 / 2 / 2;
    justify-self: center;
    align-self: center;
    border-radius: 10px;
}

.news1-text>a, .news2-text>a, .news3-text>a, .news4-text>a{
    text-decoration: none;
    color: var(--blue-700)
}

/* HOVER */

.navbar>*:hover,.header-icons>*:hover, .profile-icons>*:hover {
    color: var(--blue-300);
    cursor: pointer;
}

.image:hover{
    transition: all 0.4s;
    transform: scale(1.1);
    cursor: pointer;
}

.intervals>button:hover{
    color: var(--blue-300);
    border: 1px solid var(--blue-300);
    cursor: pointer;
}

a:hover{
    color: var(--blue-400) 
}

.sales-button-wrap>button:hover{
    background-color: #5383a1;
    color: var(--blue-100);
    cursor: pointer;
}


.row-btc:hover, .row-eth:hover, .row-bnb:hover, .row-doge:hover, .row-tether:hover, .row-usdc:hover,
.row-busd:hover, .row-xrp:hover, .row-ada:hover, .row-sol:hover{
    background-color: var(--blue-900);
    cursor: pointer;
}

.btc-row:hover, .eth-row:hover, .bnb-row:hover{
    background-color: var(--blue-900);
    cursor: pointer;
}

.earn-24h:hover, .earn-7d:hover, .earn-30d:hover{
    background-color: var(--blue-900);
    cursor: pointer;
}

.navbar>span:hover{
    cursor: default;
}

/*COLORS*/

.navbar, .header, .sales, .statistic, .balance, .earnings, .ravenue, .data, .news{
    background-color: #002e41c0;
    background: rgba(0, 46, 65, 0.7);
    box-shadow: 0 8px 8px 0 rgba( 31, 38, 55, 0.37 );
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
}

/* MEDIA */ 

@media(max-width: 1440px){
    .content-wrapper{
        grid-template-columns: .4fr 1fr 1fr 2fr 2fr ;
        grid-template-rows: .1fr .5fr .5fr .5fr 2fr;
    }
}

@media(max-width: 1024px){
    .content-wrapper{
        grid-template-columns: .4fr 1fr 1fr 1fr 1fr ;
        grid-template-rows: .1fr .5fr 1.4fr 1fr 2fr 3fr;
    }
    .metamask{
        width: 65px;
        height: 65px;
    }
    .header{
        grid-template-columns: 2fr 1fr 2fr 1fr;
    }
    .statistic{
        grid-template-columns: 1fr 2fr .5fr 1fr;
    }
    .intervals>button{
        margin: 5px;
    }
    .last-updated{
        text-align: right;
    }
    .movers, .last-updated{
        font-size: .5rem;
    }
    .ravenue{
        grid-area: 3 / 2 / 4 / 6;
    }
    .balance{
        grid-area: 4 / 2 / 5 / 4;
    }
    .earnings{
        grid-area: 4 / 4 / 5 / 6;
    }
    .news{
        grid-area: 6 / 2 / 7 / 6;
    }
    .data{
        grid-area: 5 / 2 / 6 / 6;
    }

}

@media(max-width: 768px){
    .content-wrapper{
        grid-template-columns: .2fr 1fr 1fr;
        grid-template-rows: .5fr 1fr 1fr 1.4fr 1fr 3fr 3fr;
    }
    .navbar{
        grid-area: 1 / 1 / 6 / 4;
    }
    .metamask{
        width: 50px;
        height: 50px;
    }
    .header{
        grid-area: 1 / 2 / 2 / 4;
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    }
    .header-icons{
        grid-area: 1 / 1 / 2 / 3;
    }
    .profile-icons{
        grid-area: 1 / 3 / 2 / 5;
    }
    .profile-box{
        grid-area: 1 / 5 / 2 / 6;
    }
    .sales{
        grid-area: 2 / 2 / 3 / 3;
    }
    .balance{
        grid-area: 2 / 3 / 3 / 4;
    }
    .btc-precent, .eth-precent, .bnb-precent{
        padding-right: 20px;
    }
    .statistic{
        grid-area: 3 / 2 / 4 / 4;
        display: grid;
        grid-template-rows: .3fr .7fr;
        grid-template-columns: 1fr 2fr 1fr;
    }
    .intervals>button{
        margin: 5px;
    }
    .movers, .last-updated{
        font-size: .6rem
    }
    .last-updated{
        grid-area: 1 / 3 / 2 / 5;
    }
    .intervals{
        grid-area: 1 / 2 / 2 / 3;
    }
    .ravenue{
        grid-area: 4 / 2 / 5 / 4;
    }
    .earnings{
        grid-area: 5 / 2 / 6 / 4;
    }
    .news{
        grid-area: 6 / 2 / 7 / 4;
    }
    .news1-text, .news2-text, .news3-text, .news4-text{
        font-size: .8rem;
    }
    .news1-row, .news2-row, .news3-row, .news4-row{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .data{
        grid-area: 7 / 2 / 8 / 4;
    }
    .profile-box>*{
        text-align: right;
    }

}


@media(max-width: 425px){
    .navbar, .data{
        display: none;
    }
    .content-wrapper{
        width: 100vw;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .5fr 1fr 1fr 1fr 1fr 4fr;
        grid-auto-rows: 1fr;
    }
    .header{
        grid-area: 1 / 1 / 2 / 2;
        width: 92%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: .5fr .5fr;
    }
    .header-icons{
        grid-area: 2 / 1 / 2 / 5;
    }
    .profile-icons{
        grid-area: 1 / 1 / 2 / 5;
    }
    .profile-box{
        display: none;
    }
    .sales{
        grid-area: 2 / 1 / 3 / 2;
    }
    .statistic{
        grid-area: 3 / 1 / 4 / 2;
        display: grid;
        grid-template-rows: .1fr .5fr 1fr;
    }
    .intervals{
        grid-area: 2 / 1 / 3 / 5 ;
        font-size: .5rem;
    }
    .movers{
        grid-area: 1 / 1 / 2 / 3;
        font-size: .45rem;
    }
    .last-updated{
        grid-area: 1 / 3 / 2 / 5;
        font-size: .45rem;
    }
    .widget-stats{
        grid-area: 3 / 1 / 4 / 5;
    }
    .balance{
        grid-area: 4 / 1 / 5 / 2;
    }
    .earnings{
        grid-area: 5 / 1 / 6 / 2;
    }
    .ravenue{
        display: none;
    }
    .news{
        grid-area: 6 / 1 / 7 / 2;
    }
    .news1-text, .news2-text, .news3-text, .news4-text{
        font-size: .8rem;
    }
    .news1-row, .news2-row, .news3-row, .news4-row{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
}

@media(max-width: 320px) {
    .navbar, .header, .sales, .statistic, .balance, .earnings, .ravenue, .data, .news{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
    .intervals>button{
        margin: 5px;
    }
    .last-updated{
        padding: 5px;
    }
    .movers{
        padding: 5px;
    }
}