will/style.css at main · YIN-Renlong/will · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/* Basic reset and full-screen setup */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f0f0f0;
    overflow: hidden;
}

/* NEW: Styles for the single question line */
#question-line {
    /* Positioning */
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;

    /* Flexbox to align items in a row */
    display: flex;
    justify-content: center;
    align-items: baseline; /* Aligns text and input nicely */
    gap: 0.5ch; /* A small gap, half a character's width */
}

.question-text {
    font-size: 3rem;
    color: #555;
}

#user-question {
    /* Make it look like part of the sentence */
    background: transparent;
    border: none;
    border-bottom: 2px solid #ccc;
    outline: none;

    /* Font styling to match */
    font-family: inherit;
    font-size: 3rem;
    color: #000;

    /* Sizing */
    width: 50%;
    min-width: 200px;
    text-align: center;
    padding-bottom: 5px;
    transition: border-color 0.3s;
}

#user-question:focus {
    border-bottom-color: black;
}


/* --- The rest of the styles remain largely the same --- */

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

button {
    font-size: 3rem;
    padding: 20px 40px;
    border: 3px solid black;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

button:hover {
    background-color: black;
    color: white;
}

.thinking-text, #result-text {
    font-size: 5rem;
    font-weight: bold;
    color: black;
}

.hidden {
    display: none;
}

#result-container {
    cursor: pointer;
}


/* Add this new rule for the "Help Me Decide" button */
#decide-button {
    font-size: 1rem; /* Smaller font size */
    padding: 10px 20px;
    border-width: 2px;
    color: #666;
    border-color: #ccc;
    background-color: #f0f0f0; /* Match the background */
    flex-grow: 0; /* Prevents it from stretching */
}

#decide-button:hover {
    background-color: black;
    color: white;
    border-color: black;
}

/* Add this new class for the highlight effect */
.highlight {
    box-shadow: 0 0 25px 5px rgba(255, 215, 0, 0.8); /* A golden glow */
    transform: scale(1.05);
}

/* IMPORTANT: Add a transition to the original button style for smooth animation */
button {
    font-size: 3rem;
    padding: 20px 40px;
    border: 3px solid black;
    background-color: white;
    cursor: pointer;
    /* UPDATED: Add transition here */
    transition: all 0.2s ease-in-out;
}