html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Avenir, Arial;
}

a {
    text-decoration: none;
    color: inherit;
}
  
.fade-in {
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.screenshot-panel {
    background-color: white;
}

@keyframes scalingUp {
    0% { transform: scale(0.5); }
    100% { transform: scale(1); }
}

.screenshot-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    cursor: pointer;
}

.description-panel {
    background-color: white;
    padding: 20%; 
    padding-top: 12%;
}

.description-panel > h1 {
    font-size: 3rem;
}

.description-panel > p {
    font-size: 1.5rem;
}

.screenshot {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    cursor: pointer;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 7vh 69vh repeat(4, 70vh) auto 7vh;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.topbar-background {
    grid-area: 1 / 1 / 2 / 5;
    background: linear-gradient(180deg, #efefff 0%,ghostwhite 100%);
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    height: 7vh;
    background: linear-gradient(180deg, #efefff 0%,ghostwhite 100%);
    border-bottom: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 3.5%;
    z-index: 2;
    font-size: 1.25rem;
}

.topbar > .nav-logo {
    height: 75%;
    margin-left: 1.5%;
}

.topbar > .nav-element {
    transition: all 0.5s;
}

.topbar > .nav-element:hover {
    color: #888888;
}

.topbar > .labatar-link {
    box-sizing: border-box;
    height: 75%;
    width: fit-content;
    margin-left: auto;
    margin-right: 1.5%;
    color: white;
    background: linear-gradient(180deg, #555 0%, #222 100%);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.topbar > .labatar-link:hover {
    background: linear-gradient(180deg, #222 0%, #888 100%);
}

.title {
    grid-area: 2 / 1 / 3 / 5;
    background: linear-gradient(180deg, ghostwhite 0%,white 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    align-items: center;
    font-size: 4.3em;
    text-align: center;
    padding-left: 8rem;
    padding-right: 8rem;
}

.title-arrow {
    height: 4rem;
    animation: 1s ease-out 0.5s 1 pulse;
    z-index: 2;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5); 
    }

    100% {
        transform: scale(1);
    }
}

.demo-panel-1-description { grid-area: 3 / 1 / 4 / 3; }
.demo-panel-1-screenshotholder { grid-area: 3 / 3 / 4 / 5; }
.demo-panel-2-screenshotholder { grid-area: 4 / 1 / 5 / 3; }
.demo-panel-2-description { grid-area: 4 / 3 / 5 / 5; }
.demo-panel-3-description { grid-area: 5 / 1 / 6 / 3; }
.demo-panel-3-screenshotholder { grid-area: 5 / 3 / 6 / 5; }
.demo-panel-4-screenshotholder { grid-area: 6 / 1 / 7 / 3; }
.demo-panel-4-description { grid-area: 6 / 3 / 7 / 5; }

.cta-area {
    grid-area: 7 / 1 / 8 / 5;
    background: linear-gradient(180deg, white 0%,ghostwhite 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* since there is no gradient API for borders */
.cta-wrap {
    background: linear-gradient(45deg, purple 0%,red 100%);
    border-radius: 20px;
    padding: 1em;
    max-width: 75%;
    max-height: fit-content;
    margin-bottom: 5em;
}

.cta-box {
    background-color: ghostwhite;
    border-radius: 10px;
    padding: 3em;
    font-size: 1em;
}

.cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cta-text {
    font-weight: bold;
    margin: 1em 0 2em 0;
}

.cta-button {
    background: linear-gradient(45deg, purple 0%,red 100%);
    padding: 0.5em;
    color: white;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2); /* horizontal offset, vertical offset, blur radius, shadow color */
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1.5rem;
}

.cta-button:hover {
    transform: translateY(-3px); /* Moves the button up by 3 pixels when hovered */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); /* Reduces the shadow size when hovered */
}

.cta-button:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
}

.footer {
    grid-area: 8 / 1 / 9 / 5;
    background-color: ghostwhite;
    border-top: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 7vh 100vh repeat(8, auto) 80vh 7vh;
    }

    .title {
        box-sizing: border-box;
        grid-area: 2 / 1 / 3 / 2;
        padding: 1.5em 3em 0 3em;
        font-size: 3em;
    }

    .description-panel {
        padding: 10%;
    }

    .cta-wrap {
        margin-top: 5em;
    }

    .demo-panel-1-description { grid-area: 3 / 1 / 4 / 2; }
    .demo-panel-1-screenshotholder { grid-area: 4 / 1 / 5 / 2; }
    .demo-panel-2-description { grid-area: 5 / 1 / 6 / 2; }
    .demo-panel-2-screenshotholder { grid-area: 6 / 1 / 7 / 2; }
    .demo-panel-3-description { grid-area: 7 / 1 / 8 / 2; }
    .demo-panel-3-screenshotholder { grid-area: 8 / 1 / 9 / 2; }
    .demo-panel-4-description { grid-area: 9 / 1 / 10 / 2; }
    .demo-panel-4-screenshotholder { grid-area: 10 / 1 / 11 / 2; }
    .cta-area { grid-area: 11 / 1 / 12 / 2; }
    .footer { grid-area: 12 / 1 / 13 / 2; }
}

@media (min-width: 769px) and (max-width: 1300px) {
    .description-panel {
        background-color: white;
        padding: 10%;
        padding-top: 0;
    }
}