.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 30px;
}

h1 {
font-size: 36px;
text-align: center;
}

p {
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}

#image-input {
width: 30%;
max-width: 30%;
margin-bottom: 20px;
font-size: 16px;
margin: 1px 2px;
padding: 0px;
}

input {
font-size: 16px;
padding: 8px;
margin: 16px 16px 24px 16px;
text-align: center;
border-style: none;
border-bottom: 2px solid #000;
outline: none;
border-radius: 0;
border-width: 2px;
}

button {
margin: 20px 10px 30px 10px;
outline: none;
margin-bottom: 20px;
}
.custom-btn {
width: 30%;
max-width: 30%;
height: 40px;
padding: 10px 25px;
border: 2px solid #000;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
font-size: 20px;
}

.btn-5 {
background: #000;
color: #fff;
line-height: 42px;
padding: 0;
border: none;
}
.btn-5:hover {
background: transparent;
color: #000;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
}
.btn-5:before,
.btn-5:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #000;
transition:400ms ease all;
}
.btn-5:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{
width:100%;
transition:800ms ease all;
}

#image-container {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
}

#image-container img.fade-in {
opacity: 0;
animation: fade-in 2s ease-in-out forwards;
}

@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}


#image-input {
margin-bottom: 10px;
}

button {
margin-top: 4px;
}