css/style.css

   1 body {
   2     margin: 0px;
   3     font-family: 'Press Start 2P', cursive;
   4     color: white;
   5     text-shadow:
   6         1px 1px 0 #000;
   7     background-color: #f98012;
   8     background-image: url("../img/tile.png");
   9     background-repeat: repeat;
  10     background-size: 10%;
  11     image-rendering: crisp-edges;
  12     background-blend-mode: multiply;
  13     font-size: 22px;
  14 }
  15
  16 .angereyWrap {
  17     position: absolute;
  18     color: #cc0000;
  19 }
  20
  21 .angerey {
  22     letter-spacing: -20px;
  23     transform: rotate(90deg) scale(1, 1.5);
  24 }
  25
  26 .thonkingWrap {
  27     position: absolute;
  28 }
  29
  30 .hljs {
  31     font-family: 'Press Start 2P', cursive;
  32     text-shadow: 2px 2px 0 #000;
  33     font-size: 30px;
  34     overflow: hidden;
  35 }
  36
  37 h1, h2 {
  38     text-shadow: 2px 2px 0 #000;
  39 }
  40
  41 .slide-title {
  42     font-size: 40px;
  43     margin: 20px;
  44     text-shadow: 10px 10px 0 #00000069;
  45     text-align: center;
  46 }
  47
  48 .slide {
  49     margin: 40px;
  50     box-shadow: 10px 10px 0 #00000069;
  51     padding: 20px;
  52     height: 80%;
  53     background: #6187a8e3;
  54 }
  55
  56 .flexotron {
  57     display: flex;
  58     justify-content: center;
  59     align-items: center;
  60     flex-wrap: wrap;
  61 }
  62
  63 #cloudguy, #cloudguy2 {
  64     height: 100%;
  65     display: flex;
  66     justify-content: center;
  67     align-items: center;
  68     flex-wrap: wrap;
  69 }
  70
  71 .cloudguypower {
  72     height: 24%;
  73 }
  74
  75 #cloudguys {
  76     height: 30%;
  77     width: 100%;
  78     display: flex;
  79     justify-content: space-around;
  80     text-align:center
  81
  82 }
  83
  84 #cloudguys img {
  85     height: 100%;
  86 }
  87
  88 #cloudguys div {
  89     width: 20%;
  90     max-width: 20%;
  91 }
  92
  93 #cloudguys span {
  94     display: block;
  95     opacity: 0;
  96 }
  97
  98 #cgquotes, #cloudguy2 > div > div {
  99     font-size: 30px;
 100     text-shadow: 2px 2px 0 #000;
 101 }
 102
 103 .idk div {
 104     display: flex;
 105     width: 40%;
 106 }
 107
 108 li {
 109     list-style: square;
 110 }
 111
 112 img {
 113     image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
 114     image-rendering: -moz-crisp-edges;          /* Firefox                        */
 115     image-rendering: -o-crisp-edges;            /* Opera                          */
 116     image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
 117     image-rendering: pixelated; /* Chrome */
 118     image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
 119     -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
 120 }
 121
 122 .fig {
 123     text-align: center;
 124 }
 125
 126 #rant .shake-constant, .crazy, .span {
 127     display: inline-block;
 128 }
 129
 130 #rant .shake-opacity {
 131     color: #f98012;
 132 }
 133
 134 #rant {
 135     padding: 20px;
 136     height: 80%;
 137     font-size: 14px;
 138 }
 139
 140 .textbox {
 141     text-align: center;
 142     box-shadow: 10px 10px 0 #00000069;
 143     border: 2px solid black;
 144     background-color: #3f6382;
 145     padding: 5px;
 146 }
 147
 148 .hljs {
 149     box-shadow: 10px 10px 0 #00000069;
 150     border: 2px solid black;
 151 }
 152
 153 div[id^="slide-"] {
 154     display: none;
 155 }
 156
 157 span[class^="code-friends"].on, span[class^="code-friends"].on > span, span[class^="code-friends"].on > span > span {
 158     color: #f98012 !important;
 159 }
 160
 161 span[class^="promise"].on, span[class^="promise"].on > span, span[class^="promise"].on > span > span, span[class^="promise"].on > span > span > span {
 162     color: #f98012 !important;
 163 }
 164
 165 .highlight {
 166     color: #f98012;
 167 }
 168
 169 li {
 170     margin-top: 10px;
 171 }
 172
 173 .notes {
 174     display: none;
 175 }
 176
 177 @keyframes swing {
 178     0%, 100% { transform: rotate(-20deg); }
 179     20% {transform:scale(.95);}
 180     50% { transform: rotate(20deg); }
 181     80% {transform:scale(.95);}
 182 }
 183
 184 #commentary {
 185     position: fixed;
 186     bottom: 50;
 187     right: 50;
 188     text-align: center;
 189 }
 190
 191 #commentary img {
 192     height: 100px;
 193     animation: swing 2s infinite ease-in-out;
 194 }
 195
 196 #commentary img:hover {
 197     height: 120px;
 198     animation: swing 2s infinite ease-in-out;
 199 }
 200
 201 #commentary a {
 202     color: white;
 203     text-decoration: none;
 204 }