votedamm/result.css at main · damm-party/votedamm · 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
131
body {
    margin: 0;
    padding: 0;
    background-image: url("assets/bg108020purple.png");
    background-repeat: no-repeat;
    background-size: fill;
    background-position: center;
}

.rectangle {
    //display: flex; /*WHEN I REMOVE THIS LINE IT WORKS*/
    flex-direction: column;
    background-color: rgba(224, 225, 255, 0.3);
    align-items: center;
    justify-content: center;
    width: 35vw;
    //max-width: 50vw;
    height: 70vh;
    margin: 10vh auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    /*
    @media (max-width: 767px) {
        width: 85vw;
        max-width: 90vw;
    }
    @media (max-width: 320px) {
    }

    @media (min-width: 321px) and (max-width: 767px) {

    }
    */
}
/* For phones */
@media (max-width: 600px) {
    .rectangle {
        height: 80vh;
        width: 80vw;
    }
}

/* For computers */
@media (min-width: 601px) {
    .rectangle {
        width: 80vw;
    }
}
.p{
    font-family: Arial;
}

.avatar-wrapper {
    margin-top: 10px;
    height: 55vh;
}

.avatar-display.placed {
    height: 55vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.avatar-display.placed img {
    //max-width: 100%;
    margin-top:20px;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    max-width: calc(100% - 30px); /* Adjust the value to create a margin of 10px on each side */
    margin: 0 10px;
}

.text-section {
    margin-top: 20px;
}

.button-section {
    margin-top: 20px;
}

.pink-button {
    /*actually the green button*/
    display: inline-block;
    padding: 12px 24px; /* Increase the padding to make the button longer */
    border-radius: 25px; /* Increase or decrease the border-radius as desired */
    background-color: #DAF571;
    color: black;
    border: 4px solid white;
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.pink-button:hover {
    background-color: #FF6BAF;
    color: white;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #ffffff;
}

.footer p {
    color: #000000;
}

.footer .oval-button{
    /* Existing styles here */
    border-radius: 5px; /* Adjust the value to make it more rectangular */
    padding: 8px 16px; /* Adjust the padding as needed */
    height: auto; /* Remove the fixed height */
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    background-color: #DAF571;
    color: black;
    border-color: white;
    //box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    margin-right: 10px; /* Adjust the value to add more space to the right */
    border-radius: 50px;
}