@import "headfoot.css";
@import "profile.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
  font-family: "salo-test";
  src: url(SaloTest-Paolo-uploaded-63b4f20118769.otf);
}

:root {
    /* Please define all constants here, especially colours */
    --header-colour: #fdb5bf;
    --footer-colour: #fdb5bf;
    --content-background-colour: #f1f1f1;
    --background-colour: #ffdbe1;
    --profile-element-colour: white;
    --menu-colour: #ffdbe1; /* or #ffd1d7 */

    --header-height: 100px;
    --footer-height: 80px;
}

html, body, head {
    margin:0px;
    padding:0px;
    background-color: var(--background-colour);
}

#content {
    @media only screen and (min-width: 640px) {
        width: 600px;
        left: calc(50% - 320px);
        box-shadow: 0px 0px 12px -5px rgba(0, 0, 0, 50);
    }
    @media only screen and (min-width: 1240px) {
        width: calc(50% - 40px);
        left: calc(25% - 20px);
        box-shadow: 0px 0px 12px -5px rgba(0, 0, 0, 50);
    }
    @media screen and (max-width: 660px) {
        width: calc(100% - 40px);
        left: 0px;
    }
    z-index: -1;
    padding: 20px;
    padding-bottom: calc(var(--footer-height) + 20px);
    background-color: var(--content-background-colour);
    position: absolute;
    top: var(--header-height);
    min-height: calc(100% - var(--header-height) - var(--footer-height) - 40px);

}

#menu {
    @media only screen and (min-width: 640px) {
        padding: 50px 50px 200px 50px;
        width: calc(100% - 100px);
        height: calc(100% - var(--header-height) - var(--footer-height) - 250px);
    }
    @media only screen and (min-width: 1240px) {
        padding: 100px 100px 200px 100px;
        width: calc(100% - 200px);
        height: calc(100% - var(--header-height) - var(--footer-height) - 300px);
    }
    @media screen and (max-width: 660px) {
        width: calc(100% - 40px);
        height: calc(100% - var(--header-height) - var(--footer-height) - 150px);
        padding: 50px 20px 100px 20px;
        
    }
    position: fixed;
    top: var(--header-height);
    z-index:-1;
    background-color: var(--menu-colour);
    transition: transform .5s ease-in-out;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-evenly;

    #menu-text {
        width:51%;
        flex-grow: 2;
        text-align: center;
        margin-bottom: 50px;
        font-family: "salo-test",sans-serif;
        font-weight: 500;
        color: #a62452;
        font-size: 40px;
    }

    .department-button {
        width:30%;
        height: 80px;
        position: relative;
        transform: translateY(-50%);
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        background-color: #e43a75;
        color: white;
        cursor: pointer;
        transition-duration: 0.4s;
        width: calc(50% - 20px);
        flex-grow: 2;
        margin: 10px;
        font-family: "Inter", sans-serif;
        font-size: 20px;
        font-weight: 700;
    }

}



.closed {
    transform: translateY(-100%);
}