body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    background-image: linear-gradient(180deg, #040918 0%, #091540 100%);
    width:100%;
    height:100%;
}
.flex{
     display:flex;
    align-items: center;
    justify-content: space-between;
}
.container {
    width:60%;
    height:100%;
    color:hsl(200, 60%, 99%);
    margin:auto;
    padding:20px;
    margin-top:1%;
}

.ext_box{
    width:100%;
    background-color:hsl(225, 23%, 24%) ;
padding:10px;
font-size:14px;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
}
.ext_box img{
    width:15px;
    height:15px;
    background-color: hsl(227, 75%, 14%);
    padding:5px;
    border-radius: 5px;
}
.tabs{
    margin-top: 1%;
}
.tabs input{
    display: inline-block;
    color:hsl(217, 61%, 90%);
    padding:5px 15px;
    border-radius: 20px;
    background-color: hsl(225, 23%, 24%);
    border:none;
    cursor: pointer;
}
.tabs input:hover{
 opacity:0.6;
}
.tabs input:focus{
outline:2px solid  hsl(3, 77%, 44%);
outline-offset: 1px;
background-color: hsl(3,77%,44%);
}
.list{
    display:grid;
    grid-template-columns: 1.3fr 1.3fr 1.3fr ;
    grid-template-rows: 1.2fr 1.2fr 1.2fr 1.2fr;
    gap: 9px;
}

.dark_box{
    padding:2% 10px;
    border:1px solid hsl(226, 11%, 37%);
    border-radius:15px;
    background-color:hsl(226, 25%, 17%)'
}
.light_box{
    padding:2% 10px;
    border:1px solid hsl(0, 0%, 78%);
    border-radius:15px;
    background-color:hsl(200, 60%, 99%)
}
.logo{
    width:40px;
    height:40px;
    border-radius:5px
}
.dark_span{
font-size:11px;
color:hsl(0, 0%, 78%);
display:inline-block;
line-height:1.5;
margin-top:-5%
}
.light_span{
font-size:11px;
color:hsl(225, 23%, 24%);
display:inline-block;
line-height:1.5;
margin-top:-5%
}