* {
    /* important */
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /* font */
    font-family: 'Roboto Mono', monospace;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    /* colors */
    background-color: var(--maingrey);
    color: #ffffff;

    /* overflow */
    overflow-x: hidden;
}

.justify-content-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

span {
    color: var(--mainfont);
}

a {
    text-decoration: none;
    color: var(--white);
}

ul {
    list-style-type: none;
}

/* input */

input:focus {
    outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

:root {
    /* main colors */
    --maingrey: #0a0b12;
    --mainblue: #191923 ;
    --white: #ffffff;
    --black: #000000;

    /* font colors */
    --whitefont: #ffffff;
    --mainfont: #0070d8; 

    /* font sizes */
    --h1bigsize: 3.5rem;
    --h2size: 2rem;
    --cardtitlesize: 1.4rem;
    --pbigsize: 1.4rem;
    --psmallsize: 1rem;
}

.cardtitle {
    font-size: var(--cardtitlesize);
}

.h1bigsize {
    font-size: var(--h1bigsize);
}

.h2size {
    font-size: var(--h2size);
}

.pbigsize {
    font-size: var(--pbigsize);
}

.psmallsize {
    font-size: var(--psmallsize);
}

/* important responsives */
@media only screen and (max-width: 640px /* Mobile */) {
    :root {
        /* responsive font sizes */
        --h1bigsize: 2rem;
        --h2size: 1.7rem;
        --pbigsize: 1rem;
        --psmallsize: 1rem;
    }
}

@media only screen and (max-width: 450px/* Mobile */) {
    :root {
        /* responsive font sizes */
        --h1bigsize: 1.6rem;
        --h2size: 1.1rem;
        --pbigsize: 1rem;
        --psmallsize: 1rem;
    }
}

@media only screen and (max-width: 1395px /*  mobile etc. */) {
    #header .headercontent #nav {
        display: none;
    }

    #header .headercontent #head  {
        margin: 3rem 0 0 1rem !important;
        position: relative !important;
        transform: none !important;
    }

    #header .headercontent #head .headcontent {
        margin-right: 1rem !important;
    }

    #main .maincontent #feature .featurescontent{
        margin: 9rem 0 0 0 !important;
    }

    #main {
        margin: 1rem !important;
    }
}

@media only screen and (max-width: 1507px /* contact */) {
    #main .maincontent #faq .alertbtns {
        margin: 5rem 0 0 0;
    }
}

/* header */

/* nav */
#header .headercontent #nav {
    /* style */
    max-width: 300px;
    background-color: var(--mainblue);
    border: none;
    border-radius: 5px;

    /* positioning */
    margin: 0 0 0 3rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#header .headercontent #nav .list ul li {
    /* style */
    width: 200px;
    background-color: var(--maingrey);
    border: none;
    border-radius: 5px;

    /* positioning */
    padding: .8rem;
    margin: 1rem;

    /* hover transiton */
    transition: background-color .5s;
}

#header .headercontent #nav .list ul li:hover {
    /* hover style */
    background-color: var(--mainfont);

    /* hover cursor */
    cursor: pointer;
}

#header .headercontent #nav .list .active {
    /* styling */
    background-color: var(--mainfont);
}

#header .headercontent #nav .list ul .logo {
    /* style */
    width: 100px;

    /* positioning */
    display: block;
    margin: 1rem auto;
}

/* head */
#header .headercontent #head {
    /* positioning */
    margin: 0 0 0 22rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#header .headercontent #head .headcontent {
    /* style */
    background-color: var(--mainblue);
    border: none;
    border-radius: 5px;

    /* positioning */
    margin-right: 3rem;
}

#header .headercontent #head .headcontent #welcome {
    /* style */
    padding: 1rem;
    margin: 1rem;
}

#header .headercontent #head .headcontent #welcome .welcometop {
    /* style */
    padding: .9rem;
}   

#header .headercontent #head .headcontent #welcome .welcomebottom {
    /* style */
    margin: 1.5rem 0 1.5rem 0;
    padding: 2rem;
    background-color: var(--maingrey);
    border: none;
    border-radius: 5px;
}

/* main */

#main {
    margin: 3rem;
}

/* features */

#main .maincontent #feature .featurescontent{
    /* style */
    background-color: var(--mainblue);
    border: none;
    border-radius: 5px;

    /* positioning */
    margin: 45rem 0 0 auto;
    padding: 1rem;
}

