@font-face {
        font-family: 'gothic';
        src: url('league.otf') format("opentype");
}

@font-face {
        font-family: 'body';
        src: url('cor.otf') format("opentype");
}

        * {
            margin: 0px;
            padding: 0px;
        }
        
        .hide{
  	overflow: hidden;
  	background-color: black;
  	position: fixed; /* Set the navbar to fixed position */
  	top: 0; /* Position the navbar at the top of the page */
  	width: 100%; /* Full width */
	height: 100%;
	z-index:3;
	display: none;
        }
        
        .hide p {
        display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            top: 20vh;
            color: white;
            text-align: center;
            font-size: 6vw;
            font-weight: 700;
  	    font-family: 'gothic'; 
        
        }
        
        @media only screen and (max-width: 600px) {
   	.hide {
        display: initial;
    }
}
        
        body, html{
	/*width:100%;*/
	/*height:100%;*/
        }
        
        body {
    	margin: 0;
    	width: 100vw;
    	max-width: 100vw;
    	height: 100vh;
	}

  
        /* Styling the parallax1 background */
        .parallax-1 {
            width: 100%;
            height: 100%;
            background: url('citybackground.jpg');
            background-size: 100% 100%;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }
  
        /* Styling the title of parallax1 */
        .parallax-1 h2 {
            display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            top: 30vh;
            left: -26vw;
            width: 48vw;
            height: 18vh;
            background-color: #07325b;
            color: white;
            text-align: center;
            /* font-size: 120px; */
            font-size:6vw;
            font-weight: 800;
  	    font-family: 'gothic'; 
    	    white-space: nowrap;     
        }
        
       /* Styling the paragrah of parallax1 */
        .parallax-1 p {
           display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            top: 38vh;
            left: -33vw;
            width: 34vw;
            height: 19vh;
            background-color: #07325b;
            color: white;
            text-align: center;
            font-size: 1.5vw;
            font-weight: 200;
  	    font-family: 'gothic'; 

        }
  
        /* Styling the parallax2 background*/
        .parallax-2 {
            width: 100%;
            height: 110%;
            background: url('server.gif');
            background-size: 100% 100%;
            background-attachment: fixed;
        }
  
        /* Styling the title of parallax2 */
        .parallax-2 h2 {
            display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            top: 50vh;
            width: 50vw;
            height: 16vh;
            background-color: #07325b;
            color: white;
            text-align: center;
            font-size: 3vw;
  	    font-family: 'gothic'; 
        }
        
        .para-2 p.header{
        
            display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            /*top: 20%; */
            top: 20vh;
            /*width: 45%; */
            /*height: 15%; */
            width: 45vw;
            height: 15vh;
            background-color: #052543;
            color: white;
            text-align: center;
            font-size: 1.8vw;
            font-weight: 200;
  	    font-family: 'gothic'; 
        
        
        }
        
        .para-2 p.footer{
            display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            /* margin-top: 20vh; */
            margin-top: 20vh;
            width: 45%;
            /* height: 10%; */
            color: white;
            text-align: center;
            font-size: 2vw;
            font-weight: 200;
  	    font-family: 'gothic'; 
        }
        
        .button_contain {
        display: flex;
        /*margin-top: 15%;*/
        margin-top: 40vh;
        justify-content: center;
  	align-items: center;
        }
        
        
              
        .button_contain button{
        display:flex;
        align-items:center;
        justify-content:center;
        margin-left:5vw;
        margin-right:5vw;
        background-size: 100% 100%;
        }
        
        .button_contain button.one{
        background-image: url('system_d.png');
        height: 10vh;
        width: 12vw;
        }
        
        .button_contain button.two{
        background-image: url('ufw_new.png');
        height: 10vh;
        width: 10vw;
        }
        
        .button_contain button.three{
        background-image: url('openvpn.png');
        height: 10vh;
        width: 12vw;
        }
        
        
        .button_contain2 {
        display: flex;
        margin-top: 40vh;
        justify-content: center;
  	align-items: center;
        }
        
        
        .button_contain2 button{
        display:flex;
        align-items:center;
        justify-content:center;
        margin-left:5vw;
        margin-right:5vw;
        background-size: 100% 100%;
        }
        
        .button_contain2 button.one{
        background-image: url('jellyfin.png');
        height: 10vh;
        width: 10vw;
        }
        
        .button_contain2 button.two{
        background-image: url('lanraragi.png');
        height: 12vh;
        width: 6vw;
        }
        
        .button_contain2 button.three{
        background-image: url('netdata.png');
        height: 10vh;
        width: 14vw;
        }
        
        
        
        
        .parallax-3 {
            width: 100%;
            height: 120%;
            background: url(
'dark_bubbles.jpg');
            background-size: 100% 100%;
            background-attachment: fixed;
        }
        
        .parallax-3 h2 {
            display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            top: 15vh;
            width: 35vw;
            height: 16vh;
            background-color: #07325b;
            color: white;
            text-align: center;
            font-size: 3vw;
	    /* font-size: clamp(30px, 5vw, 64px); */
  	    font-family: 'gothic'; 
        }
        
        .parallax-3 p{
        
            display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            top: 22vh;
            width: 50vw;
            height: 25vh;
            color: white;
            background-color: #07325b;
            text-align: center;
            font-size: 1.8vw;
            font-weight: 200;
  	    font-family: 'gothic'; 
        
        
        }
        
  
        .para-1 {
            height: 170%;
            background-color: #052543;
            color: white;
        }
  
          .para-1 h2 { 
            display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            top: 7vh;
            width: 50vw;
            height: 16vh;
            <!-- background-color: #0b6198; -->
            text-align: center;
            font-size: 3vw;
  	    font-family: 'gothic'; 
        
        }
        
           .para-1 p { 
            display: flex;
  	    justify-content: center;
  	    align-items: center;
            margin: auto;
            position: relative;
            top: 0vh;
            width: 50vw;
            height: 20vh;
            <!-- background-color: #0b6198; -->
            text-align: center;
            font-size: 1.4vw;
  	    font-family: 'gothic'; 
        
        }
  
        .para-2 {
           height: 100%;
            background-color: #052543;
            color: white;
        }
       
        
        .para-3 {
            display: flex;
            justify-content: center;
  	align-items: center;
            padding: 1vw;
            background-color: #333f4a;
            color: black;
        }
        
        .para-3 p{
  	font-family: 'body';
        font-size: 1vw;
        font-weight: 700;
        padding-right:1vw;
        }
        
        
        .left h3{
           display: flex;
  	    justify-content: center;
            margin: auto;
            position: relative;
            top: 10vh;
            left: -20vw;
            width: 30vw;
            height: 10vh;
            text-align: center;
            font-size: 3vw;
            font-weight: 700;
  	    font-family: 'gothic'; 
}


        .left p{
           display: flex;
  	    /* justify-content: center; */
            /* margin: auto; */
            margin-left: 15vw;
            /* position: relative; */
            top: 1vh;
            /* left: -20%; */
            width: 30vw;
            height: 30vh;
            text-align: center;
            font-size: 1.25vw;
            font-weight: 200;
  	    font-family: 'gothic'; 
  	}
  	
  	
  	 .left img{
  	 margin-right: 22%;
  	 height: 18%;
  	 width: 18%;

  	 }
  	 
  	 .left_contain{
  	 display: flex;
  	 margin-bottom: 6vh;
  	 }
  	 


	.right h3{
           display: flex;
  	    justify-content: center;
            margin: auto;
            position: relative;
            top: 10vh;
            left: 20vw;
            width: 30vw;
            height: 10vh;
            text-align: center;
            font-size: 3vw;
            font-weight: 700;
  	    font-family: 'gothic';  

}

	.right p {
  	    display: flex;
  	    /* justify-content: center; */
            /* margin: auto; */
            /* margin-right: 15vw; */
            /* position: relative; */
            top: 1vh;
            /* left: -20%; */
            width: 30vw;
            height: 10vh;
            text-align: center;
            font-size: 1.25vw;
            font-weight: 200;
  	    font-family: 'gothic'; 

}


	.right_images_contain{
	
	
	}
  	 
  	 .img1 {
  	position: relative;
  	z-index: 2;
  	left: 27vw;
  	top: 8vh;
  	width: 15vw;
  	height: auto;
}

	.img2 {
  	position: relative;
  	z-index: 1;
  	left: -4vw;
  	top: 1vh;
  	width: 20vw;
  	height: auto;
 
}
  	 
  	 .right_contain{
  	 display: flex;
  	 margin-bottom: 1vh;
  	 }