---
import 'bootstrap/dist/css/bootstrap.css'
---

<div class="head">
    <!-- this is the main container -->
    <div class="map">
        <img src="https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/indiamap.png" id="left-img">
    </div>
    <!-- this is the map image -->
    <div class="registration">
        <!-- this is the hackathon heading -->
        <h2 class="hack-heading" style="color: #000080ff;">IIT Bombay-FOSSEE-GIS/OSHW, IITTNiF &amp; <br> ICFOSS presents</h2>
        <!-- this is the hackathon image -->
        <div class="hack-img">
            <img src="https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/right-img.png" id="right-img">
        </div>
        <!-- this is the hackathon important dates -->
        <div class="btn-Container">
            <p>
                Registration opens: April 29, 2023 <br>

                Registration closes: June 10, 2024 <br>
                
                Hackathon start date : June 12, 2024 <br>
                
                Result Declaration: July 31, 2024
            </p>
            <!-- this is the register button -->
            <div class="hack-button">
                <div id="slide"></div>
                <a href="#register">Register</a>
            </div>
        </div>
    </div>
</div>

  <style>
    .head{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding-top: 20vh;
        /* width: 100vw; */
        width: auto;
        height: 100vh;
        padding: 1vh;;
        background-color: rgb(252, 230, 188);
        animation: zoomIn 3s; 
        z-index: 1000;
    }
    .map img {
        height: 60vh;
        width: 90%;
        margin-top: 20px;
        vertical-align: middle;
        border-style: none;
    }
    .registration{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .hack-heading{
        font-size: 4.6vh;
        text-align: center;
        word-wrap: break-word;
    }
    .hack-img img{
        margin-top: 20px;
        height: 31vh;
        width: 100%;
    }

    .btn-Container{
        background-color: rgb(86, 50, 1);
        color: white;
        font-weight: 700;
        font-size: 3vh;
        padding: 1vh 4vw;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 2vh; 
    }

    .hack-button {
        display: flex;
        flex-direction: column;
        padding: 1vh 2vw;
        z-index: 0;
        width: 20vw;
        max-width: 40vw;
        border: 2px solid blue;
        margin: 20px 20px 20px 20px;
        color: blue;
        background-color: white;
        text-decoration: none;
        font-size: 2vh;
        letter-spacing: 1.5px;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        overflow: hidden;
        box-shadow: 0 0 5px #000080, 0 0 5px #000080 inset;
    }

    .hack-button {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .hack-button a {
        position: relative;
        text-decoration: none;
        transition: all .35s ease-Out;
    }

    #slide {
        width: 100%;
        height: 100%;
        left: -400px ;
        background: #BFC0C0;
        position: absolute;
        bottom: 0;
        transition: all .35s ease-Out;
    }

    .hack-button:hover #slide {
        left: 0;
        background-color: rgb(6, 6, 77);
    }
    .hack-button:hover a{
        color: white;
    }

    @keyframes zoomIn {
        from {
            transform: scale(1.3);
        }
        to {
            transform: scale(1);    
        }
    }

    @media screen and (max-width: 748px) {
        .head{
            /* flex-direction: row; */
            padding-top: 4vh;
            flex-direction: column-reverse;
            position: relative;
            top: 7vh;
            margin-bottom: 10vh;
            height: 100%;
        }

        .hack-heading{
            font-size: 3vh;
        }

        .hack-button{
            width: 60vw;
        }

        .hack-img img{
            height: 25vh;
            width: 100%;
        }

        .map img{
            height: 40vh;
        }
        .btn-Container{
            font-size: 2vh;
            padding: 0vh 3vw;
        }
    }

    @media screen and (min-width: 749px) and (max-width: 982px) {
        
        .head{
            margin-top: 6vh;
        }
        .map img{
            height: 40vh;
        }
    }
    @media screen and (max-width: 982px) {
        
        .hack-heading{
            font-size: 4.5vh;
        }
        .btn-Container{
            font-size: 2vh;
            padding: 0vh 2vw;
        }
        .btn-Container p{
            padding: 1vh;
            margin: 0;
        }
        .registration{
            padding: 1vh;
        }
        @keyframes zoomIn {
            /* Empty keyframes animation */
        }
    }

  </style>