/* page background */

body{

    margin:0;

    padding:20px;

    background:

    linear-gradient(rgba(0,0,0,0.5),

    rgba(0,0,0,0.5)),

    url("images/heroimage.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

    font-family:Arial, sans-serif;

}

/* main layout */

.main-layout{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    gap:20px;

    background:transparent;

}

/* hero image */

.hero-image{

    background-image:url("images/heroimage.jpg");

    height:350px;

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

    position:relative;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    overflow:hidden;

}

/* blur overlay */

.hero-image::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.4);

    backdrop-filter:blur(3px);

}

/* title */

.hero-image h1{

    position:relative;

    z-index:1;

    font-size:45px;

    text-shadow:0px 0px 10px black;

}

/* navigation sections */

.navigation-add,

.navigation-view{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

/* buttons */

.navigation-add a,

.navigation-view a{

    background-color:rgba(173,216,230,0.8);

    color:white;

    text-decoration:none;

    padding:10px 15px;

    border-radius:8px;

    transition:0.3s;

    display:inline-block;

}

/* hover effect */

.navigation-add a:hover,

.navigation-view a:hover{

    background-color:#4501ff;

    transform:scale(1.05);

    box-shadow:0px 0px 10px rgba(0,0,0,0.4);

}

/* click effect */

.navigation-add a:active,

.navigation-view a:active{

    transform:scale(0.95);

}

/* content section */

.content{

    width:95%;

    padding:20px;

    color:white;

    background:rgba(0,0,0,0.45);

    border-radius:12px;

    backdrop-filter:blur(5px);

    box-shadow:0px 0px 15px rgba(0,0,0,0.4);

}

/* forms */

form{

    display:flex;

    flex-direction:column;

    gap:10px;

}

/* inputs */

input,

select{

    padding:8px;

    border:none;

    border-radius:6px;

    width:250px;

}

/* submit button */

button,

input[type="submit"]{

    width:120px;

    padding:10px;

    border:none;

    border-radius:8px;

    background-color:lightblue;

    color:white;

    cursor:pointer;

    transition:0.3s;

}

/* submit hover */

button:hover,

input[type="submit"]:hover{

    background-color:#5aec0b;

    transform:scale(1.05);

}