* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background: linear-gradient(rgb(18, 22, 26),rgb(2, 3, 3));
    color: white;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    margin: 0;
    overflow-y: hidden;
}

h1 {
    font-weight: 900;
    text-transform: uppercase;
    /* font-style: italic; */
    letter-spacing: 0.2rem;
    font-size: 3rem;
}

p {
    font-weight: 200;
    font-size: 1.5rem;
}

a {
    text-decoration: none;
}

a:hover {
    cursor: pointer;
}

.header {
    border-bottom: 1px solid rgb(51, 61, 71);
    padding: 1.5rem 5rem;
    background-color: #101317;

    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.header__right {
    display: flex;
    align-items: center;
    justify-self: flex-end;
}

.main-btn:hover {
    cursor: pointer;
}

.main-btn {
    border: 1px solid rgb(27, 27, 27);
    /* border: 1px solid rgb(235, 235, 235); */
    background-color: #00ffe1;
    box-shadow: 7px -7px 0px 0px #18ff93;
    color: rgb(14, 14, 14);
    padding: 0.8rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-weight: 900;
    margin: 0 0.5rem;
    display: flex;
    align-items: center;
    transition: 0.1s;
    /* min-width: 15rem; */
}

.main-btn:hover {
    transition: 0.1s;
    background-color: #01f0d4;
    box-shadow: 5px -5px 0px 0px #18ff93;
}

.main-btn > i {
    transition: 0.1s;
    color: black;
    margin-right: 1rem;
    font-size: 1.5rem;
}

        .main-wrapper {
            top: 0;
            bottom: 0;
            position: absolute;
            height: 100vh;
            width: 100%;
            z-index: -1;

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

        .main-info {
            display: flex;
            align-items: center;
            justify-self: center;
            flex-direction: column;
	    
            box-shadow: -1px 0px 99px 1px rgba(0,0,0,0.75);
            background-color: #090C0E;
            border: 1px solid rgb(51, 61, 71);
            padding: 3rem;
        }

.main-info > h1 {
    margin: 1rem 0 4rem 0;
}

.main-info > p {
    margin: 0.2rem;
}

.color-highlight {
    color: #00ffe1;
}

.particles {
    width: 100%;
    height: 100vh;
    z-index: -2;
    position: absolute;
}

.social-menu {
    /* width: 500px; */
    gap: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-menu > a {
    color: white;
    text-transform: uppercase;
}

.social-menu > a:hover {
    color: #00ffbf;
    transition: 0.1s;
}

.social-menu > a > i {
    transition: 0.1s;
    color: #00ffe1;
    font-size: 1.3rem;
    margin-right: 0.2rem;
}

.footer {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.8rem;

    background-color: #040505;
    border-top: 1px solid rgb(20, 24, 27);
}

.footer > small {
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 0.1rem;
}