Modals

1
html {
2
    box-sizing: border-box;
3
    scroll-behavior: smooth;
4
  }
5
  
6
  *,
7
  *:after,
8
  *:before {
9
    box-sizing: inherit;
10
  }
11
  
12
  h1,
13
  h2,
14
  h3,
15
  p {
16
    margin: 0;
17
  }
18
  
19
  body {
20
    min-width: 320px;
21
    margin: 0;
22
    color: #fff;
23
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
24
  }
25
  
26
  a {
27
    color: inherit;
28
  }
29
  
30
  .header {
31
    padding: 10px 0;
32
    background-color: #000;
33
  }
34
  
35
  .navigation {
36
    width: 100%;
37
    display: flex;
38
    justify-content: center;
39
    gap: 50px;
40
  }
41
  
42
  .section {
43
    display: flex;
44
    flex-direction: column;
45
    justify-content: center;
46
    align-items: center;
47
    min-height: 100vh;
48
    background: rgba(66, 114, 47, 1) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1166%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%23SvgjsLinearGradient1167)'%3e%3c/rect%3e%3cpath d='M1440 0L1087.66 0L1440 233.38z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M1087.66 0L1440 233.38L1440 384.81L1032.27 0z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M1032.27 0L1440 384.81L1440 480.87L978.5699999999999 0z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M978.57 0L1440 480.87L1440 528.48L420.45000000000005 0z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M0 560L552.09 560L0 540.22z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M0 540.22L552.09 560L743.04 560L0 337.02000000000004z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M0 337.02L743.04 560L1151.6 560L0 196.96999999999997z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M0 196.97000000000003L1151.6 560L1151.6899999999998 560L0 100.74000000000002z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1166'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='84.72%25' y1='-39.29%25' x2='15.28%25' y2='139.29%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1167'%3e%3cstop stop-color='%230e2a47' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(66%2c 114%2c 47%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e") center/cover no-repeat;
49
  }
50
  
51
  .section__title {
52
    text-align: center;
53
    margin-bottom: 40px;
54
  }
55
  
56
  .section__button {
57
    background-color: transparent;
58
    border: 2px solid white;
59
    color: white;
60
    font-weight: 700;
61
    padding: 10px 20px;
62
    cursor: pointer;
63
    outline: 2px solid transparent;
64
    outline-offset: 3px;
65
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
66
  }
67
  
68
  .section__button:hover {
69
    background-color: #fff;
70
    color: #000;
71
  }
72
  
73
  .section__button:focus-visible {
74
    outline-color: yellow;
75
  }
76
  
77
  .modal {
78
    position: fixed;
79
    inset: 0;
80
    background-color: rgba(0, 0, 0, 0.5);
81
    cursor: pointer;
82
    padding: 30px;
83
    overflow-y: auto;
84
    display: none;
85
  }
86
  
87
  .modal__main {
88
    position: relative;
89
    max-width: 700px;
90
    background-color: #fff;
91
    margin: auto;
92
    color: #000;
93
    border-radius: 16px;
94
    padding: 30px 60px 60px;
95
    cursor: default;
96
  }
97
  
98
  .modal__title {
99
    font-size: 60px;
100
    margin-bottom: 30px;
101
  }
102
  
103
  .modal__container {
104
    font-size: 30px;
105
    margin-bottom: 30px;
106
  }
107
  
108
  .modal__btn {
109
    background-color: red;
110
    color: #fff;
111
    font-size: 26px;
112
    text-align: center;
113
    display: block;
114
    margin: 0 auto; 
115
    border-radius: 20px;
116
    border: none;
117
    padding: 15px 30px;
118
  }
119
  
120
  .modal__close {
121
    background-color: transparent;
122
    border: none;
123
    cursor: pointer;
124
    font-size: 22px;
125
    position: absolute;
126
    top: 10px;
127
    right: 10px;
128
    outline: 1px solid transparent;
129
    outline-offset: 3px;
130
    transition: outline-color .15s ease-in-out;
131
    border-radius: 3px;
132
    padding: 0;
133
    text-align: center;
134
    display: block;
135
    width: 30px;
136
    height: 30px;
137
  }
138
  
139
  .modal__close:focus-visible {
140
    outline-color: green;
141
  }