/* Importing common styles */
@import url("/static/common.2668e90797e7.css");

/* INDEX */
/* https: //css-tricks.com/apply-a-filter-to-a-background-image/ */
.WEBSITE-section-main {
    position: relative;
    height: 50vh;
}

.WEBSITE-section-main-img {
    position: relative;
    height: 80vh;
}

@media only screen and (min-width:900px) {
    .WEBSITE-section-in-between {
        height: 10vh;
    }
}

@media only screen and (min-width:1200px) {
    .WEBSITE-section-main {
        height: 100vh;
    }

    .WEBSITE-section-main-img {
        height: 100vh;
    }
}

/* filter: https: //codepen.io/sosuke/pen/Pjoqqp */
.WEBSITE-section-main-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("media/dandelion_blown.3ae9da13c15a.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: top left;
    filter: opacity(10%);
    z-index: -1;
}

.WEBSITE-section-main-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.WEBSITE-h1 {
    font-size: 4em;
}

.WEBSITE-h1-span {
    color: var(--main-blue);
}

.WEBSITE-sub-title {
    font-size: 1.5em;
}

@media screen and (min-width: 600px) {
    .WEBSITE-h1 {
        font-size: 7em;
    }

    .WEBSITE-sub-title {
        font-size: 2.5em;
    }
}

/* SIGNUP and LOGIN*/
.WEBSITE-form-container {
    padding: 30px 10px;
}

/* Enter presentation form */
.WEBSITE-join-parent {
    display: flex;
    gap: 5px
}

.WEBSITE-join-parent>* {
    height: 33px !important;
    width: 140px;
}

/* Section 2 */
/* Maintaining a grid layout with padding bottom: https: //stackoverflow.com/questions/54390359/how-to-keep-css-grid-layout-the-same-on-resize */
.WEBSITE-section-2 {
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    border-left: 5px solid rgba(255, 255, 255, 0);
    border-right: 5px solid rgba(255, 255, 255, 0);
}

@media only screen and (min-width:800px) {
    .WEBSITE-section-2 {
        padding-bottom: 55%;
    }
}

@media only screen and (min-width:1200px) {
    .WEBSITE-section-2 {
        padding-bottom: 45%;
    }
}

/* ------------- */
.WEBSITE-section-2-container-how-polln-works {
    display: grid;
    position: absolute;
    top: 0;
    bottom: 0;
    grid-template-columns: repeat(4, 3fr) repeat(2, 1fr);
    grid-template-rows: repeat(3, 3fr) repeat(2, 1fr) 10px;
}

.WEBSITE-section-2-grid-item-1 {
    grid-column: 1/5;
    grid-row: 1/4;
    /* background-color: rgb(4, 0, 255); */
}

.WEBSITE-section-2-grid-item-2 {
    grid-column: 1/4;
    grid-row: 4/7;
    /* background-color: rgb(255, 0, 43); */
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.WEBSITE-section-2-grid-item-3 {
    grid-column: 5/7;
    grid-row: 1/4;
    /* background-color: rgb(9, 255, 0); */
}

.WEBSITE-section-2-grid-item-4 {
    grid-column: 4/7;
    grid-row: 2/7;
    /* background-color: rgb(242, 255, 0); */
    text-align: right;
}



.WEBSITE-section-2-grid-item-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    z-index: 1;
}

.WEBSITE-section-2-grid-item-4 img {
    height: 100%;
    object-fit: contain;
    overflow: hidden;
    z-index: 2;
}

.WEBSITE-section-2-grid-item-2>h2 {
    color: rgb(188, 188, 188);
}

@media only screen and (max-width:450px) {
    .WEBSITE-section-2>div>div>h2 {
        font-size: 15px !important;
    }
}

/* SECTIONS 3 - 5 and Footer*/
.WEBSITE-section-3,
.WEBSITE-section-4,
.WEBSITE-section-5,
Footer {
    margin-top: 100px;
    padding: 50px 5px;
}

/* Section 3 */
.WEBSITE-section-3,
.WEBSITE-section-3-card-container {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.WEBSITE-section-3 {
    flex-direction: column;
    text-align: center;
    background-color: #e5e5e5;
}

.WEBSITE-section-3>h3 {
    margin-bottom: 15px;
    color: gray;
}

.WEBSITE-card {
    border-radius: 15px !important;
    border: 2px solid var(--main-blue);
}

/* Section 4 (video) */
.WEBSITE-section-4 {
    display: flex;
    justify-content: center;
    padding: 0 5px !important;
}

@media only screen and (min-width:800px) {
    .WEBSITE-section-4 {
        padding: 50px 5px !important;
    }
}

.WEBSITE-section-4>div>video {
    border: 10px solid black;
    border-radius: 15px;
    background-color: #e5e5e5;
}

.WEBSITE-section-4-video-big,
.WEBSITE-section-4-video-small {
    display: none;
}

@media only screen and (min-width:450px) {
    .WEBSITE-section-4-video-small {
        display: inherit;
    }

    .WEBSITE-section-4-video-smartphone {
        display: none;
    }
}

@media only screen and (min-width:800px) {
    .WEBSITE-section-4-video-big {
        display: inherit;
    }

    .WEBSITE-section-4-video-small {
        display: none;
    }
}

/* Section 5 */
.WEBSITE-section-5 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 20px;
    background-color: #e5e5e5;
}

.WEBSITE-section-5>h3 {
    color: gray;
}

.WEBSITE-section-5>div {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.WEBSITE-section-5>div>a {
    display: inline-block;
    width: 150px !important;
}

/* Guide Page */
.WEBSITE-GUIDE-main-content {
    padding: 25px;
}

.WEBSITE-GUIDE-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.WEBSITE-GUIDE-section-1>h1 .WEBSITE-GUIDE-section>h2 {
    color: var(--main-blue);
}

.WEBSITE-GUIDE-section>h2 {
    font-weight: bold;
}

.WEBSITE-GUIDE-section-1>p {
    color: gray;
}

.WEBSITE-GUIDE-card-elements {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.WEBSITE-GUIDE-card-elements>.card {
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.WEBSITE-GUIDE-card-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.WEBSITE-GUIDE-card-image {
    border: 2px solid var(--main-blue);
    border-radius: 4px;
}

.WEBSITE-GUIDE-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.WEBSITE-GUIDE-card-image-phone {
    text-align: center;
}

.WEBSITE-GUIDE-card-image-phone img {
    object-fit: contain;
    max-height: 180px;
}

.card-text {
    color: gray;
}

/* Footer */
footer {
    border-top: 5px solid var(--main-blue);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 50px;
}

footer p {
    margin-right: 7px;
    color: var(--cNavyBlue);
}

footer>p>a {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

footer ion-icon {
    font-size: 20px;
    padding-left: 5px;
    color: var(--main-blue);
}

footer ion-icon:hover {
    transform: scale(2) rotateZ(360deg);
}