* { box-sizing: border-box; }
/* fonts */
@font-face { font-family: interRegular; src: url(fonts/inter/regular.ttf); }
@font-face { font-family: interBold; src: url(fonts/inter/bold.ttf); }
@font-face { font-family: interThin; src: url(fonts/inter/thin.ttf); }
@font-face { font-family: interExtraBold; src: url(fonts/inter/extrabold.ttf); }
@font-face { font-family: interBlack; src: url(fonts/inter/black.ttf); }
@font-face { font-family: interSemiBold; src: url(fonts/inter/semibold.ttf); }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 }

body, html { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; font-family: interRegular; font-size: 13px; background-color: #ffffff; color: #242424; }
.dflex { display: flex !important; }
.flex-row { flex-direction: row !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap; }
.scrolling-list { display: flex; flex-direction: column; flex: 1; overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.unset-flex { flex: unset !important; }
.gap-05 { gap: 5px; }
.gap-1 { gap: 10px; }
.gap-2 { gap: 20px; }
.gap-3 { gap: 30px; }

#topbar { border-bottom: #d4d4d4 1.5px solid; padding: 10px 15px; display: flex; justify-content: space-between; }
#topbar .logo:link, #topbar .logo:visited, #topbar .logo:hover { display: flex; align-items: center; gap: 10px; font-family: 'interSemiBold'; font-size: 22px; color: #242424; text-decoration: none; }
#topbar .logo img { height: 24px; }
#topbar .topbar-cta-btns { display: flex; gap: 10px; }
#topbar .topbar-cta-btns img { height: 30px; }
#topbar .menu { display: none; }

.playground { display: flex; flex: 1; overflow: hidden; position: relative; }
.playground .leftcol { width: 350px; border-right: #d4d4d4 1px solid; display: flex; flex-direction: column; padding: 25px 15px; overflow: auto; }
.playground .main { display: flex; flex-direction: column; flex: 1; padding: 25px; overflow: auto; }

.category-row { margin-bottom: 10px; }
.category-row a:link, .category-row a:visited { transform: unset; display: flex; align-items: center; text-decoration: none; color: #242424; font-family: interSemiBold; font-size: 18px; }
.category-row a:hover { color: #7404f5; }
.category-row i { transition: .5s all; font-size: 20px; width: 20px; height: 20px;}
.category-row.open i.arrow { transform: rotate(90deg); }
.category-row .contents { display: none; flex-direction: column; padding: 15px 0 5px 20px; }
.category-row.open .contents { display: flex; }
.category-row .contents.empty { padding: 0px; }
.category-row .contents a:link, .category-row .contents a:visited { font-family: interRegular; font-size: 15px; color: #444444; text-decoration: none; padding: 8px 0; }

.main .content { display: flex; flex-direction: column; width: 600px; max-width: 97%; align-self: center; }
.main .content .hero-content { display: flex; flex-direction: column; align-items: flex-start; margin-top: 50px; }
.main .content .hero-content .logo { margin-bottom: 24px;  height: 90px; }
.main .content .hero-content h1 { margin: 0 0 24px 0; font-family: 'interBold'; font-size: 48px; letter-spacing: -1px; }
.main .content .hero-content h2 { margin: 0 0 24px 0; font-family: 'interBold'; font-size: 32px; letter-spacing: -1px; }
.main .content .hero-content p { margin: 0 0 10px 0; font-size: 18px; line-height: 26px; }
.main .content .hero-content ol { margin: 20px 0; padding: 0 20px; }
.main .content .hero-content ol li { font-size: 18px; line-height: 26px; margin-bottom: 8px; padding-left: 10px; }
.main .content .hero-content .cta-btns { padding-top: 22px; display: flex; flex-direction: row; gap: 10px; }
.main .content .hero-content .cta-btns a { text-decoration: none; }


/* TELEFON */
@media only screen and (max-width : 760px) {
    #topbar { padding: 15px; }
    #topbar .topbar-cta-btns { display: none; }
    #topbar .menu { display: flex; }
    .playground .leftcol { display: none; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-color: #ffffff; width: 100%; }
    .playground .leftcol.show { display: flex; }
    .main .content .hero-content { margin-top: 0; align-items: center; }
    .main .content .hero-content .logo { margin-top: 50px; }
    .main .content .hero-content h1 { text-align: center; }
    .main .content .hero-content p { text-align: center; }
    .main .content .hero-content .cta-btns { margin-top: 20px; }
}