@font-face {
    font-family: 'Kaylar Serif'; /* Define the font-family name once */
    src: url("../fonts/kaylar-serif.ttf");
}

* {
    font-family: 'Kaylar Serif', sans-serif; /* Use the defined font-family name */
}
body{
    background-image: url("../img/background.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.rombo{
    background-color: #ffd664;
    transform: rotate(45deg);
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.rombo a{
    transform: rotate(-45deg);
}
.rombo i{
    color: #14252d;
    font-size: 12px;
}

.rombo img{
    width: 16px;
}

.button, .prenota{
    padding: 0.5em 0.75em;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
}

.prenota {
    font-size: 28px;
}

.button{
    font-size: 22px;
}

.h1{
    font-size: 32px;
    color: #fff;
}


.rombo-container{
    column-gap: 12px;
}

.text{
    color: #fff;
    font-size: 28px;
}
.text a {
    color: #fff;
    text-decoration: none;
}

.row{
    margin-top: 0.75em;
}

@media screen and (min-width: 768px){
    .text > .col-12:nth-child(n + 2) {
        border-left: 2px solid #fff
    }
    .text, .prenota{
        font-size: 32px;
    }
    .button{
        font-size: 28px;
    }
    .container{
        height: 100vh;
    }
}

@media screen and (max-width: 768px) {
    .button-restaurant{
        display: inline-block;
        width: 90px;
        line-height: 1;
        text-align: center;
    }
}