@import url('root.css');

body {
    /*background: var(--secondary-color);*/
    color: var(--primary-color);
    font-family: 'Caudex', serif;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.menu-button {
    z-index: 100;
    position: fixed;
    display: flex;

    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;

    height: 36px;
    width: 100px;

    border-radius: 20px;
    border: solid 1px var(--primary-color);

    transform: translateX(30px) scale(0.6);

    text-transform: uppercase;
    cursor: pointer;

    top: 75px;
    right: 90px;
    font: Bold 20px Heebo;
    letter-spacing: 3px;
}

.menu-container {
    z-index: 1200;
    height: 100vh;
    width: 100vw;
    position: fixed;

    top: 0;
    left: 0;

    display: none;
    opacity: 0;
    
    background-color: var(--terciary-color);
    transition: opacity .25s;
}

.menu-container ul {
    list-style-type: none;
}

.menu-container li {
    color: var(--cream-color);
    font-size: 90px;
    position: fixed;
    transition: transform 250ms ease-in;
}

.menu-container li:hover {
    transform: translateX(-20px);
    transition: transform 250ms ease-out;
}

.menu-container a {
    color: var(--cream-color);
    text-decoration: none;
}

.menu-container a:hover {
    color: var(--cream-color);
    text-decoration: none;
}


.menu-container li:nth-child(1) {
    left: 40%;
    top: 20%;
}

.menu-container li:nth-child(2) {
    left: 60%;
    top: 42%;
}

.menu-container li:nth-child(3) {
    left: 25%;
    top: 60%;
}

.num {
    position: absolute;
    font-size: 25px;
}

.numl {
    left: -10px;
    top: 20px;
}

.numr {
    right: -15px;
    top: 20px;
}

.menu-exit {
    position: fixed;
    top: 100px;
    right: 100px;
    color: var(--cream-color);
    height: 30px;
    width: 30px;
    transition: all 250ms;
}

.menu-exit:hover {
    transform: scale(1.3);
    transition: all 250ms;
}

.signature {
    z-index: 1000;
    display: block;
    position: fixed;

    width: 190px;
    height: 35px;

    top: 79px;
    left: 62px;

    transform: scale(.6) translateX(-40px);
}

.signature span {
    text-transform: uppercase;
    font: Bold 20px Heebo;
    letter-spacing: 3px;
    font-weight: 700;
    color: var(--primary-color);
    position: absolute;
}

.sign-yael {
    left: 0;
    top: 0;
    transition: all 350ms ease-in-out;
}

.signature:hover .sign-yael {
    left: 45px;
    top: 2px;
    transition: all 350ms ease-in-out;
}

.sign-circ {
    border: 1px solid var(--primary-color);
    height: 20px;
    width: 70px;
    border-radius: 20px;
    position: absolute;

    left: 65px;
    top: 2px;
    transition: all 350ms ease-in-out;
}

.signature:hover .sign-circ {
    height: 34px;
    top: -2px;
    width: 140px;
    left: 30px;
    transition: all 350ms ease-in-out;
}

.sign-tal {
    right:0;
    transition: all 350ms ease-in-out;
}

.signature:hover .sign-tal {
    right: 30px;
    top:2px;
    transition: all 350ms ease-in-out;
}

#m, #e {
    position: relative;
    top: 0;
    transition: all 150ms ease-in-out;
}

#menu-btn:hover #m {
    position: relative;
    top: -3px;
    transition: all 150ms ease-in-out;
}
#menu-btn:hover #e {
    position: relative;
    top: 3px;
    transition: all 150ms ease-in-out;
}

.footer {
    background: var(--terciary-color);
    color: var(--secondary-color) !important;
    font-family: "Caudex", serif;
    width: 100% !important;
    margin-top: 75px;
    padding: 75px 0 75px;
}

.footer h1 {
    font-size: 75px;
    line-height: 90px;
    text-align: center;
    color: var(--secondary-color) !important;
}

.footer h2 {
    font-size: 40px;
    line-height: 55px;
    text-align: center;
    color: var(--secondary-color) !important;
}