*,*::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     border: 0;
 }

 /* colors */
/* 
$primary: #446DF6;
sucess: #33CA7F
DANEGR: #E01541
DARK: #121614
LIGHT: #a4b1aa */
 


 body {
     font-family: 'Courier New', Courier, monospace;
     display: grid;
     flex-wrap: wrap;
     place-items: center;
     padding: 2rem;
     color:#121614 ;
     width: 100%;
 }
 @media only screen and (max-width: 350px) {
    body {
        font-family: 'Courier New', Courier, monospace;
        display: grid;
        flex-wrap: wrap;
        place-items: center;
        padding: 2rem;
        color:#121614 ;
        width: 90%;
    }
    .modal-tittle {
        font-size: 1rem;
        line-height: 1.2;
        margin-bottom: 1rem;
        max-width: 75%;
    }
 }
 .modal-container {
     position: fixed;
     flex-wrap: wrap;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: rgba(lightslategray, .2);
     display: grid;
     place-items: center;
     transition: all 250ms;
     opacity: 0;
     pointer-events: none;
 }
 .modal-container.active {
    opacity: 1;
    pointer-events: all;
 }
 .modal {
     max-width: 700px;
     max-height: 80vh;
     overflow: auto;
     background: white;
     border: 3px solid darkgrey;
     padding: 2rem;
     position: relative;

 }
 .modal-tittle {
     font-size: 2rem;
     line-height: 1.2;
     margin-bottom: 1rem;
     max-width: 85%;
 }
 .modal-btn {
     position: absolute;
     top: .5rem;
     right: .5rem;
     color: darkgray;
     font-size: 2rem;
     line-height: 2rem;
     height: 40px;
     width: 40px;
     cursor: pointer;
     border: 3px solid darkgray;
     border-radius: 50%;
     background: white;
     box-shadow: #121614;
 }
 .modal-btn:hover {
     outline: none;
     border: 3px solid lightgray;
 }
 .form-container {
     max-width: 1000px;
     margin: 1rem auto;
 }
 h1 {
     font-size: 2rem;
     text-align: center;
 }
 h3 {
     color:  #33CA7F;
     text-align: center;
 }
 .message {
     margin: 1rem 0 0.5rem;
     padding: 1rem;
     text-align: center;
     color: white;
 }
 .sucess-message {
     background-color: #33CA7F;
     box-shadow: 2px 4px 7px 2px rgba(#33CA7F, .2);
 }
 
 .remove-message {
    background-color: #446DF6;
    box-shadow: 2px 4px 7px 2px rgba(#446DF6, .2);
}

.alert-message {
    background-color: #E01541;
    box-shadow: 2px 4px 7px 2px rgba(#E01541, .2);
}
form {
    display: grid;
    flex-wrap: wrap;
    grid-gap: 1rem;
    margin: 1rem 0;
    width: 100%;
}
form, label, input, textarea {
    font-size: inherit;
    font-weight: inherit;
}
form, [for="tittle"], [for="note"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem;
    grid-gap: 1rem;
    background-color: darkgrey;
    font-weight: bold;
}
form, [for="tittle"], input{
    flex: 1 1 80%;
    border: 3px solid darkgray;
    padding: .5rem;
    color: lightslategray;
    font-weight: bold;
    max-width: 100%;
}
form, [for="tittle"], input:focus{
    outline: 2px solid darkgray;
}

form, [for="note"], textarea{
    flex: 1 1 80%;
    flex-wrap: wrap;
    border: 3px solid darkgray;
    padding: .5rem;
    color: lightslategray;
    font-weight: bolder;
    max-width: 100%;
}

form, [for="tittle"], input{
    flex: 1 1 80%;
    flex-wrap: wrap;
    border: 3px solid darkgray;
    padding: .5rem;
    color: lightslategray;
    font-weight: bold;
    max-width: 100%;
}
form, [for="tittle"], input:focus{
    outline: 2px solid darkgray;
}
form > [type="submit"] {
    background-color:#33CA7F;
    box-shadow: 3px 5px 8px 2px rgba(#33CA7F, .2);
    border: 3px solid transparent;
    font-size: 1.3rem;
    color: white;
    padding: .5rem;
    cursor: pointer;
    transition: all 250ms ease-in-out;
}


form > [type="submit"]:hover, :focus{
    outline: none;
    box-shadow: none;
    border: 3px solid darkgrey;
}
.note-container {
    max-width: 1000px;
    margin: 2rem auto 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    grid-gap: 1.5rem;
}
 .note{
    border: 3px solid #446DF6;
    padding: 1.5rem;
    transition: all 250ms ease-in-out;

}
 .note-tittle{
    font-size: 2rem;
    margin-bottom: .5rem;
}
.note-body {
    overflow: hidden;
    max-height: 8rem;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;

}
.note-btns {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: .5rem;
}
.note-btn {
    font-family: inherit; 
    font-size: inherit;
    padding: .5rem 1rem;
    margin-top: 1rem;
    color: white;
    cursor: pointer;
    transition: all 250ms ease-in-out;
}
.note-btn :focus, :hover {
    box-shadow: none;
}
.note-view {
    background: #446DF6;
    box-shadow: rgba(#446DF6, .2);
}

.note-delete {
    background: #E01541;
    box-shadow: rgba(#E01541, .2);
}