valentines-day/styles.css at main · aotlacan/valentines-day · 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
:root{
        --heart-color: #ff5873;
        --hover-color: #C1275C;
        --background-color: #ebc8c0;
        --white: #fff;
    }

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Arial', sans-serif;
    flex-direction: column;
    background-image: url('images/cherry.jpg');
    background-size: 50%;
    background-position: center;
    background-color: rgba(255,255,255,0.6);
    background-blend-mode: lighten;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="2" stroke-linejoin="round" d="M10 11V8.99c0-.88.59-1.64 1.44-1.86h.05A1.99 1.99 0 0 1 14 9.05V12v-2c0-.88.6-1.65 1.46-1.87h.05A1.98 1.98 0 0 1 18 10.06V13v-1.94a2 2 0 0 1 1.51-1.94h0A2 2 0 0 1 22 11.06V14c0 .6-.08 1.27-.21 1.97a7.96 7.96 0 0 1-7.55 6.48 54.98 54.98 0 0 1-4.48 0 7.96 7.96 0 0 1-7.55-6.48C2.08 15.27 2 14.59 2 14v-1.49c0-1.11.9-2.01 2.01-2.01h0a2 2 0 0 1 2.01 2.03l-.01.97v-10c0-1.1.9-2 2-2h0a2 2 0 0 1 2 2V11Z"></path></svg>'), auto;
  }

  .container {
    text-align: center;
  }

  h1 {
    font-size: 2.5em;
    color: #d32f2f;
  }

  .buttons {
    margin-top: 20px;
  }

  .yes-button {
    font-size: 1.5em;
    padding: 10px 20px;
    margin-right: 10px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .no-button {
    font-size: 1.5em;
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .gif_container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 20px;
  }

.header_text {
    color: black; /* Adjust as needed */
    font-size: 3rem; /* Adjust the size as needed */
    font-weight: bold;
    text-align: center;

    /* White text outline effect */
    text-shadow:
        -2px -2px 0 white,
         2px -2px 0 white,
        -2px  2px 0 white,
         2px  2px 0 white;
}

h1 {
    color: red; /* Adjust the fill color as needed */
    font-size: 3rem; /* Adjust size as needed */
    font-weight: bold;
    text-align: center;

    /* White outline effect */
    text-shadow:
        -2px -2px 0 white,
         2px -2px 0 white,
        -2px  2px 0 white,
         2px  2px 0 white;
}