@font-face {
    font-family: 'Salomon-regular';
    src: url(Salomon/romain/Salomon-Regular.woff);
    src: url(Salomon/romain/Salomon-Regular.woff2);
    src: url(Salomon/ttf/Salomon-Regular.ttf);
}

@font-face {
    font-family: 'Salomon-medium';
    src: url(Salomon/romain/Salomon-Medium.woff);
    src: url(Salomon/romain/Salomon-Medium.woff2);
    src: url(Salomon/ttf/Salomon-Medium.ttf);
}

@font-face {
    font-family: 'Salomon-bold';
    src: url(Salomon/romain/Salomon-Bold.woff);
    src: url(Salomon/romain/Salomon-Bold.woff2);
    src: url(Salomon/ttf/Salomon-Bold.ttf);

}

@font-face {
    font-family: 'Salomon-light';
    src: url(Salomon/romain/Salomon-Light.woff);
    src: url(Salomon/romain/Salomon-Light.woff);
    src: url(Salomon/ttf/Salomon-Light.ttf);
}

@font-face {
    font-family: 'Salomon-regular-italic';
    src: url(Salomon/italique/SalomonItalic-RegularItalic.woff);
    src: url(Salomon/italique/SalomonItalic-RegularItalic.woff2);
    src: url(Salomon/ttf/SalomonItalic-RegularItalic.ttf);
}
@font-face {
    font-family: 'Salomon-medium-italic';
    src: url(Salomon/italique/SalomonItalic-MediumItalic.woff);
    src: url(Salomon/italique/SalomonItalic-MediumItalic.woff2);
    src: url(Salomon/ttf/SalomonItalic-MediumItalic.ttf);
}
@font-face {
    font-family: 'Salomon-bold-italic';
    src: url(Salomon/italique/SalomonItalic-BoldItalic.woff);
    src: url(Salomon/italique/SalomonItalic-BoldItalic.woff2);
    src: url(Salomon/ttf/SalomonItalic-BoldItalic.ttf);
}
@font-face {
    font-family: 'Salomon-light-italic';
    src: url(Salomon/italique/SalomonItalic-LightItalic.woff);
    src: url(Salomon/italique/SalomonItalic-LightItalic.woff2);
    src: url(Salomon/ttf/SalomonItalic-LightItalic.ttf);
}

* {
    cursor: crosshair;
}

body {
    margin: 0;
    overflow: auto;
    font-family: 'Salomon-regular';
    background-image: url(jugement.jpg);
    background-attachment: local;
    background-size: cover;
    display: flex;
}

.clic {
    background-color: rgb(255, 247, 129);
    width: 35vh;
    height: 35vh;
    border-radius: 50%;
    display: block;
    position: fixed;
    top: 60%;
    left: 77.5%;
    z-index: 10;
}

.clic-txt {
    font-family: 'Salomon-bold';
    font-size: 5vh;
    display: block;
    position: fixed;
    top: 72%;
    left: 80%;
}

.clic-txt2 {
    font-family: 'Salomon-regular';
    font-size: 2vh;
    display: block;
    position: fixed;
    top: 78%;
    left: 84.3%;
}

.clic-img {
    z-index: -1;
    width: 100%;
    display: none;
}

a {
    text-decoration: none;
    color: #000;
}

.clic:hover {
    color: slategrey;
}

.hover-image {
    display: none;
}

body:not(.mobile) .hover-title:hover+.hover-image {
    display: flex;
}

.hover-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    flex-direction: column;
    /* Change width and height to scale images */
    width: 100%;
    height: auto;
}

/*PAGE TEST DE LA FONTE*/

.test {
    margin: 0;
    padding: 0;
    overflow: hidden;

}

html,body {
    height: 100%;
}

#gauche {
    width: 50%;
    height: 100%;
    float: left;
    background-color: whitesmoke;
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 15vw;
    font-family: 'Salomon-regular';
    text-align: center;
    border: none;
    padding-top: 3%;
}
.txt-titre{
    font-size: 2vw;
    display: flex;
    position: relative;
    top: 0%;
    left: 39%;
}

/*bloc 1 - corps 12*/
.txt-graisse{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 7%;
    left: 5%;
}
.point1{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 4%;
    left: 90%;
}
.light{
    width: 90%;
    height: 15%;
    background-color: white;
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 1.25vw;
    font-family: 'Salomon-regular';
    text-align: center;
    border: solid black 1px;
    border-radius: 20px;
    padding: 2vh;
    display: flex;
    position: relative;
    top: 6%;
    left: 3%;
}

