@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&family=Fira+Sans:wght@400;500&display=swap');

html {
  scroll-behavior: smooth;
}

:root {
    font-size: 25px;
    --fg: 211, 211, 215;
    --font-main: "Fira Sans", sans-serif;
    --font-second: "Space Grotesk", monospace;
}

* {
    box-sizing: border-box;
}

body {
    height: 100%;
    min-height: 100vh;
    color: rgb(var(--fg));
    background: #141419 url("background.svg") no-repeat center;
    background-size: cover;
    margin: 0;
    padding: .5em;
    font-family: var(--font-main);
    --d: 4px;
    background-color: #141419;
}

header {
    text-align: right;
    border-bottom: #272637 2px solid;
    padding: .5em;
}

header a {
    padding: .4em;
    text-decoration: none;
    margin-right: .5rem;
    border-radius: .2em;
    transition: 200ms ease
}

header a:hover {
    color: #7f7ab8;
}

header a:last-child {
    margin-right: 0;
}

.first {
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 3rem 0;
}

.first .text {
    padding: 1rem 0;
    font-family: var(--font-second);
    width: 100%;
    font-size: 2.5em;
    letter-spacing: .03em;
    font-weight: bold;
}

.first .quick {
    max-width: 600px;
    align-self: center;
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    justify-content: center;
}

.first .quick .link {
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    height: fit-content;
    font-size: 1em;
    background: #272637;
    border-radius: .2em;
    padding: .5em 1em;
    transition: 200ms;
    border-bottom: #0004 .25em solid;
    position: relative;
    transition: 200ms;
    bottom: 0;
}

.first .quick .link:hover {
    color: #fff;
    bottom: .25em;
}

.bigwidget {
    position: relative;
    width: 100%;
    background: #0004;
    height: 100%;
    padding: .5em;
    border-radius: .25em;
}

a {
    color: unset;
}

.sel {
    color: #7f7ab8;
    font-weight: 500;
}

.bigwidget.contribute::before,
.bigwidget.contact::before,
.bigwidget.about::before,
.bigwidget.hobbys::before,
body>.projects.watermark::before {
    content: "Spolupráce";
    position: absolute;
    bottom: 100%;
    right: 0;
    padding: .2em .5em;
    background: #0004;
}


body>.projects.watermark::before {
    content: "Projekty";
}

.bigwidget.contact::before {
    content: "Kontakt";
}

.bigwidget.hobbys::before {
    content: "Hobbisky";
}

.bigwidget.about::before {
    content: "Něco o mně";
}

.imakewebs {
    background: hsl(220, 28%, 15%);
    box-shadow: #0004 0 5px 15px;
}

.imakewebs .sel {
    color: rgb(83, 131, 252)
}

.bigwidget.contribute {
    display: block;
}

.bigwidget.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottomgap {
    margin-bottom: 3rem;
}

body>.projects {
    position: relative;
    width: 100%;
    background: #0004;
    height: 100%;
    padding: .5em;
    border-radius: .25em;
}

.bigwidget.hobbys {
    text-align: center;
    padding: 1rem 0;
}
.bigwidget.hobbys .container {
    width: 100%;
    max-width: 1000px;
    display: inline-block;
}

.bigwidget.hobbys .container .grid {
    width: 100%;
    display: grid;
    place-content: center;
    place-items: center;
    gap: 1rem;
    --width: 200px;
    grid-template-columns: repeat(auto-fill, minmax(var(--width), var(--width)));
}

.bigwidget.hobbys .container .grid .box {
    font-size: 0.8rem;
    padding: 0.5em;
    background: #0004;
    max-width: var(--width);
    display: flex;
    flex-direction: column;
    align-items : center;
    border-radius: 0.5rem;
    overflow: hidden;
    width: 100%;
    height: 120px;
    overflow-y: auto;
}

.bigwidget.hobbys .container .grid .box span {
    display: flex;
    align-items: end;
    height: 100%;
}

.bigwidget.hobbys .container .grid .box span:nth-child(2) {
    display: inline;
    align-items: middle;
    vertical-align: middle;
}

body>.projects .category .title {
    font-size: 1.25em;
    font-weight: 500;
    padding-bottom: .5rem;
    font-family: var(--font-second);
}

body>.projects .category>.projects {
    gap: .3em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 2em;
    justify-content: start;
}

body>.projects .category>.projects a {
    padding: .4em .75em;
    cursor: pointer;
    color: rgba(var(--fg), 80%);
    border-radius: .25em;
    display: inline-block;
    text-decoration: none;
    border-bottom: #0004 .3em solid;
    background: #201f23;
    transition: 200ms;
    position: relative;
    transition: 200ms;
    bottom: 0;
}

body>.projects .category>.projects a.novinka {
    background: #272637;
}

body>.projects .category>.projects a.novinka::after {
    content: "novinka!";
    z-index: 8;
    background: #7f7ab8;
    color: #201f23;
    padding: .1em .3em;
    border-radius: .8em;
    display: inline-block;
    position: absolute;
    font-size: .7em;
    rotate: 2deg;
    right: -1rem;
    /* bottom: calc(100% - 1em); */
    top: -0.5em;
}

body>.projects .category>.projects a.good::after {
    content: "👍";
    z-index: 8;
    background: #141419;
    color: #201f23;
    padding: .1em .3em;
    border-radius: .8em;
    display: inline-block;
    position: absolute;
    font-size: .8em;
    rotate: 2deg;
    right: -0.5em;
    /* bottom: calc(100% - 1em); */
    top: -0.5em;
}

body>.projects .category>.projects a:hover {
    bottom: .25em;
}

@media (max-width:650px) {
    :root {
        font-size: 22px
    }

    .first .quick .link {
        font-size: 1.25em
    }

    body>.projects .category>.projects {
        justify-content: center
    }

    body>.projects .category>.projects a {
        padding: .7em .75em;
        font-size: 1.2em
    }
}

footer {
    margin-top: 3em;
    width: 100%;
    text-align: center;
    font-family: var(--font-second);
}

.head {
    position: relative;
}

.head #mobile-navbar-show,
.head .mobile-navbar-show,
.mobile_view {
    display: none;
}

.headerSection .links {
    display: inherit;
}

.head nav {
    transition: 200ms ease right;
}

.desktop_view {
    display: inline;
}

@media (max-width:700px) {
    .head .links {
        text-align: right
    }

    .head .mobile-navbar-show {
        user-select: none;
        z-index: 20;
        display: block;
        position: relative
    }

    .head nav {
        background: #141419 !important;
        display: flex;
        z-index: 10;
        position: fixed;
        width: 100%;
        height: 100vh;
        right: 0;
        top: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .head #mobile-navbar-show:not(:checked)~nav {
        right: -100%
    }

    .head #mobile-navbar-show:checked~nav {
        right: 0
    }

    .head #mobile-navbar-show:checked~.links .link {
        font-size: 2em !important
    }

    .desktop_view {
        display: none
    }

    .mobile_view {
        display: inline !important
    }
}