:root{--black:hsl(0, 0%, 0%);--black-a1:hsl(0, 0%, 0%, 0.1);--black-a15:hsl(0, 0%, 0%, 0.15);--black-a25:hsl(0, 0%, 0%, 0.25);--black-a175:hsl(0, 0%, 0%, 0.175);--black-a2:hsl(0, 0%, 0%, 0.2);--black-a25:hsl(0, 0%, 0%, 0.25);--black-a5:hsl(0, 0%, 0%, 0.5);--black-a75:hsl(0, 0%, 0%, 0.75);--black-a9:hsl(0, 0%, 0%, 0.9);--black-a95:hsl(0, 0%, 0%, 0.95);--black2:hsl(70, 8%, 15%);--black3:hsl(313, 100%, 2%);--black3-a5:hsl(313, 100%, 2%, 0.5);--blue:hsl(240, 100%, 30%);--blue-a75:hsl(240, 100%, 30%, 0.75);--blue-p:hsl(189, 53%, 88%);--blue-p-a5:hsl(189, 53%, 88%, 0.5);--blue-p-a85:hsl(189, 53%, 88%, 0.85);--brown-d:hsl(353, 27%, 25%);--gray:hsl(0, 0%, 80%);--gray-a1:hsl(0, 0%, 80%, 0.1);--gray-a25:hsl(0, 0%, 80%, 0.25);--gray-a5:hsl(0, 0%, 80%, 0.5);--gray-a75:hsl(0, 0%, 80%, 0.75);--gray-a9:hsl(0, 0%, 80%, 0.9);--gray2:hsl(0, 0%, 60%);--gray2-a5:hsl(0, 0%, 60%, 0.5);--gray2-a75:hsl(0, 0%, 60%, 0.75);--gray3:hsl(0, 0%, 40%);--gray3-a25:hsl(0, 0%, 40%, 0.25);--gray3-a5:hsl(0, 0%, 40%, 0.5);--gray3-a75:hsl(0, 0%, 40%, 0.75);--gray4:hsl(0, 0%, 20%);--gray4-a25:hsl(0, 0%, 20%, 0.25);--gray4-a4:hsl(0, 0%, 20%, 0.4);--gray4-a5:hsl(0, 0%, 20%, 0.5);--gray4-a75:hsl(0, 0%, 20%, 0.75);--green:hsl(120, 100%, 30%);--green-a75:hsl(120, 100%, 30%, 0.75);--green-d:hsl(138, 68%, 40%);--green-p:hsl(176, 24%, 51%);--green-dp:hsl(175, 25%, 31%);--green2:hsl(75, 80%, 50%);--orange:hsl(24, 100%, 50%);--orange2:hsl(25, 99%, 64%);--pink:hsl(332, 79%, 50%);--purple:hsl(300, 100%, 30%);--purple-a25:hsl(300, 100%, 30%, 0.25);--purple-a75:hsl(300, 100%, 30%, 0.75);--purple-d:hsl(300, 100%, 10%);--red:hsl(0, 100%, 30%);--red-a1:hsl(0, 100%, 30%, 0.1);--red-a25:hsl(0, 100%, 30%, 0.25);--red-a5:hsl(0, 100%, 30%, 0.5);--red-a6:hsl(0, 100%, 30%, 0.6);--red-a75:hsl(0, 100%, 30%, 0.75);--red-a8:hsl(0, 100%, 30%, 0.8);--red-a9:hsl(0, 100%, 30%, 0.9);--yellow:hsl(60, 100%, 90%);--yellow-a25:hsl(60, 100%, 90%, 0.25);--yellow-a5:hsl(60, 100%, 90%, 0.5);--yellow-a75:hsl(60, 100%, 90%, 0.75);--white:hsl(0, 0%, 100%);--white-a1:hsl(0, 0%, 100%, 0.1);--white-a2:hsl(0, 0%, 100%, 0.2);--white-a25:hsl(0, 0%, 100%, 0.25);--white-a3:hsl(0, 0%, 100%, 0.3);--white-a5:hsl(0, 0%, 100%, 0.5);--white-a7:hsl(0, 0%, 100%, 0.7);--white-a75:hsl(0, 0%, 100%, 0.75);--white-a8:hsl(0, 0%, 100%, 0.8);--white-a9:hsl(0, 0%, 100%, 0.9);--a-main-shdw:var(--red);--a-dngr-bg:hsl(354, 61%, 28%);--a-dngr-bg-a5:hsl(354, 61%, 28%, 0.5);--a-dngr-brdr:hsl(354, 70%, 87%);--a-dngr-clr:hsl(0, 0%, 100%);--a-info-bg:hsl(189, 53%, 88%);--a-info-brdr:hsl(188, 53%, 83%);--a-info-clr:hsl(189, 78%, 21%);--a-ok-bg:hsl(134, 41%, 88%);--a-ok-brdr:hsl(134, 41%, 83%);--a-ok-clr:hsl(134, 61%, 21%);--a-tip-bg:hsl(46, 100%, 90%);--a-tip-clr:hsl(45, 94%, 27%);--a-warn-bg:hsl(355, 70%, 91%);--a-warn-clr:hsl(354, 61%, 28%);--i-ok-bg:hsl(134, 41%, 50%, 0.5);--i-ok-brdr:hsl(134, 41%, 50%, 0.85);--i-tip-bg:hsl(48, 100%, 50%, 0.25);--dark:hsl(210, 10%, 23%)}body{font-family:nunito;letter-spacing:.0625em}body p{font-family:roboto}footer{padding:3em 3em 1.5em}h1{font-family:ubuntu}header{position:relative;width:100%;height:auto;min-height:35rem;padding:15rem 0}header h1{font-family:montserrat,cursive;font-size:2.5rem;line-height:2.5rem;letter-spacing:.8rem}header h2{max-width:20rem;font-size:1rem}nav{min-height:56px}nav .navbar-toggler{font-size:80%;padding:.75rem}nav .navbar-toggler:focus{outline:none}nav .navbar-brand{font-weight:700;padding:.9rem 0}nav .navbar-nav .nav-item:hover{outline:none}nav .navbar-nav .nav-item:active,nav .navbar-nav .nav-item:focus{outline:none}section#lists{margin-top:7em;padding:3em}.btn{box-shadow:0 .1875rem .1875rem rgba(0,0,0,.1)!important;padding:1.25rem 2rem;font-family:varela round;font-size:80%;text-transform:uppercase;letter-spacing:.15rem;border:0}.about-section{padding-top:10rem}.about-section p{margin-bottom:5rem}.contact-section{padding:5rem 0 0}.contact-section .card h4{font-size:.8rem;font-family:varela round;text-transform:uppercase;letter-spacing:.15rem}.contact-section .card hr{width:3rem}.contact-section .social{margin-top:5rem}.contact-section .social a{height:3rem;line-height:3rem;text-align:center;width:3rem}.error{font-weight:700;padding:1em}.hidden{display:none!important}.IMP{font-style:italic;font-weight:700}.is-center{text-align:center!important}.projects-section{padding:10rem 0}.projects-section .featured-text{padding:2rem}.projects-section .project-text{padding:3rem;font-size:90%}.select-style select{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:0 0;border:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;cursor:pointer;font-size:1em}.signup-section{padding:10rem 0}.signup-section .form-inline input{padding:1.25rem 2rem;height:auto;font-family:varela round;font-size:80%;text-transform:uppercase;letter-spacing:.15rem}@media screen and (prefers-color-scheme:dark){body{background:#330038 url(/img/Stop_the_light_by_Mato_Rachela.jpg)no-repeat fixed;background-size:cover}a{color:#64a19d}a:focus,a:hover{text-decoration:none;color:#3c6360}footer{background:#000}header{background: linear-gradient(to bottom, rgba(22, 22, 22, 0.3) 0%, rgba(22, 22, 22, 0.7) 75%, #161616 100%)); background-position: center; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; } header h1 { background: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); -webkit-background-clip: text; -webkit-text-fill-color: var(--white-a5); color: var(--white-a5); text-shadow: 1px 3px var(--red-a5); } } @media screen and (prefers-color-scheme: light) { body { background-color: var(--yellow) ; background: var(--yellow) url(/img/Outoffocus.jpg) no-repeat fixed; background-size: cover; } a { } a:focus, a:hover { } footer { } header { } header h1 { -webkit-background-clip: text; -webkit-text-fill-color: var(--black-a95); color: var(--black-a5); text-shadow: 1px 3px var(--red-a5); } } @media (min-width: 768px) { header h1 { font-size: 4rem; line-height: 4rem; } } @media (min-width: 992px) { header { height: 100vh; padding: 0; } header h1 { font-size: 6.5rem; line-height: 6.5rem; letter-spacing: 0.8rem; } header h2 { max-width: 30rem; font-size: 1.25rem; } .projects-section .featured-text { padding: 0 0 0 2rem; border-left: 0.5rem solid #64a19d; } .projects-section .project-text { padding: 5rem; } .projects-section .project-text hr { border-color: #64a19d; border-width: .25rem; width: 30%; } } @media (min-width: 2560px) { html { -webkit-text-size-adjust: 150%; } body { font-size: 150%; } } @media (min-width: 3840px) { html { -webkit-text-size-adjust: 200%; } body { font-size: 200%; } } #logo { display: block; padding: 0 30px; float: left; font-size: 20px; line-height: 60px; } #main-menu { margin: 0 auto; padding: 0; } #main-menu:after { content: ""; display: table; clear: both; } #main-menu ul.menu { margin: 0 auto; padding: 0; list-style: none; position: relative; } #main-menu ul.menu svg { height: 24px; vertical-align: middle; width: 24px; } #main-menu ul li { margin: 0px; display: inline-block; float: left; } #main-menu a, #menu-lang { display: block; padding: 0 20px; font-size: 1em; line-height: 60px; text-decoration: none; } #main-menu ul.menu li.lang-selector p { line-height: unset; } #main-menu ul.menu li.menu-search { padding: 13px 0; } #main-menu ul li:hover > ul { display: inherit; } #main-menu ul ul li { float: none; display: list-item; position: relative; } #main-menu ul ul ul li { position: relative; top: -60px; left: 170px; } #main-menu ul, li { list-style: none; } #main-menu li > a:only-child:after { content: ''; } #main-menu #menu-lang #select-language { -moz-appearance:none; -webkit-appearance:none; appearance:none; background:0 0; border:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; cursor:pointer; } .toggle, [id^=drop] { display: none; } @media all and (max-width : 768px) { #logo { display: block; padding: 0; width: 100%; text-align: center; float: none; } #main-menu { margin: 0; } .toggle + a, .menu { display: none; } .toggle { display: block; padding: 0 20px; font-size: 20px; line-height: 60px; text-decoration: none; border: none; } [id^=drop]:checked + ul { display: block; } #main-menu ul li { display: block; width: 100%; } #main-menu ul ul .toggle, #main-menu ul ul a { padding: 0 40px; } #main-menu ul ul ul a { padding: 0 80px; } #main-menu ul ul { float: none; position: static; } #main-menu ul ul li:hover > ul, #main-menu ul li:hover > ul { display: none; } #main-menu ul ul li { display: block; width: 100%; } #main-menu ul ul ul li { position: static; } } @media all and (max-width : 330px) { #main-menu ul li { display: block; width: 94%; } } @media (prefers-color-scheme: dark) { #main-menu a, #main-menu select { background: transparent; -webkit-text-fill-color: var(--white); color: var(--white); } #main-menu a:hover, #main-menu select:hover { text-shadow: 2px 3px var(--black); background: transparent; -webkit-text-fill-color: var(--red); color: var(--red); } #main-menu ul.menu-drop li { background: var(--black); } #main-menu ul.menu-drop li a { -webkit-text-fill-color: var(--white-a5); color: var(--white-a5); } #main-menu ul.menu-drop li:hover { background: var(--black); } #main-menu ul.menu-drop li a:hover { -webkit-text-fill-color: var(--red); color: var(--red); } #main-menu ul ul a, #main-menu ul ul ul a { background-color: var(--black-a75); } #main-menu ul.menu svg { stroke: var(--white); } .toggle { background-color: var(--black-a5); -webkit-text-fill-color: var(--white); color: var(--white); } .toggle:hover { background-color: var(--black-a75); } } @media (prefers-color-scheme: light) { #main-menu a, #main-menu select { background: transparent; -webkit-text-fill-color: var(--black); color: var(--black); } #main-menu a:hover, #main-menu select:hover { background: transparent; -webkit-text-fill-color: var(--red); color: var(--red); } #main-menu ul.menu-drop li { background-color: var(--white-a5); } #main-menu ul.menu-drop li a { -webkit-text-fill-color: var(--black-a5); color: var(--black-a5); } #main-menu ul.menu-drop li:hover { background: var(--gray); } #main-menu ul.menu-drop li a:hover { -webkit-text-fill-color: var(--black-a9); color: var(--black-a9); } #main-menu ul ul a, #main-menu ul ul ul a { background-color: var(--yellow-a75); } #main-menu ul.menu svg { stroke: var(--dark); } .toggle { -webkit-text-fill-color: var(--white); color: var(--white); } }}}