/* *{
    margin: 0;
    padding: 0;
} */
body{
    background-color: #0b0b0f;
   

}

.container{
display:grid;

grid-template-rows:20px ,1fr ,80px ,80px ,40px ,50px ;
color:#30a159;
height: 100%;
width: 80%;
margin: 0 auto;
gap: 25px;
  
}



.navbar{
    display: flex;
      justify-content: space-between ;
        grid-row: 1/2;
}



.circle{
    height: 300px;
    grid-row: 2/3;
    display: flex;
    border-color: #161d23;
     border-width:1px;
     border-style:solid;
    justify-content: space-between ;
    background-color: #140f1e;
    border-radius: 15px;
}

.but{
    background-color:#0d0a0f;
    display: flex;
    
    gap: 10px;
        grid-row: 3/4;
      
    
}

.butal{
      background-color:#140f1e;
      color:#828387;
    display: flex;
      justify-content:center;
     
    
        border-radius: 30px;
    width: 180px;
    height: 50px;
}






.red-but{
    display: flex;
              
}


.footer{
    display: flex;
     grid-row: 6/7;
}

/* html {  
  overflow: hidden;
  height: 100%;
  background: radial-gradient(hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 1)),
    linear-gradient(90deg, dimgrey 1px, transparent 1px), 
    linear-gradient(dimgrey 1px, grey 1px);
  background-size: 100%, 2px 1px, 1px 2px;
} */
/* .radar, .sweep { position: absolute; } */
.radar {
  overflow: hidden; 
  top: 50%; left: 50%;
  margin: 117px;
  width: 130px; height: 130px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.5),
    inset 0 0 0 1px hsla(0, 0%, 100%, 0.15);
  background: 
    repeating-radial-gradient(transparent 0 23px, #287a33 24px 26px, #0000 27px), 
    linear-gradient(transparent 49.75%, #0e4c42 0 50.25%, transparent 0) 50% no-repeat,
    linear-gradient(90deg, transparent 49.75%, #0e4c42 0 50.25%, transparent 0) 50% no-repeat,
    linear-gradient(#333, #111);
  background-size: 100%, 218px 218px, 218px 218px, 100%;
}
.sweep {
  box-sizing: border-box;
  top: 16px; left: 16px;
  border-right: solid 1px hsla(145, 50%, 40%, .3);
  width: 70px; height: 64px;
  border-radius: 100% 0 0 0;
  transform-origin: 100% 100%;
  background: linear-gradient(50deg, rgba(34, 34, 34, 0) 56%, hsla(145, 50%, 40%, 1));
  animation: sweep 5s infinite linear;
}
@keyframes sweep { to { transform: rotate(360deg); } }

#write{
    color: gray;
}

.tow{
    margin: auto;
    
    
}


.ic1{
       display: flex;
    background-color:#05cf3c;
    width: 30px;
    height: 30px;
    border-radius: 90px;
          border-width:6px;
border-style:solid;
border-color:#05cf3c;
color: black;
justify-content: center;

}

.cards{
    

            grid-row: 4/5;
    display: flex;
    justify-content: center;
    
 

    gap: 15px;
}

.card{
    /* display: flex; */
   
    background-color:#140f1e;
       
        height: 130px;
        width: 400px;
        border-radius: 20px;
       
}


.red-but{
    grid-row: 5/6;
    display: flex;
    background-color:#250f19;
    width: 1650px;
      border-radius: 20px;
      border-width:1px;
border-style:solid;
border-color: #591c2e;
justify-content: center;
    

}

#writeinred{
    color:#7B172e ;
}


.footer{
    background-color: #05050a;

    display: flex;
       grid-row: 6/7;
    justify-content:space-around;
}


.icon3{
    display: flex;
    background-color:#0c3717;
    width: 130px;
    height: 20px;
    border-radius: 20px;
          border-width:1px;
border-style:solid;
border-color:#30a159;
color: #30a159;
justify-content: center;
}

.butt{
    display: flex;
    background-color:#250f19;
    width: 60px;
    height: 25px;
    border-style:solid;
border-color: #591c2e;
justify-content: center;
border-radius: 10px;
 color:#7B172e ;
}

.up{
    
    display: flex;
   
    justify-content: end;
    justify-content: space-around;
    margin: 10px;
}
.mid{
    display: flex;
   
    padding: 10px;
}

.upwr{
    color:#828387;
}



.a{
   
   
    background-color: #05cf3c;
    height: 4px;
    width: 200px;
    border-radius: 10px;
    margin: 10px;
}

.b{

   
    background-color: #828387;
    height: 4px;
    width: 100px;
    border-radius: 10px;
    margin: 10px;
}


.und{
    display: flex;
   

   
  
    margin: 0;
}