@font-face {
    font-family: Marker;
    src: url("../Marker SD.ttf");
}
html, body {
    font-family: "Marker", fantasy;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 20px;
    scroll-behavior: smooth;
}

/*  BACKGROUND PICTURES  */


.sides_blurred{
    position: absolute;
    background-image: url("../img/main_page_elements/side.jpg");
    background-size: 100% auto;
    background-repeat: repeat;
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
    z-index: 1;
    width: 10%;
    height: 100%;
}
#sides_blurred_left {
    left: 0;
}
#sides_blurred_right {
    right: 0;
    rotate: 180deg;
}

#main_design {
    height: 157vw;
    background-image: url('../img/main_page_elements/main.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: black;
}

#mid_box {
    width: 100%;
}

#bottom_design {
    background-color: black;
    background-image: url('../img/main_page_elements/bottom_design.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 203vw;
    position: relative;
    z-index: -1;
    top: -14vw;
}

/* OTHER  */


#particles_sand {
    position: absolute;
    top: 20%;
    left: -7%;
    width: 100%;
}

#main_logo {
    display: flex;
    margin: 0 auto 0 auto;
    padding-top: 25%;
    width: 40%;
}

#content {
    position: absolute;
    top:0;
    width: 100%;
}

            /*  MENU  */
header {
    display: flex;
    position: relative;
    z-index: 1;
}
header nav {
    background-image: url("../img/main_page_elements/top_box.png");
    background-size: 60% auto;
    background-repeat: no-repeat;
    background-position: center top;
    position: fixed;
    width: 100%;
    height: 7vw;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
}
header nav {
}
header.menu ul {
    padding: 0;
    margin: 1% 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    font-size: 1.5vw;
}
header.menu ul li a {
    color: white;
    border-radius: 20px;
}
header.menu ul.parts li a {
    text-decoration: none;
    padding: 2vh 1vw 1vh 1vw
}

header.menu ul.parts li a:hover, header.menu ul.parts li a.active {
    background: white;
    color: black;
    box-shadow: 2px 3px 5px 0 black;
}
/* Logos spe */
header.menu ul.logos img {
    width: 3vw;
}
header.menu ul.logos li {
    padding-left: 8%;
}
/* text spe */
header.menu ul.parts {
    margin-top: 2%;
    margin-left: 3.5vw;
}
header.menu ul.parts li {
    padding-left: 3px;
}



/*  ------  TRAILER  ------  */

#trailer {
    margin-top: 25%;
    display: flex;
    justify-content: center;
}

#trailer_box {
    background-image: url('../img/box.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    width: 45vw;
    height: 100%;
}

#trailer_box p {
    display: flex;
    align-items: center;
    padding: 12%;
    font-size: 1.5vw;
    text-align: justify;
    color: white;
    line-height: 150%
}

/*  ------  TEAM  ------  */

#team {
    margin-top: 10%;
    display: flex;
    justify-content: center;
}

#team_box {
    background-image: url('../img/box.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    height: 100%;
}

#team_box #team_members {
    display: flex;
    justify-content: center;
}
#team_box img {
    width: 15vw;
}
#team_box .team_member {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 40%;
    padding: 0 0 6% 0;
}

#team_box h1 {
    background: white;
    color: black;
    box-shadow: 2px 3px 5px 0 black;
    margin-top: 8%;
    border-radius: 20px;
    padding: 2% 1.5vw 1% 1.5vw;
    font-size: 2.5vw;
}

#team_box h3 {
    color: white;
    padding: 0;
    margin: 5% 0 5% 0;
    font-size: 2vw;
    display: flex;
    height: 2vw;
}

#team_box p {
    display: flex;
    align-items: center;
    padding: 0 5% 0 5%;
    font-size: 1.3vw;
    text-align: justify;
    color: white;
    line-height: 150%
}

#riv_insta {
    width: 3vw!important;
    margin-left: 1vw;
}

/*  ------  TEAM  ------  */


#faq {
    margin-top: 5%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.faq_box {
    background-image: url('../img/box.png');
    background-size: 75% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    height: 100%;
    margin-top: 5%;
}

#faq h3 {
    background: white;
    color: black;
    box-shadow: 2px 3px 5px 0 black;
    margin: 7% 10vw 3% 10vw;
    border-radius: 20px;
    padding: 2% 1.5vw 1% 1.5vw;
    font-size: 1.7vw;
}

#faq p {
    display: flex;
    align-items: center;
    padding: 0 5% 6% 5%;
    font-size: 1.2vw;
    text-align: justify;
    color: white;
    line-height: 150%;
    margin: 0;
    width: 55%;
}

/*  ------  FOOTER  ------  */

.footer img {
    position: relative;
    width: 40%;
}

.footer {
    background-image: url('../img/main_page_elements/bottom_box.png');
    background-size: 40% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 14vw;
    text-align: center;
    width: 100%;
}
.footer p {
    align-items: center;
    font-size: 1.2vw;
    text-align: center;
    color: white;
    margin: auto;
    padding-top: 3vw;
    padding-bottom: 3vw;
}

.footer #mailto {
    width: 5vw;
}