i think i made changes
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 5b269fa..b085718 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -1,121 +1,121 @@
.backgroundImage {
- position: absolute;
- bottom: -5px;
- left: 0;
- width: calc(100% + 5px);
- height: auto;
- scale: stretch;
- border-radius: 0;
- filter: var(--theme-ui-colors-cardFilter);
- transition: filter 0.3s ease-in-out;
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: calc(100% + 5px);
+ height: auto;
+ scale: stretch;
+ border-radius: 0;
+ filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
}
.backgroundGradient {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- scale: stretch;
- border-radius: 0;
- filter: var(--theme-ui-colors-cardFilter);
- transition: filter 0.3s ease-in-out;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ scale: stretch;
+ border-radius: 0;
+ filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
}
.card {
- border-radius: 17px;
- width: 100%;
- height: 204px;
- padding-inline: 5px;
- padding-bottom: 5px;
- position: relative;
- overflow: hidden;
- margin: 100px;
- transition: filter 0.3s ease-in-out;
- transition: transform 0.15s ease-in-out;
+ border-radius: 17px;
+ width: 100%;
+ height: 204px;
+ padding-inline: 5px;
+ padding-bottom: 5px;
+ position: relative;
+ overflow: hidden;
+ margin: 100px;
+ transition: filter 0.3s ease-in-out;
+ transition: transform 0.15s ease-in-out;
}
.card:hover {
- transform: translateY(-5px);
- cursor: pointer;
+ transform: translateY(-5px);
+ cursor: pointer;
}
.panel {
- position: absolute;
- overflow-x: hidden;
- overflow-y: hidden;
- width: 88%;
- height: 76%;
- top: 12%;
- left: 6%;
- padding-top: 10px;
- padding-bottom: 10px;
- border-radius: 17px;
- background-color: var(--theme-ui-colors-cardBackground);
- transition: background-color 0.3s ease-in-out;
- backdrop-filter: blur(7px);
+ position: absolute;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ width: 88%;
+ height: 76%;
+ top: 12%;
+ left: 6%;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ border-radius: 17px;
+ background-color: var(--theme-ui-colors-cardBackground);
+ transition: background-color 0.3s ease-in-out;
+ backdrop-filter: blur(7px);
}
.titleContainer {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 32px;
- padding-inline: 10px;
- margin-top: 10px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 32px;
+ padding-inline: 10px;
+ margin-top: 10px;
}
.title {
- font-weight: 100;
- font-size: 25px;
- margin-left: 1vw;
- line-height: 24px;
- max-lines: 2;
- color: var(--theme-ui-colors-text);
- transition: color 0.3s ease-in-out;
+ font-weight: 100;
+ font-size: 25px;
+ margin-left: 1vw;
+ line-height: 24px;
+ max-lines: 2;
+ color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
}
.image {
- height: 40px;
- width: 40px;
+ height: 40px;
+ width: 40px;
}
.subtext {
- width: 100%;
- padding-inline: 10px;
- text-align: center;
- color: var(--theme-ui-colors-text);
- transition: color 0.3s ease-in-out;
+ width: 100%;
+ padding-inline: 10px;
+ text-align: center;
+ color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
}
.buttonLayout {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- align-items: center;
- flex-wrap: wrap;
- padding: 0px;
- position: absolute;
- bottom: 5px;
- right: 5px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ flex-wrap: wrap;
+ padding: 0px;
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
}
.button {
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- justify-content: right;
- position: static;
- flex: none;
- order: 1;
- flex-grow: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: right;
+ position: static;
+ flex: none;
+ order: 1;
+ flex-grow: 0;
- margin: 5px;
- padding: 5px 10px;
- border-radius: 8px;
+ margin: 5px;
+ padding: 5px 10px;
+ border-radius: 8px;
}
@media (max-width: 500px) {
@@ -123,8 +123,8 @@
.card.clicked {
- transform: scale(1) !important;
- z-index: 9999;
+ transform: scale(1) !important;
+ z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
@@ -133,11 +133,11 @@
}
.backgroundGradient.clicked {
- background-image: red;
+ background-image: red;
}
/* .image.clicked {
- width: 1000px !important;
+ width: 1000px !important;
} */
.container {