html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif !important;
    color: #032370;
}

p{
    text-align: justify;
    padding: 1rem;
}


.barre {
    text-decoration: line-through;
}

#topheader {
    background-image: url("../img/header.webp");
    /*background-image: url("../img/chateauxmur2.jpg");*/
    overflow-x: hidden;
    background-size: cover;
}

#leftcolumn,
#rightcolumn {
    background-color: #032370; /*#605146;*/
    /*background-image: url("../img/briquetexture.png");*/
}

.roundedimage {
    border-radius: 1rem;
}

.navbar {
    background-color: #000;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.navbar-burger,
.navbar-item,
.navbar-link {
    color: #fff;
    background-color: #000 !important;
}

.navbar-burger:hover {
    color: #98b8c1 !important;
}

.navbar-dropdown {
    background-color: #000 !important;
}

.navbar-dropdown > a {
    color: #fff;
    background-color: #000 !important;
}

.navbar-item:hover,
.navbar-link:hover {
    color: #98b8c1 !important;
}

h1,
h2,
h3,
h4,
.navbar-item,
.navbar-link {
    font-family: 'Righteous', cursive;
}

#footer {
    height: 100%;
    background-color: #080706;
    color: #fff;
    background-image: url("../img/footer.webp");
    background-size: cover;
}

#blocreseau {
    position: fixed;
    top: 20rem;
    right: 0;
    width: 32px;
    height: auto;
}

#toparrow {
    position: fixed;
    bottom: 7rem;
    right: 2rem;
}

#bottomarrow {
    position: fixed;
    top: 2rem;
    right: 2rem;
}

#toparrow,
#bottomarrow {
    z-index: 9999;
    width: 64px;
    height: 64px;
}

.onetitle {
    padding: 3rem 0;
}

.onetitle h2 {
    font-size: 3rem !important;
}

.titlesection {
    text-decoration: none;
    transform: scale(1);
    transition: transform 400ms;
}

.titlesection:hover {
    transform: scale(1.25);
    transition: transform 400ms;
}

.section {}

#titreprincipal {
    font-size: 4rem;
    letter-spacing: 0.6rem;
    color: #fff;
}

#sectionphotos,
#lesthemesimage,
#sectionfantasy {
    margin: 0;
    padding: 3rem;
}

#presentationdujeu {
    background-color: #fff;
}

#lacartedumonde {
    background-color: #98b8c1;
}

#personnagesjouables {
    background-color: #fff;
}

#personnagesnonjouables {
    background-color: #98b8c1;
}

.monstertitle {
    font-size: 2rem;
}

.portrait {}

.portrait:hover {
    opacity: 0.9;
}

.description-monstre {
    border: solid 2px #958871;
    background-color: #eee;
    padding: 1rem;
    text-align: justify;
}

.description-pnj {
    border: solid 2px #6c91b8;
    background-color: #eee;
    padding: 1rem;
    text-align: justify;
}

#reseauxsociaux {
    padding: 1rem 0;
}

#reseauxsociaux a {
    padding: 0 0.5rem;
}

#reseauxsociaux a img {
    opacity: 50%;
}

#reseauxsociaux a img:hover {
    opacity: 100%;
}

.link {
    color: #fff;
}

.link:hover {
    color: #958871;
}

.title ~ p {
    margin: 0.5rem 0;
}


.image-theme{
    width: 250px;
    height: 150px
}

/*********************/
/*** media queries ***/
/*********************/

/*Mobile Up to 768px*/
@media screen and (max-width: 768px) {
    #titreprincipal {
        font-size: 3rem;
    }

    .onetitle h2 {
        font-size: 2rem !important;
    }
}

/*Tablet Between 769px and 1023px*/
@media screen and (min-width: 769px) and (max-width: 1023px) {
    .column {
        margin: auto;
    }
}

/* Desktop Between 1024px and 1215px */
@media screen and (min-width: 1024px) and (max-width: 1215px) {}

/* Widescreen Between 1216px and 1407px */
@media screen and (min-width: 1216px) and (max-width: 1407px) {}

/*FullHD 1408px and above*/
@media screen and (min-width: 1408px) {}