1    body { 
2      background-color: #cdc5ff; 
3      color: slateblue; 
4      font-family: "Corbel", "Verdana", "Helvetica", sans-serif; 
5    } 
6     
7    .flex-feature { 
8      display: flex; 
9      flex-flow: row wrap; 
10     justify-content: left; 
11     align-items: stretch; 
12   } 
13    
14   .feature { 
15     font-family: "Trebuchet MS", "Verdana", "Helvetica", sans-serif; 
16     color: orange; 
17     background-color: #2f2475; 
18     padding: 15px; 
19     margin: 10px; 
20     text-align: center; 
21   } 
22    
23   .feature a { 
24     text-decoration: none; 
25     color: orange; 
26    
27   } 
28    
29   .feature a:hover { 
30     color: cornsilk; 
31   } 
32    
33   .feature img { 
34     width:100%; 
35     box-sizing: border-box; 
36     border: 10px outset slateblue; 
37   } 
38    
39   .imgtitle { 
40     margin-bottom: 10px; 
41     max-width: 250px; 
42   } 
43    
44   .half { 
45     width: 250px; 
46   } 
47    
48   .description { 
49     max-width: 250px; 
50     padding: 0; 
51     margin: 0; 
52     font-size:0.9em; 
53   } 
54    
55   .intrinsic-container { 
56     position: relative; 
57     height: 0; 
58     overflow: hidden; 
59   } 
60    
61   /* 16x9 Aspect Ratio */ 
62   .intrinsic-container-16x9 { 
63     padding-bottom: 56.25%; 
64   } 
65    
66   /* 4x3 Aspect Ratio */ 
67   .intrinsic-container-4x3 { 
68     padding-bottom: 75%; 
69   } 
70    
71   .intrinsic-container iframe { 
72     position: absolute; 
73     top:0; 
74     left: 0; 
75     width: 100%; 
76     height: 100%; 
77    
78   } 
79    
80   .requirement { 
81     font-style: italic; 
82     max-width: 250px; 
83     color: #8470ff; 
84   } 
85   .difficulty { 
86     color: #cdc5ff; 
87     max-width: 250px; 
88   }