@font-face {
    font-family: "monarch";
    src: url("fonts/Monarch_c_Jacob_Wise_1.otf");
   }
 
   @font-face {
    font-family: "mono";
    src: url("fonts/SimplonBPMono-Bold.otf");
   }
   
* {
    box-sizing: border-box;
    margin:0;
}
body {
    margin:0;
    font-family: "monarch";
}

.mono {
    font-family: "mono";
}

.container {
    overflow: auto;
    width: 100%;
    height:100vh;
    scroll-snap-type: y mandatory;
}

section {
    scroll-snap-align: center;
    width:100%;
    height:100vh;
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr;
}

section.full {
    grid-template-columns: 1fr;
}

.left, .right {
    display: flex;
    width:100%;
    overflow:auto;
    scroll-snap-type: x mandatory;
}

.slide {
    width:100%;
    scroll-snap-align: center;
    flex: 0 0 auto;
    height:100%;
    position: relative;
}

.fond-rouge {
    background:red;
}

.fond-blanc {
    background:#f2f2de;
}

.fond-vert {
    background:green;
}

.center {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.center1 {
    position: absolute;
    top:60%;
    left:60%;
    transform:translate(-50%,-50%);
}

.boire
{
    position: fixed;
    top:0%;
    left:0%;
    z-index: 2;
    padding: 2rem;
}
.grape2
{
    position: fixed;
    top:0%;
    right:0%;
    z-index: 2;
    padding: 2rem;
}
.fullscreen {
    width:100%;
    height:100%;
    object-fit: cover;
    display: block;
}

.grape {
    width:100%;
    height:100%;
    padding: 2rem;
    object-fit: contain;
    display: block;
}

.text-xl {
    font-size: 60pt;   
}

.text-l {
    font-size: 15pt;
    line-height: 1.2;   
}

.text-xxl {
    font-size: 90pt;
}

.text-red {
    color: red;
}

.text-green {
    color: green;
}

.text-center {
    text-align: center;
}

@media only screen and (max-width:768px) {

    section {
        grid-template-columns: 1fr;
        height:100vh;
    }
    .text-xxl {
        font-size: 50pt;
    }

    .text-xl {
        font-size: 35pt;   
    }
}