@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); .genius-main-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); height: 100%; } .genius-main-container .genius-grid-column { max-width: 100%; align-self: center; display: grid; height: 100%; } .genius-main-container .genius-grid-column.right { align-self: center; grid-template-rows: 1fr; } .genius-main-container .genius-grid-column.right .genius-login-card { width: 480px; align-self: center; margin: 0; } .genius-main-container .genius-grid-column.left { align-self: center; grid-template-rows: 1fr; } .genius-main-container .genius-grid-column.left .genius-login-description { margin-left: 50px; } .genius-main-container .genius-grid-column.left .genius-api-description { align-self: center; margin: 0; text-align: left; margin-left: 60px; } .genius-main-container .genius-grid-column.left .genius-api-description ul li { margin-left: -15px; } .genius-tab-link { opacity: 1; } .genius-tab-logo { pointer-events: none; } .genius-tab-logo img { height: 40px; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; } html #root, html .genius-outside-container, html .main, body #root, body .genius-outside-container, body .main { height: 100%; width: 100%; } html #root .genius-inside-container, html .genius-outside-container .genius-inside-container, html .main .genius-inside-container, body #root .genius-inside-container, body .genius-outside-container .genius-inside-container, body .main .genius-inside-container { padding: 40px; } html, body { font-family: "lato", sans-serif; } .i-example__heading { display: none !important; } .genius_colors_container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; height: auto; } .genius_colors_container .colors { height: 60px; width: 200px; content: ""; display: inline-block; position: relative; } .genius_colors_container .colors:after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; text-align: center; line-height: 22px; } .genius_colors_container .colors.genius_main { background: #fdc602; } .genius_colors_container .colors.genius_main:after { content: "main - #fdc602"; color: black; } .genius_colors_container .colors.genius_lightGray { background: #f5f5f5; } .genius_colors_container .colors.genius_lightGray:after { color: black; content: "lightGray - #f5f5f5 "; } .genius_colors_container .colors.genius_middleGray { background: #b5b5b5; } .genius_colors_container .colors.genius_middleGray:after { color: black; content: "middleGray - #b5b5b5"; } .genius_colors_container .colors.genius_darkGray { background: #4a4f55; } .genius_colors_container .colors.genius_darkGray:after { color: white; content: "darkGray - #4a4f55"; } .genius_colors_container .colors.genius_blueGray { background: #455a64; } .genius_colors_container .colors.genius_blueGray:after { color: white; content: "blueGray - #455a64"; } .genius_colors_container .colors.genius_temp0-14 { background: #185fb6; } .genius_colors_container .colors.genius_temp0-14:after { color: white; content: "temp0-14 - #185fb6"; } .genius_colors_container .colors.genius_temp15-19 { background: #00bcd4; } .genius_colors_container .colors.genius_temp15-19:after { color: white; content: "temp15-19 - #00bcd4"; } .genius_colors_container .colors.genius_temp20-23 { background: #ffc107; } .genius_colors_container .colors.genius_temp20-23:after { color: black; content: "temp20-23 - #ffc107"; } .genius_colors_container .colors.genius_temp24-29 { background: #ef6b52; } .genius_colors_container .colors.genius_temp24-29:after { color: white; content: "temp24-29 - #ef6b52"; } .genius_colors_container .colors.genius_temp66-100 { background: #902a28; } .genius_colors_container .colors.genius_temp66-100:after { color: white; content: "temp66-100 - #902a28"; } .genius_colors_container .colors.genius_flatGreen { background: #2ecc71; } .genius_colors_container .colors.genius_flatGreen:after { color: black; content: "flatGreen - #2ecc71"; } .genius_colors_container .colors.genius_flatRed { background: #e74c3c; } .genius_colors_container .colors.genius_flatRed:after { color: white; content: "flatRed - #e74c3c"; } .genius_colors_container .colors.genius_flatOrange { background: #e67e22; } .genius_colors_container .colors.genius_flatOrange:after { color: white; content: "flatOrange - #e67e22"; } .genius_colors_container .colors.genius_flatBlue { background: #88cfff; } .genius_colors_container .colors.genius_flatBlue:after { color: black; content: "flatBlue - #88cfff"; } .genius_colors_container .colors.genius_flatYellow { background: #f1c40f; } .genius_colors_container .colors.genius_flatYellow:after { color: black; content: "flatYellow - #f1c40f"; } /* --- name: Typography category: Various --- ```types.html hidden
Lorem Ipsum - p
Lorem Ipsum - pre