DresOperatingSystems.github.io/styles.css at main · DresOperatingSystems/DresOperatingSystems.github.io · 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
body {
    background-color: #000000;
    color: #00FF00;
    font-family: monospace;
    margin: 0;
    padding: 20px;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    color: #00FF00;
    margin-top: 0;
}

p, ul {
    color: #808080;
    margin: 0 0 1em 0;
}

a {
    color: #00FF00;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.tabs {
    margin: 20px 0;
}

.tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: 1px solid #808080;
    flex-wrap: wrap;
}

.tabs li {
    margin-right: 10px;
    margin-bottom: 10px;
}

.tabs label {
    cursor: pointer;
    padding: 10px;
    background: #000000;
    color: #00FF00;
    border: 1px solid #808080;
    border-bottom: none;
    display: block;
}

.tabs input[type="radio"] {
    display: none;
}

.tabs .content > section {
    display: none;
    padding: 20px;
    border: 1px solid #808080;
    background: #000000;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tabs .content > section ul li {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.feature-list {
    display: flex;
    flex-direction: column;
}

.feature {
    margin-bottom: 1.5em;
}

.feature h4 {
    margin-bottom: 0.5em;
}

.feature p {
    margin: 0;
}

.tabs input:checked + label {
    background: #808080;
    color: #000000;
}

.tabs input#tab0:checked ~ .content section:nth-of-type(1),
.tabs input#tab1:checked ~ .content section:nth-of-type(2),
.tabs input#tab2:checked ~ .content section:nth-of-type(3),
.tabs input#tab3:checked ~ .content section:nth-of-type(4),
.tabs input#tab4:checked ~ .content section:nth-of-type(5),
.tabs input#tab5:checked ~ .content section:nth-of-type(6),
.tabs input#tab6:checked ~ .content section:nth-of-type(7) {
    display: block;
}

.contact {
    margin: 20px 0;
}

.contact button {
    background: #000000;
    color: #00FF00;
    border: 1px solid #808080;
    padding: 10px 20px;
    margin-right: 10px;
    cursor: pointer;
}

.contact button:hover {
    background: #808080;
    color: #000000;
}

footer {
    text-align: center;
    margin-top: 40px;
    color: #808080;
}