Newer
Older
margin: 0;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members {
display: flex;
flex-direction: column;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member {
display: grid;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-img {
grid-row: 1/span 3;
overflow: hidden;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-img img {
width: 100%;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-title {
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-subtitle {
margin: 0 10px;
font-size: 14px;
color: #96a5ae;
font-style: italic;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-body {
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
text-align: justify;
}
main #page-container #games-page .game-articles article.placeholder {
height: 400px;
}
main #page-container #games-page .game-articles article.placeholder * {
background-color: #d4d9dd;
}
@media screen and (max-width: 900px) {
main #page-container #games-page .game-articles article {
grid-template-columns: 1fr;
}
main #page-container #games-page .game-articles article.game-article {
grid-template-rows: repeat(5, auto);
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1;
padding: 20px;
font-size: 25px;
}
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 1;
grid-row: 2;
}
main #page-container #games-page .game-articles article.game-article .game-team {
grid-column: 1;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member {
grid-template-columns: 70px 1fr;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-img {
grid-row: 1/span 2;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-body {
grid-column: 1/span 2;
}
}
main #page-container #software-page .software-articles {
margin: 0 auto 50px;
}
main #page-container #software-page .software-articles article.software-article {
display: grid;
gap: 0 30px;
background-color: #3c4144;
}
main #page-container #software-page .software-articles article.software-article > * {
color: #d4d9dd;
}
main #page-container #software-page .software-articles article.software-article .software-title {
grid-column: 1/span 2;
background-color: #d4d9dd;
color: #6b7880;
margin: 0;
padding: 20px;
}
main #page-container #software-page .software-articles article.software-article .software-date {
text-align: right;
color: #6b7880;
font-style: italic;
font-size: 12px;
}
main #page-container #software-page .software-articles article.software-article .software-subtitle {
grid-column: 1;
}
main #page-container #software-page .software-articles article.software-article .software-description {
grid-column: 1;
}
main #page-container #software-page .software-articles article.software-article .image-carousel {
grid-column: 2;
}
main #page-container #software-page .software-articles article.software-article .software-technical {
grid-column: 1/span 2;
}
main #page-container #software-page .software-articles article.software-article .software-technical h2 {
background-color: #96a5ae;
color: #3c4144;
margin: 0;
padding: 10px 20px;
font-size: 20px;
font-style: italic;
}
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details {
margin: 10px;
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail {
display: grid;
grid-template-columns: 1fr auto;
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail:not(:first-child) {
border-top: 1px solid #6b7880;
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail label {
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail ul {
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail *:not(a) {
color: #d4d9dd;
}
@media screen and (max-width: 900px) {
main #page-container #software-page .software-articles article.software-article {
grid-template-columns: 1fr;
}
main #page-container #software-page .software-articles article.software-article .software-title {
grid-column: 1;
}
main #page-container #software-page .software-articles article.software-article .image-carousel {
grid-column: 1;
grid-row: 2;
}
main #page-container #software-page .software-articles article.software-article .software-technical {
grid-column: 1;
}
}
main #page-container #software-page .software-articles article.placeholder {
display: flex;
flex-direction: column;
gap: 10px;
margin: 30px;
}
main #page-container #software-page .software-articles article.placeholder * {
}
main #page-container #software-page .software-articles article.placeholder .title {
height: 60px;
}
main #page-container #software-page .software-articles article.placeholder .body {
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
}
main #page-container #software-page .software-articles article.placeholder .details {
height: 200px;
}
main #page-container #software-page #service-section h3 {
margin: 0 0 20px;
}
main #page-container #software-page #service-section .skills {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin: 20px 0;
}
main #page-container #software-page #service-section .skills ul {
display: grid;
gap: 1px;
max-width: 100%;
}
main #page-container #software-page #service-section .skills ul li {
box-shadow: 0 0 2px #96a5ae;
}
main #page-container #software-page #service-section .skills ul.skill-themes {
width: 600px;
grid-template-columns: repeat(3, 1fr);
background-color: #3c4144;
}
@media screen and (max-width: 560px) {
main #page-container #software-page #service-section .skills ul.skill-themes {
grid-template-columns: 1fr 1fr;
width: 100%;
}
}
@media screen and (max-width: 480px) {
main #page-container #software-page #service-section .skills ul.skill-themes {
grid-template-columns: 1fr;
}
}
main #page-container #software-page #service-section .skills ul.skill-themes li {
font-weight: bold;
color: #d4d9dd;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 10px;
text-align: center;
}
main #page-container #software-page #service-section .skills ul.skill-stack {
width: 400px;
grid-template-columns: repeat(4, 1fr);
}
main #page-container #software-page #service-section .skills ul.skill-stack li {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
position: relative;
padding: 10px;
}
main #page-container #software-page #service-section .skills ul.skill-stack li strong {
visibility: hidden;
max-height: 0;
height: 70px;
padding: 0 20px;
transition: max-height 0.3s;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
main #page-container #software-page #service-section .skills ul.skill-stack li img {
width: 100%;
}
@media screen and (min-width: 780px) {
main #page-container #software-page #service-section .skills ul.skill-stack li:hover strong {
visibility: visible;
max-height: 80px;
background-color: #fffc;
font-size: 18px;
}
}
@media screen and (max-width: 780px) {
main #page-container #software-page #service-section .skills ul.skill-stack li strong {
visibility: visible;
position: relative;
max-height: unset;
height: unset;
padding: 0;
}
}
@media screen and (max-width: 480px) {
main #page-container #software-page #service-section .skills ul.skill-stack {
grid-template-columns: repeat(3, 1fr);
}
}
main #page-container #software-page #service-section .teaser {
background-image: url("/assets/images/wallpaper_binary.png");
padding: 40px 30px;
text-align: center;
font-size: 18px;
}
main #page-container #software-page #service-section .teaser strong {
color: #d4d9dd;
}
main #page-container #software-page #service-section .teaser blue {
color: #72e3f0;
}
main #page-container #software-page #service-section .call-us {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
gap: 10px 0;
margin: 40px 0;
}
main #page-container #software-page #service-section .call-us * {
font-weight: bold;
}
main #page-container #software-page #service-section .call-us h3 {
grid-column: 1/span 2;
text-align: center;
}
main #page-container #software-page #service-section .call-us a {
background-color: #3c4144;
font-size: 20px;
text-align: center;
padding: 20px;
}
@media screen and (max-width: 780px) {
main #page-container #software-page #service-section .call-us {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
gap: 0;
}
main #page-container #software-page #service-section .call-us h3 {
margin: 0 0 10px;
}
main #page-container #software-page #service-section .call-us a {
width: 100%;
}
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
gap: 20px;
font-size: 12px;
}
main footer span {
color: #96a5ae;
}
main footer .logo {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
main footer .logo img {
width: 35px;
}
main footer .logo img.text-logo {
width: 100px;