body{
    background-color: whitesmoke;
    max-height: 100vh;
    margin: 0;
    padding: 0;
}
.login {
    padding: 50px;
    background: white;
    margin-top: 50px;
    position: relative;
}
.login p{
    position: relative;
}
.in_icon{
    position: relative;
    top: 37px;
    width: 15px;
}
input{
    border: solid 1px var(--primary3);

}
.logo{
    background-position: center;
}
header{
    background-color: white;
}
.menu-item {
    padding: 10px 20px;
    background: white;
    color: var(--primary1);
    font-family: var(--font2);
    border-bottom: solid 1px;
}
.sidebar{
    background: var(--light);
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    padding: 20px 0;
}
.active .menu-item, 
.menu-item:hover {
    color: var(--light) !important;
    background: var(--primary1) !important;
    transition: .3s ease-in-out;
}
.menu{
    padding-top: 50px;
}
.menu-bottom {
    position: absolute;
    bottom: 20px;
    right: 0;
    width: 100%;
    text-align: center;
}
.menu-bottom .menu-item{
    border: none;
}
.area{
    
    height: 100vh;
    overflow: auto;
}
main{
    margin: 0 !important;
    padding: 0 !important;
    background-color: whitesmoke;
}
.light{
    background-color: var(--light);
}
.box{
    padding: 20px;
}
.titleInput{
    background-color: var(--light);
    border: none;
    border-bottom: solid 1px var(--primary3);
    color: var(--primary1);
    font-weight: bold;
    font-size:2em;
    font-family: var(--font1);
    padding: 10px;
}
.box{
    min-height: 25em;
}
.start{
    align-self: flex-start;
}
.addRecipe input[type="text"]{
    background: white;
}
.area p, .area h3, .area h4, .area input[type="text"], .area textarea, .area select {
    color: #5c5c5c;
}
.thumb{
    aspect-ratio: 368/276;
    object-fit: cover;
}
.delete {
    padding: 5px;
    background: #c74d4d;
    color: white;
    width: 60px;
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 5;
    cursor: pointer;
    display: none;
}

.recipebox:hover .delete {
    display: block;
    transition: 1s ease-in-out;
}