@charset "UTF-8";
@font-face {
    font-family: "Mona Sans";
    src: url(fonts/MonaSans-Regular.woff2) format('woff2');
    font-style: regular;
}

@font-face {
    font-family: "Mona Sans";
    src: url(fonts/MonaSans-ExtraBoldItalic.woff2) format('woff2');
    font-style: italic;
    font-weight: 800;
}

@font-face {
    font-family: "Mona Sans";
    src: url(fonts/MonaSans-Italic.woff2) format('woff2');
    font-style: italic;
    font-weight: 400;
}

@font-face {
    font-family: "Mona Sans";
    src: url(fonts/MonaSans-SemiBold.woff2) format('woff2');
    font-style: regular;
    font-weight: 600;
}

@font-face {
    font-family: "Mona Sans";
    src: url(fonts/MonaSans-SemiBold.woff2) format('woff2');
    font-style: regular;
    font-weight: 700;
}

@font-face {
    font-family: "Mona Sans";
    src: url(fonts/MonaSans-Medium.woff2) format('woff2');
    font-style: regular;
    font-weight: 500;
}

 *, *:before, *:after {
	 -webkit-box-sizing: inherit;
	 -moz-box-sizing: inherit;
	 box-sizing: inherit;
}
 html, body {
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 margin: 0;
	 padding: 0;
	 -webkit-transition: 0.5s;
	 transition: 0.5s;
	 background: #fff;
	 cursor: default;
	 color: #6AF961;
	font-family: "Mona Sans";
     background-color: #0B3D3B;
     overflow-x: hidden; 
}


h1 .first_part {
    color: #ffffff;
    text-align: left;
    font-family: "Mona Sans";
    font-style: italic;
    font-weight: 800;
    font-size: 7vw; 
    line-height: normal;
    position: absolute;
    top: 55%; /* Adjust as needed */
    left: 0; /* Ensures first_part starts from the left edge */
}

h1 .second_part {
    color: #ffffff;
    text-align: left;
    font-family: "Mona Sans";
    font-style: italic;
    font-weight: 400;
    font-size: 7vw; 
    line-height: normal;
    position: absolute;
    top:55%; /* Keep it aligned with first_part */
    left:19%; /* Adjust to create space between first_part and second_part */
}

h2 .first_part {
    color: #6AF961;
    text-align: left;
    font-family: "Mona Sans";
    font-style: italic;
    font-weight: 800;
    font-size: 2vw; 
    line-height: normal;
    position: absolute;
    top: 70%; /* Adjust as needed */
    left: 16%; /* Ensures first_part starts from the left edge */
}

h2 .second_part {
    color: #6AF961;
    text-align: left;
    font-family: "Mona Sans";
    font-style: italic;
    font-weight: 400;
    font-size: 2vw; 
    line-height: normal;
    position: absolute;
    top:70%; /* Keep it aligned with first_part */
    left:30%; /* Adjust to create space between first_part and second_part */
}


h3 {
    color: #6AF961;
    font-size: 5vw;
    font-family: Mona Sans;
    font-style: italic;
    font-weight: 800;
    word-wrap: break-word;
    text-align: center;
    position: absolute;
    top: 99%;
    left: 50%;
    transform: translateX(-50%);
}

.aboutmeline {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
}




strong {
    color: #6AF961;
    text-align: center;
    font-family: "Mona Sans";
    font-size: 1.3vw; 
    font-style: italic;
    font-weight: 900;
    line-height: normal;
    position: absolute;
    bottom: 0%; 
    right: 0.5%; 
}

/* Media queries for adjusting font sizes at different screen widths */
@media screen and (max-width: 768px) {
    h1 {
        font-size: 10vw;
    }

    strong {
        font-size: 3vw;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 20vw;
		text-align: center;
		bottom: 30%;
    }

    strong {
        font-size: 4vw;
    }
}


.header{
	min-height: 100vh;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lightning {
    position: absolute;
    top: 77%; /* Move the SVG down by 50% of the viewport height */
    left: 80%; /* Move the SVG horizontally by 50% of the viewport width */
    transform: translate(-50%, -50%); /* Center the SVG precisely */
}

.firstline {
    width: 100%;
}

.menu {
    position: absolute;
    top: 1%; /* Move the SVG down by 50% of the viewport height */
    left: 1%;
    z-index: 1;
}

.menuText1 {
    position: absolute;
    top: 2.7%; /* Move the SVG down by 50% of the viewport height */
    left: 1.9%;
    z-index: 1;
}

.menuText2 {
    position: absolute;
    top: 2.7%; /* Move the SVG down by 50% of the viewport height */
    left: 10.5%;
    z-index: 1;
}
.menuText3 {
    position: absolute;
    top: 2.7%; /* Move the SVG down by 50% of the viewport height */
    left: 23.2%;
    z-index: 1;
}
.menuText4 {
    position: absolute;
    top: 2.7%; /* Move the SVG down by 50% of the viewport height */
    left: 35.4%;
    z-index: 1;
}
svg{
	position: absolute;
	bottom: 0;
	width: 100%;
	top: 0;
	z-index: 0;
	right: 0;
	left: 0;
}