* {
    box-sizing: border-box;
}
body {
    margin: 0;
    line-height: 1.4;
    font-family: "Grotesk", Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #212324;
    overflow-wrap: break-word;
    word-wrap: break-word;
    height: 100vh;
}
body {
    background-color: #f5f2e7;
    color: #214664;
}
a {
    color: #44a092;
}
a:hover, a:active, a:focus {
    color: #fe930e;
}
h1{
    position: absolute;
    margin: 0;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(2vw, 36px, 5vw) ;
}
ul {
    position: absolute;
}
img {
    position: absolute;
    width: clamp(360px, 25vw, 480px);
    margin: 0;
    transform: translateY(-10%);
}
.img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.overlay-img {
    opacity: 0;
    transition: ease-in 0.15s;
}
.overlay-img:hover, .overlay-img:active, .overlay-img:focus {
    opacity: 100%;
    transition: 1s cubic-bezier(0.17, 0.64, 0.86, 0.93) 0.15s;
}