@font-face { font-family: AkzidenzGrotesk; src: url('fonts/Akzidenz-grotesk-roman.ttf'); }
@font-face { font-family: AkzidenzGrotesk-Black; src: url('fonts/Akzidenz-grotesk-black.ttf'); }

*{
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: crimson;
    padding: 2vw;
}

.container{
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-rows: 80vh 20vh;
    grid-template-columns: 100vw;
}

.menu-container a{
    color: black;
    text-decoration: none;
    padding: 1vw;
    position: relative;
    overflow: hidden;
}

h1{
    font-family: AkzidenzGrotesk;
    font-size: 7vw;
    height: 5.5vw;
    position: relative;
    padding: 0.5vw;
}

.menu-container a::before{
    content: "";
    background: black;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1vw;
    transition: all 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(105%);
}

.menu-container a:has(h1:hover)::before{
    transform: translateY(0);
    transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu-container a::after{
    content: "";
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1vw;
    transition: all 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(-105%);
}

.menu-container a:has(h1:hover)::after{
    transform: translateY(0%);
    transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

p{
    font-family: AkzidenzGrotesk;
    font-size: 3vh;
    padding: 1vw;
    width: 100%;
}

.menu-container{
    padding-top: 6vh;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
}

.footer-container{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: end;
    text-align:justify;
}

.p-middle{
    text-align: center;
    padding: 2vw;
}

.back{
    position: absolute;
    font-family: AkzidenzGrotesk;
    top: 0;
    left: 2vw;
    font-size: 10vh;
}

.container-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.site-content{
    margin: 2vw;
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
}

.site-content img{
    padding: 1vw;
    width: 50%;
}