/* start of full-screen centered mobile layout adapted with ChatGPT
   Prompt: “How do I center a fixed mobile prototype with a dark background and vertical alignment?” */
body {
    margin: 0;
    background: #000;
    /* to make your prototype stand out */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Helvetica Neue', sans-serif;
}

/* end of full-screen centered mobile layout adapted with ChatGPT */

/* start of mobile app frame with shadow adapted with ChatGPT
   Prompt: “How do I create a fixed iPhone-like container with rounded corners and a soft drop shadow?” */
.iphone-frame {
    position: relative;
    width: 402px;
    height: 795px;
    background: #F7B7AB;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* end of mobile app frame with shadow adapted with ChatGPT */

/* start of background blur shape adapted with ChatGPT
   Prompt: “How do I position and blur a decorative pink glow behind interface elements?” */
.blur-bg {
    position: absolute;
    width: 361.59px;
    height: 502.81px;
    left: calc(50% - 361.59px / 2 - 0.2px);
    top: 189.19px;
    background: #F9A19A;
    filter: blur(67.461px);
    z-index: 0;
}

/* end of background blur shape adapted with ChatGPT */

/* start of title styling adapted with ChatGPT
   Prompt: “How do I style a mobile header with light and bold type contrast for branding?” */
.main-title {
    position: absolute;
    width: 300px;
    left: 45px;
    top: 40px;
    font-size: 28px;
    line-height: 150%;
    color: #D34631;
    font-weight: 200;
    z-index: 2;
}

.main-title span {
    font-weight: 600;
}

.main-title strong {
    font-weight: 200;
}

/* end of title styling adapted with ChatGPT */

/* start of card component layout adapted with ChatGPT
   Prompt: “How do I create evenly spaced emotion cards with icons, labels, and rounded corners?” */
.card {
    position: absolute;
    width: 146px;
    height: 146px;
    background: #FEE9EE;
    box-shadow: 0px 3.6px 3.6px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    text-align: center;
    color: #D34631;
    font-weight: 700;
    font-size: 12.6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    text-decoration: none;
}

.card img {
    width: 120px;
    margin-bottom: 15px;
}

.card p {
    margin: 5px 0 0 0;
    font-size: 12.6px;
    text-decoration: none;
}

/* end of card component layout adapted with ChatGPT */

/* start of card positioning adapted with ChatGPT
   Prompt: “How do I place 6 cards in a grid using absolute positioning inside a fixed mobile frame?” */
.anxiety {
    left: 44px;
    top: 168px;
}

.panic {
    left: 212px;
    top: 168px;
}

.overthinking {
    left: 44px;
    top: 336px;
}

.sadness {
    left: 212px;
    top: 336px;
}

.anger {
    left: 44px;
    top: 504px;
}

.unmotivated {
    left: 212px;
    top: 504px;
}

/* end of card positioning adapted with ChatGPT */

/* start of footer help info adapted with ChatGPT
   Prompt: “How do I display mental health crisis text and a clickable helpline under my card grid?” */
.help-title {
    position: absolute;
    left: 42px;
    top: 689px;
    font-size: 21px;
    font-weight: 500;
    color: #D34631;
}

.help-sub {
    position: absolute;
    left: 43px;
    top: 718px;
    font-size: 13.3px;
    font-weight: 300;
    font-style: italic;
    color: white;
}

.helpline {
    position: absolute;
    left: 43px;
    top: 739px;
    font-size: 13.3px;
    font-weight: 500;
    color: #D34631;
    text-decoration: underline;
}

/* end of footer help info adapted with ChatGPT */