@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* Size Adapts */
abbr,address,article,aside,audio,b,blockquote,body,body div,caption,cite,code,dd,del,dfn,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
  }

article,aside,figure,footer,header,hgroup,nav,section {
    display: block;
  }

* {
    box-sizing: border-box;
}

.clearfix:after,.clearfix:before {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

/* Load Font */
@font-face {
    font-family: Sui;
    src: url(font/SuisseIntl-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


@media screen and (max-width: 900px) {
    :root {
        --fs-14: 14px; /*fs=font size */
        --fs-12: 12px;
        --fs-10: 10px;
    }
}


/* START OF PAGE CSS!!!! */

body,html {
    overflow: hidden; /* Hide scrollbars */
    height: 100%;
    font-family: Sui;
    font-size: 12px;
    font-weight: 300;
    color: white;
    background-color: black;
}

@media screen and (max-width: 700px) {
    body,html {
        font-size:14px;
    }
}

/* CENTER GRID */

.gridCtn {
    margin: 0 auto;
    max-width: 1580px;
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-gap: 40px
}

@media screen and (max-width: 1200px) {
    .gridCtn {
        grid-gap:30px
    }
}

@media screen and (max-width: 900px) {
    .gridCtn {
        grid-gap:20px
    }
}

@media screen and (max-width: 1600px) {
    .gridCtn {
        max-width:80%
    }
}

/* MEDIA IN THE CENTER */

.imgCtn {
    position: relative
}

.imgCtn img,.imgCtn video {
  -webkit-filter: grayscale(100%); /* EFFECT */
   filter: grayscale(100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

::selection {
    background-color: #fff;
    color: #000
}

/* LINKS */

a {
    display: block;
    color: white;
    text-decoration: none;
}

a:hover {
    color: white;
}


.gridCtn {
    height: 100vh;
    grid-template-rows: min-content auto min-content
}

/* TOP GRID CENTERD */

.gridCtn .topCtn {
    z-index: 1;
    grid-column: 1/13;
    grid-row: 1;
    justify-self: center;
    display: flex;
    margin-top: 40px;
}


/* TOP LINKS */
.gridCtn .topCtn a,.gridCtn .topCtn p {
    font-size: var(--fs-12);
}

.gridCtn .topCtn a+a,.gridCtn .topCtn a+p,.gridCtn .topCtn p+a,.gridCtn .topCtn p+p {
    margin-left: 20px;
}


/* PARAGRAPH - MIDDLE LEFT */

.gridCtn .midLeft {
    /*z-index: 1;*/
    grid-column: 1/3;
    grid-row: 2;
    align-self: center;
    font-size: var(--fs-14);
}

.gridCtn .centerCtn {
    /*z-index: 0;*/
    grid-column: 2/12;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    background-color: transparent; /* color of the img/vid middle area */
    width: 100%;
    padding: 2px;
    margin: -100px 0;
}

.gridCtn .centerCtn .imgCtn {
    aspect-ratio: 962/540;
    width: 100%;
}

.gridCtn .centerCtn .imgCtn img,.gridCtn .centerCtn .imgCtn video {
    object-fit: contain;
    mix-blend-mode: lighten;
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
}


/* PARAGRAPH - MIDDLE RIGHT */

.gridCtn .midRight {
    /*z-index: 1;*/
    grid-column: 10/13;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    font-size: var(--fs-14)
}


/* BOTTOM LEFT */
.gridCtn .botLeft {
    /*z-index: 1;*/
    grid-column: 1/3;
    grid-row: 3;
    align-self: flex-end;
    display: flex;
    margin-bottom: 40px
}

.gridCtn .botLeft a,.gridCtn .botLeft p {
    white-space: nowrap;
    margin-top: 20px;
    font-size: var(--fs-10)
}

.gridCtn .botLeft a+a,.gridCtn .botLeft a+p,.gridCtn .botLeft p+a,.gridCtn .botLeft p+p {
    margin-left: 20px
}



/* BOTTOM RIGHT */

.gridCtn .botRight {
    z-index: 1;
    grid-column: 10/13;
    grid-row: 3;
    align-self: flex-end;
    justify-self: end;
    display: flex;
    margin-bottom: 40px
}

.gridCtn .botRight a,.gridCtn .botRight p {
    white-space: nowrap;
    margin-top: 20px;
    font-size: var(--fs-10)
}

.gridCtn .botRight a+a,.gridCtn .botRight a+p,.gridCtn .botRight p+a,.gridCtn .botRight p+p {
    margin-left: 20px
}


/* -------->> other platforms views */

@media screen and (max-width: 900px) {
    .gridCtn {
        grid-template-rows:min-content auto auto min-content
    }

    .gridCtn .midLeft {
        grid-row: 2
    }

    .gridCtn .midLeft,.gridCtn .midRight {
        grid-column: 1/13;
        align-self: center;
        justify-self: center;
        margin: 0
    }

    .gridCtn .midRight {
        grid-row: 3
    }

    .gridCtn .centerCtn {
        grid-column: 1/13;
        grid-row: 2/4
    }

    .gridCtn .botLeft {
        grid-row: 4;
        flex-direction: column;
        text-align: center
    }

    .gridCtn .botLeft a,.gridCtn .botLeft p {
        margin-top: 0
    }

    .gridCtn .botLeft a+a,.gridCtn .botLeft a+p,.gridCtn .botLeft p+a,.gridCtn .botLeft p+p {
        margin-top: 20px;
        margin-left: 0
    }

    .gridCtn .botRight {
        grid-row: 4;
        flex-direction: column;
        text-align: center
    }

    .gridCtn .botRight a,.gridCtn .botRight p {
        margin-top: 0
    }

    .gridCtn .botRight a+a,.gridCtn .botRight a+p,.gridCtn .botRight p+a,.gridCtn .botRight p+p {
        margin-top: 20px;
        margin-left: 0
    }
}