kyber

1
.infoblock {
2
  display: flex;
3
  width: 480px;
4
  min-height: 320px;
5
  height: fit-content;
6
  max-height: 640px;
7
  margin: 10px;
8
  border-radius: 10px;
9
  box-shadow: 2px 2px 5px #00000033;  
10
  text-shadow: var(--bg-color) 0px 0px 5px, var(--bg-color) 0px 0px 3px, var(--bg-color) 0px 0px 1px;
11
  
12
  transition: all .25s ease-in-out;
13

14
  span {
15
    color: var(--highlight)
16
  }
17

18
  &:hover {
19
    transform: translate(-2px, -2px);
20
    box-shadow: 4px 4px 5px rgb(0 0 0 / 20%);
21
    transition: all 0.25s ease-in-out;
22
    a {
23
      span {
24
        color: var(--highlight-hover);
25
        text-shadow: 0 0 10px var(--highlight-alpha);
26
      }
27

28
      &:active {
29
        span {
30
          color: var(--highlight-active)
31
        }
32
      }
33
    }
34
  }
35
  
36
  h4 {
37
    color: var(--color-tarnished);
38
  }
39

40
  a {
41
    width: 100%;
42
    text-decoration: none;
43
    color: var(--color);
44
    border-radius: 10px;
45
    transition: all .25s ease-in-out;
46

47
    &:hover {
48
      cursor: pointer;
49
      color: var(--color);
50
      backdrop-filter: var(--blur10);
51
      transition: all .25s ease-in-out;
52
    }
53
  }
54

55
  div {
56
    a {
57
      color: var(--highlight);
58

59
      &:hover {
60
        cursor: pointer;
61
        color: var(--highlight-hover);
62
      }
63

64
      &:active {
65
        color: var(--highlight-active);
66
      }
67
    }
68
  }
69

70
  p {
71
    font-size: 32px;
72
  }
73
}
74

75
@media only screen and (max-width: 1080px) {
76
  .infoblock {
77
    width: 360px;
78
    min-height: 280px;
79
    height: fit-content;
80
    max-height: 560px;
81

82
    p {
83
      font-size: 28px;
84
    }
85
  }
86
}
87

88
@media only screen and (max-width: 600px) {
89
  .infoblock {
90
    width: 100%;
91
    min-height: 200px;
92
    height: fit-content;
93
    max-height: 560px;
94

95
    h4 {
96
      margin-block-start: 0;
97
      margin-block-end: 5px;
98
    }
99

100
    p {
101
      margin-block: 0;
102
      font-size: 24px;
103
    }
104
  }
105
}
106

107
.content {
108
  padding: 10px; // margin???
109
  text-transform: uppercase;
110
}