/* Scrollbar */

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--secondary);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Allgemein  */

:root {

    --primary: black;
    --secondary: #2CC1FF;
    --third: #F9808B;
}

.third {

    color: var(--third)!important;
}

body {

    font-family: 'Poppins';
    max-width: 100vw;
    max-height: 100vh;
    overflow-x: hidden;
    background-color: rgb(255, 255, 255);
    position: relative;
    color: rgb(0, 0, 0);

}

main {

    padding-bottom: 6rem!important;
}

section {

    padding: 30px 0 30px 0;
}

.center {

    display: flex;
    justify-content: center;
    align-items: center;
}

.center-bottom {

    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.center-grid {

    display: grid;
    justify-content: center;
    align-items: center;
}

.center-align {

    display: flex;
    align-items: center;
}

.fh {

    height: 100%!important;
}

.fw {

    width: 100%!important;
}

.flex-end {

    display: flex;
    justify-content: flex-end;
}

.flex-start {

    display: flex;
    justify-content: flex-start;
}

.flex {

    display: flex;
}

.grid {

    display: grid;
}

.h50 {

    height: 50%;
}

.ta {

    text-align: center;
}

.w-80 {

    width: 80%!important;
}


.margin-b-10 {

    margin-bottom: 10px;
}

.margin-b-20 {

    margin-bottom: 20px;
}

.margin-b-30 {

    margin-bottom: 30px;
}

.margin-b-40 {

    margin-bottom: 40px;
}

.margin-b-50 {

    margin-bottom: 50px;
}

.margin-b-220 {

    margin-bottom: 220px;
}

.margin-r-20 {

    margin-right: 20px;
}

.margin-l-10 {

    margin-left: 10px;
}

.margin-t-20 {

    margin-top: 20px;
}

.margin-t-80 {

    margin-top: 80px;
}

.text-left {

    text-align: left;
}

.text-right {

    text-align: right;
}

.relative {

    position: relative;
}

.rightfix {

    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
}

.margin-home {

    margin-top: 5rem;
}

/* Grids */

.grid-2-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
}

.grid-2-1-intro {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.grid-2-1-small {
    display: grid;
    grid-template-columns: 0.01fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 0px;
    width: 100% !important;
}

.grid-2-1-form {
    display: grid;
    grid-template-columns: 1fr 0.4fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
}

.grid-2-1-frame {
    display: grid;
    grid-template-columns: 1fr 0.1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
}

.grid-2-1-device {
    display: grid;
    grid-template-columns: 0.1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
}

.grid-2-1-nft {
    display: grid;
    grid-template-columns: 0.05fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
}

.grid-2-1-currentnft {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
}

.grid-2-1-currentnft-option {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
}

.grid-3-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.grid-3-1-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.grid-4-1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
}