SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the "easy" version of the Design2Code testset here Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information.
6379
1<!DOCTYPE html>2<html lang="pt-br" prefix="og: https://ogp.me/ns#" xmlns:fb="">3 <head>4 <meta charset="utf-8">5 <meta content="width=device-width, initial-scale=1" name="viewport">6 <title>7 Range Engine8 </title>9 <meta content="Range Engine is an Light and Powerful Game Engine and 3D Software. Where you can make your own Models, Materials, Animations, and Publish Your Game" name="description">10 <meta content="#f00000" name="theme-color">11 <meta content="website" property="og:type">12 <meta content="Range Engine" property="og:title">13 <meta content="Range Engine is an Light and Powerful Game Engine and 3D Software. Where you can make your own Models, Materials, Animations, and Publish Your Game" property="og:description">14 <meta content="Range Engine" property="og:site_name">15 <meta content="" property="og:image">16 <meta content="summary_large_image" name="twitter:card">17 </head>18 <body>19 <div id="loading" style="display: none;">20 <div>21 </div>22 </div>23 <div id="header">24 <header class="header">25 <h1 class="title" style="margin-top:4px;">26 <a>27 <img alt="RanGELogo" class="logo" src="rick.jpg">28 </a>29 </h1>30 <a class="togglebutton">31 <span class="bar">32 </span>33 <span class="bar">34 </span>35 <span class="bar">36 </span>37 </a>38 <nav class="headerlinks">39 <ul class="heaul">40 <li class="headerlis">41 <i class="material-symbols-outlined">42 Home43 </i>44 <a class="healinks">45 Home46 </a>47 </li>48 <li class="headerlis">49 <i class="material-symbols-outlined">50 Download51 </i>52 <a class="healinks">53 Download54 </a>55 </li>56 <li class="dropdownh">57 <span class="dpdhbt">58 News59 <span class="newcirclespan">60 </span>61 <i class="material-symbols-outlined">62 expand_more63 </i>64 </span>65 <div class="dpdhitems">66 <a>67 <i class="material-symbols-outlined">68 Celebration69 </i>70 What's New71 </a>72 <a>73 <i class="material-symbols-outlined">74 library_books75 </i>76 Changelog77 </a>78 </div>79 </li>80 <li class="headerlis">81 <i class="material-symbols-outlined">82 Store83 </i>84 <a class="healinks">85 Store86 </a>87 </li>88 </ul>89 </nav>90 </header>91 </div>92 <section class="indexsec" style="padding-top:15%;padding-bottom:15%;">93 <div class="splashhome">94 <div>95 <h2 class="splashtitsec">96 Experience Range Engine97 <p class="animbar">98 │99 </p>100 </h2>101 <p class="titdesc">102 Powerful | Light | Easy103 </p>104 </div>105 <div class="downnabout" style="font-family:Roboto Condensed;">106 <div class="splash-links">107 <div class="spl-link-button">108 <div class="spl-link-ico">109 <i class="material-symbols-outlined">110 Download111 </i>112 </div>113 <a>114 Download115 </a>116 </div>117 <div class="spl-link-button" id="link-button-blue">118 <div class="spl-link-ico" style="background-color:rgb(52, 70, 170);">119 <i class="material-symbols-outlined">120 Celebration121 </i>122 </div>123 <a style="background-color:rgba(36, 95, 188, 0.21);">124 What's New125 </a>126 </div>127 </div>128 <div class="splash-links">129 <div class="spl-link-button" id="link-button-grey">130 <div class="spl-link-ico" style="background-color:rgb(100, 100, 100);">131 <i class="material-symbols-outlined">132 live_help133 </i>134 </div>135 <a style="background-color:rgba(145, 145, 145, 0.21);">136 FAQ137 </a>138 </div>139 </div>140 </div>141 </div>142 </section>143 <div class="ltsnw-article">144 <h2 class="ltsnw-title">145 <i style="padding:10px;background-color:#373737;">146 </i>147 Latest News:148 </h2>149 <div class="ltsnw-items">150 <div class="ltsnw-highlight">151 <a class="ltsnw-highlight-item">152 <div>153 <img alt src="rick.jpg">154 </div>155 <div class="ltsnw-highlight-desc">156 <h3>157 Range Engine 1.5a Is Out158 </h3>159 <p>160 Range Engine 1.5 was a sucessful release in it's early access. So we decided to161 <br>162 make more improvements and finally bring Range Engine 1.5a for everyone!163 </p>164 <p class="ltsnw-newsdate">165 News Date: 24/03/2024166 </p>167 </div>168 </a>169 </div>170 <div class="ltsnw-news">171 <div>172 <a class="ltsnw-hl-item">173 <img alt src="rick.jpg">174 <div class="ltsnw-hl-item-desc">175 <h3>176 The Future Of Range Engine 2.0177 </h3>178 <p>179 The development of Range Engine 2.0 is in full swing and is heading towards180 <br>181 to revolutionize the way we use the engine!182 </p>183 <p class="ltsnw-newsdate">184 News Date: 19/12/2023185 </p>186 </div>187 </a>188 <a class="ltsnw-hl-item">189 <img alt src="rick.jpg">190 <div class="ltsnw-hl-item-desc">191 <h3>192 Range Engine 1.5 Is Out!193 </h3>194 <p>195 The last release before the big update is already available on Patreon.196 </p>197 <p class="ltsnw-newsdate">198 News Date: 26/11/2023199 </p>200 </div>201 </a>202 <a class="ltsnw-hl-item">203 <img alt src="rick.jpg">204 <div class="ltsnw-hl-item-desc">205 <h3>206 Getting Ready To Range 2.0207 </h3>208 <p>209 Learn more about the goals to Range Engine 2.0 and what210 <br>211 things it will bring.212 </p>213 <p class="ltsnw-newsdate">214 News Date: 26/11/2023215 </p>216 </div>217 </a>218 <div class="spl-link-button" id="link-button-grey">219 <div class="spl-link-ico" style="background-color:rgb(100, 100, 100);">220 <i class="material-symbols-outlined">221 News222 </i>223 </div>224 <a style="background-color:rgba(145, 145, 145, 0.21);">225 Previous News226 </a>227 </div>228 </div>229 </div>230 </div>231 </div>232 <div class="indexsec" style="padding-top:90px;padding-bottom:90px;background-color:#0f0f0fe0;backdrop-filter:blur(10px);">233 <div class="splashhome">234 <div class="sobreoprojeto">235 <p class="splashtitsec" style="font-size:25px;letter-spacing:-1px;display:block;">236 Experience an237 </p>238 <h2 class="splashtitsec">239 Engine of Possibilities240 </h2>241 <p class="splashtitsec" style="font-size:19px;letter-spacing:-1px;display:block;">242 Take a look in what Range Engine is capable to do243 </p>244 </div>245 </div>246 </div>247 <article style="padding:0 0 10px 0;background-color:#181818/*rgba(39,39,39)*/;">248 <div class="home-article">249 <!--Artigo Principal do Article-->250 <div class="art-articles">251 <!--Sub Artigos-->252 <div class="articles-cont">253 <!--Conteúdo dos Artigos-->254 <div class="h-article-description">255 <h3 style="text-align:right;">256 Powerful Modelling Tools257 </h3>258 <p style="text-align:right;">259 Based on Blender, With Range Engine you can260 <b>261 Model and Sculpt you own Assets,262 <br>263 Make Materials and Textures,264 create high detailed Animations265 <br>266 And build breathtaking levels with advanced tools and modificators.267 </b>268 </p>269 </div>270 <ul class="slider">271 <li>272 <input checked id="slide1" name="slide" type="radio">273 <label for="slide1">274 </label>275 <img alt="Object Paint" src="rick.jpg">276 </li>277 <li>278 <input id="slide2" name="slide" type="radio">279 <label for="slide2">280 </label>281 <img alt="Modelling Tools" src="rick.jpg">282 </li>283 </ul>284 </div>285 </div>286 <div class="art-articles">287 <div class="articles-cont">288 <ul class="slider">289 <li>290 <input checked id="slide7" name="slide3" type="radio">291 <label for="slide7">292 </label>293 <img alt="Materials" src="rick.jpg">294 </li>295 <li>296 <input id="slide8" name="slide3" type="radio">297 <label for="slide8">298 </label>299 <img alt="PBR Materials" src="rick.jpg">300 </li>301 </ul>302 <div class="h-article-description">303 <h3>304 Beautiful Materials305 </h3>306 <p>307 Make amazing environments with308 <b>309 beautiful PBR materials310 </b>311 , you can312 <br>313 use your imagination to make advanced materials with314 <b>315 Shader Nodes Editor316 </b>317 .318 </p>319 </div>320 </div>321 </div>322 <div class="art-articles">323 <div class="articles-cont">324 <div class="h-article-description">325 <h3 style="text-align:right;">326 Code With Python Or Visual Language327 </h3>328 <p style="text-align:right;">329 Range Engine makes coding looks easy, you can code with330 <b>331 Python 3.10332 </b>333 <br>334 or make visual scripting with335 <b>336 Visual Language337 </b>338 , you can also use both ways339 <br>340 together!341 <a class="alink">342 (Cython and Range Nodes Coming Soon)343 </a>344 </p>345 </div>346 <ul class="slider">347 <li>348 <input checked id="slide4" name="slide2" type="radio">349 <label for="slide4">350 </label>351 <img alt="Logic Bricks and Python" src="rick.jpg">352 </li>353 <li>354 <input id="slide5" name="slide2" type="radio">355 <label for="slide5">356 </label>357 <img alt="Bricky Nodes" src="rick.jpg">358 </li>359 </ul>360 </div>361 </div>362 <div class="art-articles">363 <div class="articles-cont">364 <ul class="slider">365 <li>366 <input checked id="slide10" name="slide4" type="radio">367 <label for="slide10">368 </label>369 <img alt="The Future Ends" src="rick.jpg">370 </li>371 <li>372 <input id="slide11" name="slide4" type="radio">373 <label for="slide11">374 </label>375 <img alt="Range Armor" src="rick.jpg">376 </li>377 </ul>378 <div class="h-article-description">379 <h3>380 Publishing Projects381 </h3>382 <p>383 Of course you want to show to everyone the amazing work you did,384 <br>385 In Range Engine you can export and publish your game with safety,386 <br>387 optimization and388 <b>389 With no Fees and Licensing Problems!390 </b>391 </p>392 </div>393 </div>394 </div>395 </div>396 </article>397 <style>398 /* fallback */399@font-face {400 font-family: 'Material Symbols Outlined';401 font-style: normal;402 font-weight: 100 700;403 src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v212/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');404}405 406.material-symbols-outlined {407 font-family: 'Material Symbols Outlined';408 font-weight: normal;409 font-style: normal;410 font-size: 24px;411 line-height: 1;412 letter-spacing: normal;413 text-transform: none;414 display: inline-block;415 white-space: nowrap;416 word-wrap: normal;417 direction: ltr;418 -webkit-font-feature-settings: 'liga';419 -webkit-font-smoothing: antialiased;420}421 422 423 424/* cyrillic-ext */425@font-face {426 font-family: 'Roboto Condensed';427 font-style: normal;428 font-weight: 400;429 font-display: swap;430 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyosBD5XxxKA.woff2) format('woff2');431 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;432}433/* cyrillic */434@font-face {435 font-family: 'Roboto Condensed';436 font-style: normal;437 font-weight: 400;438 font-display: swap;439 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyosBK5XxxKA.woff2) format('woff2');440 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;441}442/* greek-ext */443@font-face {444 font-family: 'Roboto Condensed';445 font-style: normal;446 font-weight: 400;447 font-display: swap;448 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyosBC5XxxKA.woff2) format('woff2');449 unicode-range: U+1F00-1FFF;450}451/* greek */452@font-face {453 font-family: 'Roboto Condensed';454 font-style: normal;455 font-weight: 400;456 font-display: swap;457 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyosBN5XxxKA.woff2) format('woff2');458 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;459}460/* vietnamese */461@font-face {462 font-family: 'Roboto Condensed';463 font-style: normal;464 font-weight: 400;465 font-display: swap;466 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyosBB5XxxKA.woff2) format('woff2');467 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;468}469/* latin-ext */470@font-face {471 font-family: 'Roboto Condensed';472 font-style: normal;473 font-weight: 400;474 font-display: swap;475 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyosBA5XxxKA.woff2) format('woff2');476 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;477}478/* latin */479@font-face {480 font-family: 'Roboto Condensed';481 font-style: normal;482 font-weight: 400;483 font-display: swap;484 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyWyosBO5Xw.woff2) format('woff2');485 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;486}487 488 489 490/* cyrillic-ext */491@font-face {492 font-family: 'Roboto Condensed';493 font-style: normal;494 font-weight: 700;495 font-display: swap;496 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpcBD5XxxKA.woff2) format('woff2');497 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;498}499/* cyrillic */500@font-face {501 font-family: 'Roboto Condensed';502 font-style: normal;503 font-weight: 700;504 font-display: swap;505 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpcBK5XxxKA.woff2) format('woff2');506 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;507}508/* greek-ext */509@font-face {510 font-family: 'Roboto Condensed';511 font-style: normal;512 font-weight: 700;513 font-display: swap;514 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpcBC5XxxKA.woff2) format('woff2');515 unicode-range: U+1F00-1FFF;516}517/* greek */518@font-face {519 font-family: 'Roboto Condensed';520 font-style: normal;521 font-weight: 700;522 font-display: swap;523 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpcBN5XxxKA.woff2) format('woff2');524 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;525}526/* vietnamese */527@font-face {528 font-family: 'Roboto Condensed';529 font-style: normal;530 font-weight: 700;531 font-display: swap;532 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpcBB5XxxKA.woff2) format('woff2');533 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;534}535/* latin-ext */536@font-face {537 font-family: 'Roboto Condensed';538 font-style: normal;539 font-weight: 700;540 font-display: swap;541 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpcBA5XxxKA.woff2) format('woff2');542 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;543}544/* latin */545@font-face {546 font-family: 'Roboto Condensed';547 font-style: normal;548 font-weight: 700;549 font-display: swap;550 src: url(https://fonts.gstatic.com/s/robotocondensed/v27/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpcBO5Xw.woff2) format('woff2');551 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;552}553 554 555 556@charset "UTF-8";557 558body{559 color: white;560 font-family: Roboto Condensed, Arial, Helvetica, sans-serif;561 font-size: 17px;562 background-color: #0c0c0c;563 text-align: center;564 margin: 0px;565 height: 100vh;566 padding: 0;567 margin: 0;568 scroll-behavior: smooth;569}570/* LOADING */571#loading{572 background-color: rgba(0, 0, 0, 0.726);573 backdrop-filter: blur(5px);574 position: fixed;575 width: 100%;576 height: 100%;577 z-index: 100000;578}579@keyframes anim_loading{580 0% {transform: rotate(0deg);}581 100% {transform: rotate(330deg);}582}583#loading div{584 animation-name: anim_loading;585 animation-duration: 0.5s;586 animation-iteration-count: infinite;587 user-select: none;588 -webkit-user-select: none;589 padding: 35%;590 background-image: url('/img/loadingicon.png');591 background-repeat: no-repeat;592 background-position-x: center;593 background-position-y: center;594 background-size: 10%;595 filter: invert(1);596}597/**/598hr{599 /*border-color: rgba(238, 88, 88, 0.322);*/600 border-color: rgb(224, 224, 224);601 box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.247);602 margin: 5px;603}604.alink{605 text-decoration: underline;606 color: #ff2727;607 text-decoration-color: #ff27279a;608}609.material-symbols-outlined {610 font-variation-settings:611 'FILL' 0,612 'wght' 400,613 'GRAD' 0,614 'opsz' 48;615 top: 6px;616 position: relative;617 line-height: 0;618}619/*SCROLL BAR (ONLY CHROME, EDGE, OPERA, SAFARI)*/620::-webkit-scrollbar{621 width: 6px;622}623::-webkit-scrollbar-track{624 background: transparent;625 border-radius: 10px;626}627::-webkit-scrollbar-thumb{628 background: #666666;629 border-radius: 10px;630}631::-webkit-scrollbar-thumb:hover{632 background: #838383;633 width: 10px;634}635/**/636.text90{637 font-size: 90%;638}639.logo{640 max-width: 150px;641 transition: all 0.1s ease-in;642}643.logo:hover{644 filter: brightness(200%);645 transition: all 0.1s ease-in-out;646}647.togglebutton{648 position: absolute;649 top: .75rem;650 right: 1rem;651 display: none;652 flex-direction: column;653 justify-content: space-between;654 width: 30px;655 height: 21px;656 padding-top: 15px;657 transition: all 0.2s ease-in;658 cursor: pointer;659}660.togglebutton .bar{661 height: 3px;662 width: 100%;663 background-color: white;664 border-radius: 10px;665}666 667/* HEADER */668.header{669 background:linear-gradient(rgba(0, 0, 0, 0.342),rgba(0, 0, 0, 0.075));670 backdrop-filter: blur(6px);671 box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.11);672 position: fixed;673 display: flex;674 justify-content: space-between;675 align-items: center;676 width: 100%;677 z-index: 10000;678 transition: all 0.25s ease-in-out;679 font-family: Roboto Condensed;680}681.heaul{682 margin: 0;683 display: flex;684 align-items: center;685}686.activeh{687 background-color: #111111;688}689.title{690 margin: 0px;691 max-width: 100%;692 margin-top: 10px;693 margin-left: 20px;694 display: flex;695}696a{697 text-decoration: none;698 color: white;699}700.newcirclespan{701 height: 7px;702 width: 7px;703 background-color: #d40000;704 border-radius: 50%;705 display: inline-block;706 top: 20px;707 position: fixed;708}709.healinks{710 text-decoration: none;711 padding: 0px 5px 20px 5px;712}713.headerlinks{714 margin-right: 20px;715}716a.suppus{717 background-color: rgb(230, 45, 45);718 border-color: rgb(230, 45, 45);719 border-style: solid;720 border-radius: 5px;721 border-width: 2px;722 padding: 5px;723 transition: all 0.20s ease-in;724 font-family: Roboto Condensed;725}726a.suppus:hover{727 background-color: rgba(197, 0, 0, 0);728 transition: all 0.20s ease-in-out;729}730a.suppush{731 text-decoration: none;732 padding: 20px 5px 20px 5px;733}734.headerlis{735 padding: 20px 2px 20px 2px;736 border-style: solid;737 border-right-style: solid;738 border-left-style: solid;739 border-color: rgba(0,0,0,0);740 border-left: 0;741 border-right: 0;742 background: #00000000;743 transition: all 0.15s ease-in;744}745.headerlis:hover{746 border-block-start: transparent;747 border-top-color: rgba(0,0,0,0);748 border-bottom-color: rgb(255, 255, 255);749 background: linear-gradient(#0000,#ffffff38);750 transition: all 0.15s ease-in-out;751}752.headerlis i, .headerlissupp i, .dpdhbt i{753 cursor: default;754}755.headerlissupp{756 padding: 0px 2px 0px 2px;757 display: inline-flex;758 align-items: baseline;759 border-style: solid;760 border-block-start: transparent;761 border-top-color: rgba(0,0,0,0);762 border-bottom-color: rgb(182, 57, 57);763 border-left: 0;764 border-right: 0;765 background: linear-gradient(#0000,#e00000a6);766 transition: all 0.15s ease-in;767}768.headerlissupp:hover{769 border-block-start: transparent;770 border-top-color: rgba(0,0,0,0);771 border-bottom-color: rgb(255, 255, 255);772 background: linear-gradient(#0000,#ca4444bb);773 transition: all 0.15s ease-in-out;774}775.headerlisto{776 display: inline-flex;777}778.splashhome{779 display: inline-block;780 border-radius: 10px;781 padding: 20px;782 border-radius: 20px;783}784.apresentacao{785 display: inline-flex;786 background-color: #0a0a0a7c;787 border-radius: 20px;788 padding: 20px;789}790.downnabout{791 margin-top: 25px;792}793.downabout{794 text-decoration: none;795 display: inline-block;796 margin-right: 30px;797 padding-bottom: 25px;798}799#extbts{800 margin-right: 0px;801 padding-bottom: 10px;802}803.dpdhbt{804 text-decoration: none;805 padding: 20px 5px 20px 5px;806 border-style: solid;807 border-color: rgba(0,0,0,0);808 border-left: 0;809 border-right: 0;810 background: #00000000;811 transition: all 0.15s ease-in;812}813.dpdhbt:hover{814 border-block-start: transparent;815 border-top-color: rgba(0,0,0,0);816 border-bottom-color: rgb(255, 255, 255);817 background: linear-gradient(#0000,#ffffff38);818 transition: all 0.15s ease-in-out;819}820#dpdhbtsupp{821 border-top: 0;822 border-bottom-color: rgb(182, 57, 57);823 background: linear-gradient(#0000,#e00000a6);824}825#dpdhbtsupp:hover{826 border-bottom-color: rgb(255, 255, 255);827 background: linear-gradient(#0000,#ca4444bb);828}829.dropdownh{830 position: relative;831 display: inline-block;832 white-space: nowrap;833}834.dpdhitems{835 display: none;836 position: absolute;837 min-width: 102px;838 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);839 z-index: 1;840}841.dropdownh:hover .dpdhitems{842 margin-top: 23px;843 display: grid;844 width: 100%;845}846.dpdhitems a{847 padding: 12px 6px;848 backdrop-filter: blur(5px);849 border-style: solid;850 border-color: rgba(0,0,0,0);851 border-left: 0;852 border-right: 0;853 background-color: #14141471;854 transition: all 0.10s ease-in;855 display: flex;856 justify-content: center;857}858.dpdhitmsacol{859 background-color: #141414cc;860}861.dpdhitmsacolhov{862 background: linear-gradient(rgba(0, 0, 0, 0.514),#ffffff83);;863}864.dpdhitems a:hover{865 border-block-start: transparent;866 border-top-color: rgba(0,0,0,0);867 border-bottom-color: rgb(255, 255, 255);868 background: linear-gradient(rgba(0, 0, 0, 0.514),#ffffff38);869 transition: all 0.10s ease-in-out;870}871 872/* SECTION */873section{874 background-color: rgba(0, 0, 0, 0.2);875}876a.downnow{877 background-color: rgba(160, 29, 29, 0.5);878 backdrop-filter: blur(4px);879 border-color: rgba(160, 29, 29, 0.5);880 border-style: solid;881 border-radius: 5px;882 border-width: 1px;883 padding: 10px 20px 10px 20px;884 box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.192);885 transition: all 0.15s ease-in;886 white-space: nowrap;887}888a.downnow:hover{889 background-color: rgba(197, 0, 0, 0);890 transition: all 0.15s ease-in-out;891}892a.knowmore{893 background-color: #4d4d4d2c;894 backdrop-filter: blur(4px);895 border-style: solid;896 border-color: rgb(83, 83, 83);897 border-width: 1px;898 border-radius: 5px;899 padding: 10px 20px 10px 20px;900 box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.192);901 transition: all 0.15s ease-in;902 white-space: nowrap;903}904a.knowmore:hover{905 background-color: #4d4d4d00;906 border-color: rgb(150, 150, 150);907}908#to-wn{909 background-color: rgba(49, 57, 169, 0.5);910 border-color: rgba(49, 57, 169, 0.5);911}912#to-wn:hover{913 background-color: transparent;914}915.smalllink{916 color: rgba(255, 255, 255, 0.616);917 font-size: 10px;918}919.backvideo{920 position: fixed; 921 right: 0; 922 bottom: 0;923 min-width: 100%; 924 min-height: 100%;925 width: auto; 926 height: auto; 927 z-index: -1000;928 background: url('/img/posterback.jpg') no-repeat;929 background-size: cover;930}931.indexsec{932 display: block;933 padding-top: 280px;934 padding-bottom: 220px;935}936.downsec{937 display: block;938 padding-top: 100px;939 padding-bottom: 50px;940}941.whatsxbge{942 font-size: 15px;943 margin: 3px;944}945@keyframes example{946 from {color: rgba(0, 0, 0, 0);}947 to {color: rgb(255, 255, 255);}948}949.animbar{950 font-size: 80%;951 display: inline-flex;952 animation-name: example;953 animation-duration: 0.4s;954 animation-direction: alternate-reverse;955 animation-iteration-count: infinite;956}957.titsec{958 margin: 0px;959 text-align: left;960 font-size: 40px;961}962.splashtitsec{963 margin: 0px;964 font-size: 40px;965 font-size: 600%;966 letter-spacing: -7px;967 font-family: Roboto Condensed, Arial, Helvetica, sans-serif;968 text-transform: uppercase;969 text-shadow: 0px 0px 40px #00000063;970 cursor: default;971 align-items: center;972 display: flex;973}974.titdesc{975 text-transform: uppercase;976 letter-spacing: 15px;977 font-size: 20px;978 margin: 3px;979 cursor: default;980}981.titsece{982 font-family: Roboto, Arial, Helvetica, sans-serif;983 font-size: 30px;984 margin-top: 10px;985 margin-bottom: 5px;986}987.articlechanges, h3, p{988 text-decoration: none;989 margin: 0;990}991 992/* HOMEPAGE SPLASH */993.home-splashrange{994 background-color: #3a1e1e;995 font-family: Roboto Condensed, sans-serif;996 padding: 10px 0 10px 0;997 width: 100%;998 display: inline-flex;999 justify-content: center;1000}1001.home-splashrange h2{1002 margin: 0;1003 font-size: 30px;1004 text-transform: uppercase;1005}1006@keyframes animarrowdown{1007 0% {top: 25px;}1008 50% {top: 35px;}1009 100% {top: 25px;}1010}1011.anim-arrow i{1012 animation-name: animarrowdown;1013 animation-duration: 1s;1014 animation-iteration-count: infinite;1015 user-select: none;1016 -webkit-user-select: none;1017}1018.spl-link-button{1019 display: inline-flex;1020 transition: all 0.15s ease-in;1021 outline-color: #313131;1022 margin: 5px;1023}1024.spl-link-button:hover{1025 box-shadow: 0px 0px 15px 5px #9b2d2d82;1026 outline-style: solid;1027 outline-width: 2px;1028 outline-color: #963535;1029 transition: all 0.15s ease-in-out;1030}1031.spl-link-button a{1032 font-family: Roboto Condensed, Arial, Helvetica, sans-serif;1033 padding: 15px;1034 background-color: rgba(188, 36, 36, 0.21);1035 letter-spacing: -1px;1036 backdrop-filter: blur(5px);1037}1038.spl-link-ico{1039 background-color: rgb(170, 52, 52);1040 padding: 15px;1041 cursor: default;1042}1043#spl-link-button-small{1044 padding: 10px;1045}1046#link-button-blue:hover{1047 box-shadow: 0px 0px 15px 5px #302d9b82;1048 outline-color: #274071;1049}1050#link-button-grey:hover{1051 box-shadow: 0px 0px 15px 5px #82828282;1052 outline-color: #696969;1053}1054 1055/* HOMEPAGE ARTICLE */1056.home-article{1057 padding: 0;1058 margin: 0;1059 width: 100%;1060}1061.art-articles{1062 padding: 10px;1063 height: 25%;1064}1065.articles-cont{1066 width: 100%;1067 justify-content: center;1068 display: inline-flex;1069 background-color: #181818/*#0c0c0cb9*/;1070 padding: 10px 0 10px 0;1071 border-radius: 10px;1072 transition: all 0.15s ease-in;1073}1074/*.articles-cont:hover{1075 padding: 12px 0 12px 0;1076 box-shadow: 0px 0px 0px 4px rgba(228, 0, 0, 0.5);1077 transition: all 0.15s ease-in-out;1078}*/1079.h-article-description{1080 margin-left: 20px;1081 margin-top: 20px;1082}1083.h-article-description h3{1084 font-family: Roboto Condensed, Arial, Helvetica, sans-serif;1085 font-size: 45px;1086 letter-spacing: -2px;1087 text-transform: uppercase;1088 text-align: left;1089}1090.h-article-description p{1091 font-family: Roboto Condensed, Arial, Helvetica, sans-serif;1092 font-size: 18px;1093 text-align: left;1094 margin-top: 10px;1095 letter-spacing: -1px;1096}1097/* RESPONSIVE */1098@media (max-width: 500px){1099 .articles-cont{1100 display: block;1101 }1102}1103 1104/* LATEST NEWS */1105.ltsnw-article{1106 display: block;1107 font-family: Roboto Condensed, Arial, Helvetica, sans-serif;1108 background-color: #181818;1109 padding: 4px 0px 24px 0px;1110}1111.ltsnw-title{1112 font-size: 40px;1113 margin: 15px 0px 15px 17%;1114 justify-content: flex-start;1115 display: flex;1116 letter-spacing: -2px;1117}1118.ltsnw-items{1119 display: inline-flex;1120}1121.ltsnw-highlight{1122 display: inline-flex;1123 width: 50%;1124 justify-content: flex-end;1125}1126.ltsnw-highlight-item{1127 margin: 0px 50px 0px 50px;1128 padding: 5px;1129 width: 60%;1130 display: inline-block;1131 outline-color: #373737;1132 border-radius: 5px;1133 transition: all 0.1s ease-in-out;1134}1135.ltsnw-highlight-item:hover{1136 outline-style: solid;1137 outline-width: 2px;1138 transition: all 0.1s ease-in-out;1139 box-shadow: 2px 2px 5px 4px rgba(0, 0, 0, 0.25);1140}1141.ltsnw-highlight img{1142 width: 100%;1143 border-radius: 5px;1144 margin: 0px 0px 5px 0px;1145 box-shadow: 2px 2px 5px 4px rgba(0, 0, 0, 0.25);1146}1147.ltsnw-highlight-desc{1148 text-align: left;1149 margin: 0px 5px 5px 2px;1150}1151.ltsnw-highlight-desc h3{1152 font-size: 28px;1153 text-transform: uppercase;1154 white-space: initial;1155}1156.ltsnw-highlight-desc p{1157 letter-spacing: -1px;1158 white-space: initial;1159}1160.ltsnw-news{1161 display: inline-flex;1162 width: 40%;1163 justify-content: flex-start;1164}1165.ltsnw-hl-item{1166 display: inline-flex;1167 margin: 5px 0;1168 outline-color: #373737;1169 border-radius: 5px;1170 transition: all 0.1s ease-in-out;1171}1172.ltsnw-hl-item:hover{1173 outline-style: solid;1174 outline-width: 2px;1175 transition: all 0.1s ease-in-out;1176 box-shadow: 2px 2px 5px 4px rgba(0, 0, 0, 0.25);1177}1178.ltsnw-hl-item img{1179 width: 25%;1180 height: 25%;1181 border-radius: 5px;1182 box-shadow: 2px 2px 5px 4px rgba(0, 0, 0, 0.25);1183}1184.ltsnw-hl-item-desc{1185 text-align: left;1186 margin: 0 0 0 10px;1187}1188.ltsnw-hl-item-desc h3{1189 font-size: 28px;1190 text-transform: uppercase;1191 white-space: initial;1192}1193.ltsnw-hl-item-desc p{1194 letter-spacing: -1px;1195 white-space: initial;1196 font-family: Roboto Condensed, Arial, Helvetica, sans-serif!important;1197}1198.ltsnw-newsdate{1199 cursor: default;1200 color: rgba(255, 255, 255, 0.219);