<!DOCTYPE html>
<html>
<head>
	<title>Goverment Portal for Document Visualization</title>

	<!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />

    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="#000">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#000">
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#000">

    <!-- //Meta tag Keywords -->
    
    <!-- Bootstrap -->
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!-- CSS -->
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>
<style>
    body,html{
        margin: 0px;
        height: 100%;
    }

    .container{
        height:100%;
        position: absolute;
    }
    .card-overlay {
  background: rgba(0, 0, 0, 0.7);
  height:100%; position: absolute;
  width: 100%;
}
a{
    display:inline-block;
    width: 300px;
    margin:50px;
    background: transparent;
    border: 5px white;
    border-radius: 30%;
}

.col-lg{
    border: 1px white;
    border-radius: 20%;
    color: white;
}
    .bg {
  width: 100%;
  height: 100%;
  background-image: url("https://images.pexels.com/photos/7412057/pexels-photo-7412057.jpeg?cs=srgb&dl=pexels-monstera-7412057.jpg&fm=jpg");
  height: 100%; 

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
    </style>
</style>
<body>
<div class="bg">
    <div class="container">
        </div>
        <div class = "card-overlay" style="font-family: 'Cinzel';">
          <div style="text-align: center; height: 20%;">
            <img src = "https://cdn-icons-png.flaticon.com/512/609/609120.png" style="width: 120px; height: 120px; margin-top: 30px;">
          </div>
            <h1 style="text-align: center; font-size: 72px; color: white; margin-top: 6vh; font-weight: bold;">CHAOTIC CLARITY</h1>
            <h3 style="text-align: center; font-size: 3vw; color: white;">A Platform for Visualization and Simplification.</h3>
            <div style="width:100%; text-align: center; margin-top: 1vh; font-size: 1vw;">
              <a class="btn btn-outline-light btn-lg" href="/register" role="button">GET STARTED!</a>
              <a class="btn btn-outline-light btn-lg" href="/about" role="button">ABOUT US</a>
            </div>
        </div>
</div>
</body>
</html>