#main .maincontent #feature .featurescontent .features {
    /* positioning */

}

#main .maincontent #feature .featurescontent .title {
    /* positioning */
    text-align: center;
    margin: 1rem;
}

#main .maincontent #feature .featurescontent .features .feature {
    /* style */
    width: 400px;
    margin: 1rem;
    padding: 1rem;
    border: none;
    border-radius: 5px;
    background-color: var(--maingrey);

    /* hover transition */
    transition: border .2s;
}

#main .maincontent #feature .featurescontent .features .feature h2 { 
    /* style */
    margin: .7rem 0;
}

#main .maincontent #feature .featurescontent .features .feature p { 
    /* style */
    color: #ffffff7c;
}

#main .maincontent #feature .featurescontent .features .feature:hover {
    /* hover border */
    border: 2px solid var(--mainfont);

}

#main .maincontent #feature .featurescontent .features .feature .featureicon i {
    /* style */
    font-size: 30px;
    background-color: var(--mainblue);
    color: var(--mainfont);
    height: 50px;
    width: 50px;
    border: none;
    border-radius: 50%;
    padding: .6rem;
    

    /* positioning */
    display: flex;
    justify-content: center;
}

#main .maincontent #faq {
    margin-top: 9rem;
}

#main .maincontent #faq .faqcontent {
    /* positioning*/
}

#main .maincontent #faq .faqcontent .alertbtns {
    /* style */
    background-color: var(--mainblue);
    border: none;
    border-radius: 5px;
    padding: 1rem;
    width: 250px;
    margin-left: 2rem;
}

#main .maincontent #faq .faqcontent .faq {
    background-color: var(--mainblue);
    border: none;
    border-radius: 5px;

    padding: 1rem;

    width: 1130px;
}

#main .maincontent #faq .faqcontent .faq .row {
    /* style */
    background-color: var(--maingrey);
    border-top: 2px solid var(--mainfont);
    border-radius: 5px;

    /* positioning */
    padding: .5rem;
    margin: 1rem 0 0 0;
}

#main .maincontent #faq .alertbtns .alertbtn {
    /* style */
    width: 200px;
    background-color: var(--maingrey);
    border: none;
    border-radius: 5px;

    /* positioning */
    display: block;
    padding: 1rem;
    margin-top: 1rem;

    /* hover transiton */
    transition: background-color .5s;
}

#main .maincontent #faq .alertbtns .alertbtn:hover {
    /* hover style */
    background-color: var(--mainfont);
}

/* shop */
#main .maincontent #shop .shopcontent {
    /* style */
    background-color: var(--mainblue);
    border: none;
    border-radius: 5px;

    /* positioning */
    margin-top: 9rem;
    padding: 1rem;
}

#main .maincontent #shop .shopcontent .title {
    /* positioning */
    text-align: center;
    margin: 1rem;
}

#main .maincontent #shop .shopcontent .shop .card {
    /* style */
    width: 315px;
    margin: 1rem;
    padding: 1rem;
    border-top: 2px solid var(--mainfont);
    border-radius: 5px;
    background-color: var(--maingrey);
}

#main .maincontent #shop .shopcontent .shop .card .cardcontent {
    /* positioning */
    margin: 0 0 1rem 0;
}

#main .maincontent #shop .shopcontent .shop .card .cardcontent ul {
    margin-top: 1em;
}

#main .maincontent #shop .shopcontent .shop .card .cardcontent hr {
    /* style */
    width: 10%;
    background-color: var(--mainfont);
    border: 1px solid var(--mainfont);

    /* positioning */
    margin: .4rem 0 .4rem 0;
}

#main .maincontent #shop .shopcontent .shop .card img {
    max-width: 100%;
}

#main .maincontent #shop .shopcontent .shop .card .purchasebtn {
    /* style */
    width: 70%;
    background-color: var(--mainblue);
    border: none;
    border-radius: 5px;
    text-align: center;

    /* positioning */
    display: block;
    padding: 1rem;
    margin-top: 1rem;

    /* hover transition */
    transition: width .5s, background-color .5s;
}

#main .maincontent #shop .shopcontent .shop .card .purchasebtn:hover {
    /* hover animation */
    width: 100%;
    background-color: var(--mainfont);
    cursor: pointer;
}