/** Tailwind rules (as preflight is disabled) **/

[hidden]:where(:not([hidden=until-found])) {
    display: none !important;
}

/** Fonts */
@font-face {
    font-family: 'Fira Sans';
    src: url('./Fonts/Fira_Sans/Fira_Sans/FiraSans-Regular.ttf');
}

@font-face {
    font-family: 'Geist';
    src: url('./Fonts/Geist/Geist-VariableFont_wght.ttf');
}

.inf-scroll {
    height: 200px;
    overflow: scroll;
}

.menu-icon {
    mask: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%20-5.5%2021%2021%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3Emenu_list%20%5B%231527%5D%3C%2Ftitle%3E%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22Dribbble-Light-Preview%22%20transform%3D%22translate(-179.000000%2C%20-205.000000)%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22icons%22%20transform%3D%22translate(56.000000%2C%20160.000000)%22%3E%3Cpath%20d%3D%22M123%2C55%20L144%2C55%20L144%2C53%20L123%2C53%20L123%2C55%20Z%20M123%2C47%20L144%2C47%20L144%2C45%20L123%2C45%20L123%2C47%20Z%20M123%2C51%20L144%2C51%20L144%2C49%20L123%2C49%20L123%2C51%20Z%22%20id%3D%22menu_list-%5B%231527%5D%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') 100% 100% / cover no-repeat;
    -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%20-5.5%2021%2021%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3Emenu_list%20%5B%231527%5D%3C%2Ftitle%3E%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22Dribbble-Light-Preview%22%20transform%3D%22translate(-179.000000%2C%20-205.000000)%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22icons%22%20transform%3D%22translate(56.000000%2C%20160.000000)%22%3E%3Cpath%20d%3D%22M123%2C55%20L144%2C55%20L144%2C53%20L123%2C53%20L123%2C55%20Z%20M123%2C47%20L144%2C47%20L144%2C45%20L123%2C45%20L123%2C47%20Z%20M123%2C51%20L144%2C51%20L144%2C49%20L123%2C49%20L123%2C51%20Z%22%20id%3D%22menu_list-%5B%231527%5D%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') 100% 100% / cover no-repeat;
}

.geist-font {
    font-family: Geist;
}

/** About me */

.about-me-header {
    position: relative;
}

.about-me-header::before {
    content: '';
    border-width: 2px 20vw 0px 0px;
    border-style: solid;
    border-color: transparent white transparent transparent;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    height: 1px;
    display: block;
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
}

.about-me-header::after {
    content: '';
    border-width: 2px 0px 0px 20vw;
    border-style: solid;
    border-color: transparent transparent transparent white;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    height: 1px;
    display: block;
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
}

#ladingPageHeadingDivider {
    position: relative;
}

#ladingPageHeadingDivider::before {
    content: '';
    border-width: 2px 10rem 0px 0px;
    border-style: solid;
    border-color: transparent white transparent transparent;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    height: 1px;
    display: block;
    position: absolute;
    top: 50%;
    right: 49%;
}

#ladingPageHeadingDivider::after {
    content: '';
    border-width: 2px 0px 0px 10rem;
    border-style: solid;
    border-color: transparent transparent transparent white;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    height: 1px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
}


/** Default form */

.frame-layout-0 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.label.label-text {
    font-size: 1.35rem;
}

.container.default {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Geist;
    font-size: 2rem;
    margin-top: 3rem;
}

.input.input-bordered {
    width: 90%;
    display: block;
    border: none;
    outline: none;
    border-radius: 15px;
    padding: 1em;
    background-color: #ccc;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
    transition: 300ms ease-in-out;
    font-size: 1.12rem;
    font-family: Geist;
}

.input.input-bordered:focus {
    background-color: white;
    transform: scale(1.025);
    box-shadow: 6px 6px 10px #969696,
             -6px -6px 10px #ffffff;
}

.textarea.textarea-bordered {
    display: block;
    width: 50vw;
    min-width: 300px;
    height: 200px;
    font-size: 1.2rem;
    font-family: Geist;
}

.btn.btn-primary {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-600);
    padding-block: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 8);
    border-width: 1px;
    border-radius: calc(infinity * 1px);
    margin-top: calc(var(--spacing) * 6);
    color: var(--color-gray-100);
    border-style: solid;
    font-size: 1.25rem;
    font-family: Geist;
}

.btn.btn-primary:hover {
    cursor: pointer;
    background-color: var(--color-gray-700);
}