/******************/
/*écrans de bureau*/
/******************/
@media (min-width: 1401px) {
    .main>div {
        padding-top: 5vh;
    }

    .navbar-nav {
        margin-right: 133px;
    }

    .navbar-brand-img {
        background-size: 7em auto !important;
        width: 7em !important;
        height: 7em;
        margin-top: 7vh;
    }

    li.nav-item>a {
        letter-spacing: 0.1em;
    }

    .logo {
        height: 7em;
    }

    .menu {
        margin-top: 12vh;
    }

    .welcome>div {
        margin-top: 23vh;
        padding: 30px 30px 30px 30px;
    }

    .welcome-text-1 {
        font-size: 2.5em;
        margin-bottom: .5%;
    }

    .welcome-text-2 {
        font-size: 1.8em;
        margin-bottom: .5%;
    }
    .permanent-marker-regular{
        margin-top: 5vh;
    }

    .booktable{
        top: 3vh;
        left: 85vw;
    }    
}

/************************************/
/*tablettes et ordinateurs portables*/
/************************************/
@media (min-width: 601px) and (max-width: 1400px) {
    .navbar-nav {
        margin-right: 133px;
    }

    .navbar-brand-img {
        background-size: 7em auto !important;
        width: 7em !important;
        height: 7em;
        margin-top: 7vh;
    }

    li.nav-item>a {
        letter-spacing: 0.1em;
    }

    .logo {
        height: 7em;
    }

    .menu {
        margin-top: 12vh;
    }

    @media (orientation: portrait) {
        .welcome>div {
            margin-top: 27vh;
            padding: 20px 20px 20px 20px;
        }
        .permanent-marker-regular{
            margin-top: 5vh;
        }
    }

    @media (orientation: landscape) {
        .welcome>div {
            margin-top: 27vh;
            padding: 20px 20px 20px 20px;
        }
        .permanent-marker-regular{
            margin-top: 0;
        }
        .logo{
            margin-top: 5vh;
            margin-left: 1vw;
        }
    }

    .booktable{
        top: 3vh;
        left: 85vw;
    }  
}

/*************/
/*smartphones*/
/*************/
@media (max-width: 600px) {
    html {
        font-size: 16px;
    }

    .navbar {
        width: 5em !important;
        height: 5em;
    }

    .navbar-nav {
        margin-left: 5px;
    }

    .navbar-brand-img {
        background-size: 5em auto !important;
        width: 5em !important;
        height: 5em;
    }

    li.nav-item>a {
        letter-spacing: 0;
    }

    .logo {
        height: 5em;
    }

    .menu {
        margin-top: 2vh;
    }

    .welcome>div {
        margin-top: 26vh;
        padding: 10px 10px 10px 10px;
    }

    .welcome-text-1 {
        font-size: 1.6.em;
        margin-bottom: .5%;
    }

    .welcome-text-2 {
        font-size: 1.2em;
        margin-bottom: .5%;
    }
    
    .permanent-marker-regular{
        margin-top: 1vh;
    }

    .booktable{
        top: 3vh;
        left: 66vw;
        width: 8rem;        
    }  
}

/* To implement ?

 @media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}*/