body {
    margin: 1rem;
    font-family: 'Poiret One', cursive;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask5757%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%23SvgjsLinearGradient5758)'%3e%3c/rect%3e%3cpath d='M0 0L591.2 0L0 168.79z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M0 168.79L591.2 0L850.28 0L0 373.67999999999995z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M0 373.67999999999995L850.28 0L933.99 0L0 382.0799999999999z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M0 382.0799999999999L933.99 0L1175.51 0L0 463.66999999999996z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M1440 560L1222.04 560L1440 381.6z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M1440 381.6L1222.04 560L1014.24 560L1440 346.62z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M1440 346.62L1014.24 560L399.11 560L1440 246.76z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M1440 246.76L399.1100000000001 560L375.6400000000001 560L1440 100.76999999999998z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask5757'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='15.28%25' y1='-39.29%25' x2='84.72%25' y2='139.29%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient5758'%3e%3cstop stop-color='rgba(233%2c 195%2c 208%2c 1)' offset='0.09'%3e%3c/stop%3e%3cstop stop-color='rgba(227%2c 248%2c 240%2c 1)' offset='0.44'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 1)' offset='0.75'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

h1 {
    text-align: center;
    font-weight: 800;
    font-size: xx-large;
}

#select-ingredient {
    margin-bottom: 1rem;
}

div#container {
    display: flex;
}

div#cocktail-menu {
    display: flex;
    flex-wrap: wrap;
    width: 56%;
    text-align: center;
}

div#cocktail-menu div {
    display: block;
    height: 200px;
    margin: 0 1rem 1rem 0;
}

div#cocktail-menu div h4 {
    position: relative;
    bottom: 60%;
    width: 200px;
    opacity: 0%;
}

div#cocktail-menu div:hover img {
    opacity: 50%;
}

div#cocktail-menu div:hover h4 {
    opacity: 100%;
}

#image-container, #cocktail-detail {
    position: fixed;
    left: 56%;
    top: 5rem;
    bottom: 1rem;
    right: 1rem;
}

#cocktail-detail {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.5);
}

#detail-image {
    width: 100%;
    height: 100%;
}

.detail-element {
    margin-top: 0;
    margin-bottom: 0;
}

p.detail-element, h2.detail-element {
    margin-bottom: 0.5rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

input[type=submit] {
    background: #EFF2F5;
    background-image: -webkit-linear-gradient(top, #EFF2F5, #45D5CE);
    background-image: -moz-linear-gradient(top, #EFF2F5, #45D5CE);
    background-image: -ms-linear-gradient(top, #EFF2F5, #45D5CE);
    background-image: -o-linear-gradient(top, #EFF2F5, #45D5CE);
    background-image: -webkit-gradient(to bottom, #EFF2F5, #45D5CE);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #FFFFFF;
    font-family: Trebuchet MS;
    font-size: 20px;
    font-weight: 100;
    padding: 10px;
    -webkit-box-shadow: 0 0 20px 0 #FFFFFF;
    -moz-box-shadow: 0 0 20px 0 #FFFFFF;
    box-shadow: 0 0 20px 0 #FFFFFF;
    text-shadow: 0 0 0 #000000;
    display: inline-block;
    cursor: pointer;
    text-align: center;
 }

 input[type=submit]:hover {
    border: solid #337FED 0;
    background: #EFF2F5;
    background-image: -webkit-linear-gradient(top, #EFF2F5, #C4BAE2);
    background-image: -moz-linear-gradient(top, #EFF2F5, #C4BAE2);
    background-image: -ms-linear-gradient(top, #EFF2F5, #C4BAE2);
    background-image: -o-linear-gradient(top, #EFF2F5, #C4BAE2);
    background-image: -webkit-gradient(to bottom, #EFF2F5, #C4BAE2);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
 }

 input, textarea {
     width: 70%;
 }