@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url(/assets/bg.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Times New Roman', Times, serif;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 42%;
    height: 60%;
    gap: 1%;
}

.main__logo {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 5%;

    width: 30%;
    pointer-events: none;
}

.main__livre {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -6%;
    pointer-events: none;
}

.main__main, .main__side {
    background-image: url(/assets/whitebg.png);
    border: ridge #050505 6px;
    background-size: 15rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 1%;
    padding-top: 1%;

}

.main__img {
    width: 90%;
}

.main__beni {
    position: absolute;
    bottom: -3%;
    left: 0%;
}

.main__intro {
    text-align: justify;
    width: 90%;
}

.main__main {
    width: 75%;
    height: 100%;
    position: relative;
}

.main__side {
    width: 25%;
    height: 100%;
}

.main__page {
    width: 48%;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}