@font-face {
    font-family: 'Univers Condensed';
    src: url('assets/fonts/Univers-Condensed.woff2') format('woff2'),
        url('assets/fonts/Univers-Condensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-stretch: condensed;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('assets/fonts/Roboto_Condensed-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-stretch: condensed;
}

body,
html {
    margin: 0;
    font-family: 'Univers Condensed';
    touch-action: none; 
    -ms-touch-action: none; /* For older firmware versions */
    user-select: none;
    overflow: hidden;
}

img {
  -webkit-user-drag: none;
}

.layout {
    width: 1920px;
    height: 1080px;
    background-image: url("./assets/images/BG_patches_existants.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* -------------------------------------------    SHARED    ------------------------------------------- */

.border-with-shine {
    opacity: 1;
    border: 2px solid #e7e7e3;
    box-sizing: content-box;
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.3),
        0 0 7px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(255, 255, 255, 0.2);
}

.home-button {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 87px;
    height: 87px;
}

.home-button:active {
    transform: scale(0.95);
}

/* ------------------------------------------- HUB HUB HUB ------------------------------------------- */

.hub {}

.main-title {
    position: absolute;
    width: 956px;
    height: 84px;
    left: 481px;
    top: 672px;
    font-size: 54px;
    line-height: 60px;
    font-weight: 600;
    text-align: center;
    color: #E7E7E3
}

.copyright {
    position: absolute;
    width: 120px;
    height: 25px;
    bottom: 20px;
    left: 30px;
    font-size: 18px;
    font-weight: 300;
    color: #315D6D;
}

.main-photo-holder {
    position: absolute;
    width: 432px;
    height: 432px;
    left: 743px;
    top: 164px;
}

.main-photo {
    width: 100%;
}

.title {
    position: absolute;
    width: 956px;
    height: 84px;
    left: 481px;
    top: 672px;
    font-size: 54px;
    line-height: 60px;
    font-weight: 600;
    text-align: center;
    color: #E7E7E3
}

.subtitle {
    position: absolute;
    width: 830px;
    height: 42px;
    left: 545px;
    top: 756px;
    font-size: 26px;
    font-weight: 300;
    font-style: italic;
    text-align: center;
    color: #E7E7E3;
    opacity: 0.7;
}

.upright {
    font-style: normal;
}

.language-buttons-holder {
    position: absolute;
    width: 240px;
    height: 72px;
    display: flex;
    justify-content: space-between;
    left: calc(50% - 120px);
    bottom: 40px;
}

.language-button {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #E7E7E3;
    opacity: 0.5;
}

.lang-selected {
    opacity: 1;
}

.flag-image {
    width: 55px;
    height: 55px;
    border: 2px solid #E7E7E3;
    border-radius: 50%;
}

/* ------------------------------------------- gallery ------------------------------------------- */

.gallery-holder {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.title {
    position: absolute;
    width: 956px;
    height: 84px;
    left: 481px;
    top: 50px;
    font-size: 54px;
    line-height: 60px;
    font-weight: 600;
    text-align: center;
    color: #E7E7E3
}

.row {
    position: absolute;
    display: flex;
    flex-direction: row;
}

.first-row {
    height: 160px;
    left: 234px;
    top: 250px;
}

.second-row {
    height: 160px;
    left: 85px;
    top: 550px;
}

.third-row {
    height: 160px;
    left: 85px;
    top: 850px;
}

.first-row > * {
  margin-right: 46px;
}

.second-row > * {
  margin-right: 46px;
}

.third-row > * {
  margin-right: 46px;
}

.astro-image {
    width: 100%;
}

.lang-flag-image {
    width: 100%;
}

.gallery-button {
    width: 250px;
    height: 160px;
    background: rgba(231, 231, 227, 0.2);
    backdrop-filter: blur(2px) brightness(110%);
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-button:active {
    transform: scale(0.95);
}

.button-image {
    width: 160px;
    height: 160px;
    margin-top: -95px;
    border-radius: 50%;
    box-sizing: border-box;
}

.button-text {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 600;
    line-height: 34px;
    color: #E7E7E3;
    text-align: center;

}

.flag-image {
    position: absolute;
    width: 60px;
    height: 60px;
    top: -100px;
    right: 25px;
}

.holder {
    position: absolute;
    background: rgba(231, 231, 227, 0.2);
    backdrop-filter: blur(2px) brightness(110%);
    border-radius: 50px;
    border: 2px solid #e7e7e3;
    box-sizing: border-box;
    overflow: hidden;
}

.main-holder {
    width: 930px;
    height: 848px;
    top: 75px;
    left: 494px;
    display: flex;
    flex-direction: column;
}

.location-holder {
    width: 100%;
    height: 140px;
    font-size: 36px;
    font-weight: 700;
    color: #16D0B4;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-location {
    margin-right: 20px;
}

.album-name {
    font-size: 56px;
    font-weight: 600;
    color: #E7E7E3;
    margin-left: 63px;
    margin-top: 15px;
}

.album-role {
    font-size: 36px;
    font-weight: 300;
    color: #E7E7E3;
    margin-left: 63px;
}

.legende-holder {
    width: 90%;
    font-size: 26px;
    font-weight: 300;
    color: #E7E7E3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 10px;
    margin-left: 63px;
    line-height: 30px;
}

.country-holder {
    position: absolute;
    min-width: 295px;
    width: fit-content;
    height: 83px;
    right: 460px;
    top: 880px;
    background: #e7e7e7;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
}

.country-text {
    font-size: 30px;
    font-weight: 700;
    color: #003447;
    width: 100%;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}

.album-flag-image {
    width: 48px;
    height: 48px;
    width: fit-content;
    margin-left: auto;
    margin-right: 14px;
}

.image {
    width: 929px;
    height: 485px;
}

.left-holder {
    width: 929px;
    height: 485px;
    left: -616px;
    top: 313px;
}

.right-holder {
    width: 929px;
    height: 485px;
    left: 1612px;
    top: 313px;
}

.fleche-button-holder {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 495px;
    border-radius: 50%;
    border: 2px solid #e7e7e3;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-button {
    left: 342px;
    transition: all 0.2s linear;
}

.left-button:active {
    transform: scale(0.95);
}

.right-button {
    right: 342px;
    transition: all 0.2s linear;
}

.right-button:active {
    transform: scale(0.95);
}

.button-holder {
    position: absolute;
    width: 251px;
    height: 50px;
    left: 151px;
    top: 41px;
    border: 2px #E7E7E3 solid;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 30px;
    padding: 15px;
    transition: all 0.2s linear;
}

.button-holder:active {
  transform: scale(0.95);
}

.text-block {
    width:100%;
    height:100%;
    background: #E7E7E3;
    border-radius: 26px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.polish {
    font-family: 'Roboto Condensed';
    font-weight: 300;
}