@font-face {
    font-family: 'Geraldine';
    src: url(/Fonts/Geraldine.ttf);
}

body {
    /* background: url(Assets/0Shteve.jpg) no-repeat center center fixed; */
    /* background: url(Assets/Foam.jpeg) no-repeat center center fixed; */
    background: url(assets/roastbeef.png) repeat-x;
    background-position: 50vw -5vw;
    background-size: 75% auto;
    background-color: darkgrey;
    opacity: 1;
    transition-duration: 500ms;
}

.display {
    padding: 0;
    margin: 0;
}

.title, #enterButton{
    font-family: 'Geraldine';
    text-align: center;
}

#enterButton, .btn{
    font-size: 4vw;
    border: 3px solid;
    border-radius: 1vw;
}

#pageTitle {
    position: relative;
    margin-top: 6vw;
    font-size: 10vw;
    line-height: 2vw;
    z-index: -2;
}

#subTitle {
    position: relative;
    font-size: 3.8vw;
    background-color: rgba(245, 245, 245, .8);
    width: 65%;
    margin: -5% auto 1% auto;
    z-index: 0;
    border-radius: 1rem;
    line-height: 4vw;
    border: 5px solid white;
}

.modal .modal2 {
    border: none;
}

.modal-backdrop {
    opacity: .98 !important;
}



.modal-content {
    background: url(./Assets/RoastBeef.png) center;
    background-size: auto 120%;
    border: 5px solid black;
    border-radius: 1rem;
}

.modal-body {
    background-color: rgba(200, 200, 200, .9);
    border-radius: 1rem;
    border: none;
}

.modal-footer {
    justify-content: center;
}

#McMillan {
    position: relative;
    opacity: 1;
    display: flex;
    margin: 1vw auto;
    height: 30vw;
    width: auto;
    z-index: -1;
}

input {
    display: block;
    min-width: 70%;
    margin: 0 auto .5vw auto;
    border-radius: 10px;
}

.button1 {
    text-align: center;
    width: 100%;
}

button {
    margin: 10px;
    border-radius: 10px;
}



.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}


/* TABLET */
@media only screen and (max-width:1220px) {
    body {
        background-color: rgb(229, 255, 255);
    }

    .mail {
        display: none;
    }

    .display-4 {
        font-size: 8vmax;
    }

    .display {
        margin: 5% auto;
        width: 90%;
    }

    .jumbotron {
        width: 100%;
    }

    .link {
        font-size: 10vw;
    }
}


/* MOBILE PHONE */
@media only screen and (max-width:800px) {
    .display {
        margin: 5% 5%;
        width: 90%;
    }

    .jumbotron {
        width: 100%;
    }
}