*,*::after,*::before{
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    --transition-time: all 0.3s ease;
}
html,body{
    margin: 0;
    border: 0;
    outline: 0;
    --main-color:hsl(353, 100%, 10%);
    --secondary-color:hsl(51, 100%, 65%);
    background-image: radial-gradient(circle at center center, rgba(217, 217, 217,0.05) 0%, rgba(217, 217, 217,0.05) 15%,rgba(197, 197, 197,0.05) 15%, rgba(197, 197, 197,0.05) 34%,rgba(178, 178, 178,0.05) 34%, rgba(178, 178, 178,0.05) 51%,rgba(237, 237, 237,0.05) 51%, rgba(237, 237, 237,0.05) 75%,rgba(138, 138, 138,0.05) 75%, rgba(138, 138, 138,0.05) 89%,rgba(158, 158, 158,0.05) 89%, rgba(158, 158, 158,0.05) 100%),radial-gradient(circle at center center, rgb(255,255,255) 0%, rgb(255,255,255) 6%,rgb(255,255,255) 6%, rgb(255,255,255) 12%,rgb(255,255,255) 12%, rgb(255,255,255) 31%,rgb(255,255,255) 31%, rgb(255,255,255) 92%,rgb(255,255,255) 92%, rgb(255,255,255) 97%,rgb(255,255,255) 97%, rgb(255,255,255) 100%); background-size: 42px 42px;
    height: 100vh;
}
body.dark{
    --main-color:black;
    --secondary-color: white;
    background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
    height: 100vh;
}
header{
    background:var(--main-color);
    color:var(--secondary-color);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title{
    font-weight: 700;
    margin: 0;
}
.desc{
    font-weight: 500;
    font-size: x-small;
}
.btn-container{
    display: flex;
    align-items: center;
    color: var(--main-color);
}
.button{
    padding: 0.5rem;
    margin: 0;
    outline: 0;
    border: 0;
    background: var(--main-color);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition-time);
    color: var(--secondary-color);
    border-radius: 0.5rem;
    margin-left: 0.5rem;
}
.button:hover{
    background-color: var(--secondary-color);
    color:var(--main-color);
    padding: 0.5rem;
}
section{
    display:grid;
    grid-template-columns: repeat(4 , 1fr);
    width: 85%;
}
.container{
    width:14rem;
    margin: 1rem;
    /*background-color: hsla(51, 100%, 50%, 0.5);*/
    border:2px solid var(--main-color);
    border-radius:0rem 1rem 0rem 1rem;
    background: var(--secondary-color);
    color: var(--main-color);
}
.icons{
    position: relative;
    left:60%;
    display: flex;
    padding: 1rem;
}
.edit-icon ,.delete-icon{
    padding: 0px 10px;
    cursor: pointer;
}

.main , textarea{
    width:14rem;
    min-height: 5rem;
    border-top: none;
    background-color: transparent;
    padding: 0rem 10px;
}
.hidden{
    display: none;
}
textarea{
    outline: 0;
    border:0;
    margin: 0;
}
#theme-changer{
    cursor: pointer;
}
@media  (max-width:1170px){
    section{
        grid-template-columns:repeat(3 , 1fr);
    }
}

@media (max-width:770px) {
    section{
        grid-template-columns:repeat(2 , 1fr);
    }
}
@media (max-width:480px) {
    section{
        grid-template-columns: 1fr;
    }
}