*{
    margin:0;
    padding: 0;
}
:root{
    --submit: #FCA311;
    --submit-hover: #DE8A02;
    --foot: #000000;
    --foot-hover: #3A3B3C;
    --day: #FCF6BD;
    --night: #252627;
    --select: #E5E5E5;
    --opt: #14213D;
    --line: linear-gradient(to right ,#4e3a1a, #E5E5E5);
}
    /* base */
html{
    scroll-behavior: smooth;
}
main{
    height:40rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: var();
}
    /* styling */
nav > ul{
    padding: 10px 0px;
    background-color: var(--opt);
    
}
header{
    background-color: var(--night);
    display: flex;
    flex-direction: column;
}
header h1{
    font-family:'Courier New', Courier, monospace;
    font-size: xx-large;
    font-weight: bold;
    text-align: start;
    color: var(--day);
}
.home h2, p{
    position:absolute;
    right:20%;
    top:35%;

}
.home img{
    width: 20rem;
    position: absolute;
    top: 20%;
    border-radius: 50%;
    border: 2px solid var(--day);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
a{
    text-decoration: none;
    color: var(--day);
    font-size: larger;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    transition: color 0.3s ease-in-out;
    position: relative;
}
nav >ul{
    list-style: none;
    display: flex;
    padding-right: 10px;
    gap: 20px;
    justify-content: flex-end;
}
a:hover{
    color: var(--select);
    transition: color 0.3s ease-in-out;
    cursor: pointer;
}

nav a::after{
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background-color: var(--day);
    left: 0;
    bottom: -5px;

    transition: width 0.5s ease;
}
nav a:hover::after{
    width: 100%;
}
    /* body */
body{
    background-color: var(--select);
}
header{
    text-align: center;
    padding: 20px 0px;
}
    /* recipes */
.container{
    display: grid;
    border: 2px solid rgba(20,33,61,0.2);
    grid-template-columns: repeat(auto-fill ,minmax(400px,1fr));
    grid-auto-rows: minmax(100px,auto);
    gap: 10px;
    padding: 10px;
}
.items{
    border: 2px solid rgba(20, 33, 61 , 0.2);
    border-radius: 1.5rem;
    background-color: #E5E5E5;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    /* Label */
.form{
    text-align: center;
}
.items:hover{
    transform: scale(1.1);
    transition: all 0.3s ease;
    cursor: pointer;
}
.items img{
    width: 13rem;
    height: 13rem;
    border-radius: 20px 20px 80px 80px;
}
.items h1,h2{
    padding:1rem;
    gap: 20px;
}
.items ul{
    padding: 2rem;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 0%; 
    list-style-type: none;
    left: 90%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.items:hover ~  .items ul{
    visibility: visible;
    opacity: 1;
}
label{
    font-size: medium;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--night);
    
}
#message, #name, #email{
    height: 20px;
    width: 20rem;
    border: 0;
    padding: 5px;
    font-size: medium;
    
}
.form {
    width: auto;
    padding: 40px;
    margin: 20px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}


    /* Submit section */
#submit{
    background-color: var(--submit);
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    color: var(--night);
    font-size: larger;
    font-weight: bold;
}
#submit:hover{
    background-color: var(--submit-hover);
    transition: all 0.3s ease-in-out;
    transform: scale(1.1);
    cursor: pointer;
    color: white;
}
    /* contact */
#contact{
    background: #E4C6AA;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 2px black;
    border-radius: 0px 10px 0px 0px;
    text-align: center;
    display: flex;
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: 15rem;
    align-self: center;
    gap: 200px;
}
#con{
    display: flex;
    
}

    /* Footer */
footer{
    background-color: var(--foot);
    color: var(--day);
    align-items: center;
    text-align: center;
    padding: 10px 0px;
    position: relative;
    width: 100%;
    bottom: 0;
}