/*bloc 2 - corps 24*/
.txt-graisse2{
    font-size: 1vw;
    line-height: 1.5;
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 12%;
    left: 5%;
}
.point2{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 9%;
    left: 90%;
}
.regular{
    width: 90%;
    height: 20%;
    background-color: white;
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 2.5vw;
    font-family: 'Salomon-regular';
    text-align: center;
    border: solid black 1px;
    border-radius: 20px;
    padding: 2vh;
    display: flex;
    position: relative;
    top: 11%;
    left: 3%;
}

/*bloc 3 - corps 36*/
.txt-graisse3{
    font-size: 1vw;
    line-height: 1.5;
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 17%;
    left: 5%;
}
.point3{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 14%;
    left: 90%;
}
.medium{
    width: 90%;
    height: 25%;
    background-color: white;
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 3.75vw;
    font-family: 'Salomon-regular';
    text-align: center;
    border: solid black 1px;
    border-radius: 20px;
    padding: 2vh;
    display: flex;
    position: relative;
    top: 16%;
    left: 3%;
}

/*bloc 4 - corps 48*/
.txt-graisse4{
    font-size: 1vw;
    line-height: 1.5;
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 22%;
    left: 5%;
}
.point4{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 19%;
    left: 90%;
}
.bold{
    width: 90%;
    height: 30%;
    background-color: white;
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 5vw;
    font-family: 'Salomon-regular';
    text-align: center;
    border: solid black 1px;
    border-radius: 20px;
    padding: 2vh;
    display: flex;
    position: relative;
    top: 21%;
    left: 3%;
    margin-bottom: 35vh;
}

/*page de droite - Salomon Italic*/
#droite {
    width: 50%;
    height: 100%;
    float: left;
    background-color: rgb(255, 247, 129);
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 15vw;
    font-family: 'Salomon-regular';
    text-align: center;
    border: none;
    padding-top: 3%;
}
.txt-titre2{
    font-size: 2vw;
    display: flex;
    position: relative;
    top: 0%;
    left: 36%;
    font-family: 'Salomon-regular-italic';
}

/*bloc 1 - corps 12*/
.txt-graisse5{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 7%;
    left: 64%;
}
.point5{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 4%;
    left: 6%;
    width: max-content;
}
.light-italic{
    width: 90%;
    height: 15%;
    background-color: white;
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 1.25vw;
    font-family: 'Salomon-regular-italic';
    text-align: center;
    border: solid black 1px;
    border-radius: 20px;
    padding: 2vh;
    display: flex;
    position: relative;
    top: 6%;
    left: 3%;
}

/*bloc 2 - corps 24*/
.txt-graisse6{
    font-size: 1vw;
    line-height: 1.5;
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 12%;
    left: 64%;
}
.point6{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 9%;
    left: 6%;
    width: max-content;
}
.regular-italic{
    width: 90%;
    height: 20%;
    background-color: white;
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 2.5vw;
    font-family: 'Salomon-regular-italic';
    text-align: center;
    border: solid black 1px;
    border-radius: 20px;
    padding: 2vh;
    display: flex;
    position: relative;
    top: 11%;
    left: 3%;
}

/*bloc 3 - corps 36*/
.txt-graisse7{
    font-size: 1vw;
    line-height: 1.5;
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 17%;
    left: 64%;
}
.point7{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 14%;
    left: 6%;
    width: max-content;
}
.medium-italic{
    width: 90%;
    height: 25%;
    background-color: white;
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 3.75vw;
    font-family: 'Salomon-regular-italic';
    text-align: center;
    border: solid black 1px;
    border-radius: 20px;
    padding: 2vh;
    display: flex;
    position: relative;
    top: 16%;
    left: 3%;
}

/*bloc 4 - corps 48*/
.txt-graisse8{
    font-size: 1vw;
    line-height: 1.5;
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 22%;
    left: 64%;
}
.point8{
    font-size: 1vw;
    display: flex;
    position: relative;
    top: 19%;
    left: 6%;
    width: max-content;
}

.bold-italic{
    width: 90%;
    height: 30%;
    background-color: white;
    resize: none;
    overflow-x: hidden;
    color: black;
    font-size: 5vw;
    font-family: 'Salomon-regular-italic';
    text-align: center;
    border: solid black 1px;
    border-radius: 20px;
    padding: 2vh;
    display: flex;
    position: relative;
    top: 21%;
    left: 3%;
    margin-bottom: 35vh;
}


span{
    margin-right: 0.5vh;
}
.R{
    font-family: 'Salomon-regular';
}
.R:hover{
    border-bottom: solid black 1px;
}

.L{
    font-family: 'Salomon-light';
}
.L:hover{
    border-bottom: solid black 1px;
}

.M{
    font-family: 'Salomon-medium';
}
.M:hover{
    border-bottom: solid black 1px;
}

.B{
    font-family: 'Salomon-bold';
}
.B:hover{
    border-bottom: solid black 1px;
}