@font-face {
    font-family: 'Garnett Semibold'; /*a name to be used later*/
    src: url("./assets/fonts/Garnett-Semibold.woff"); /*URL to font*/
}

@font-face {
    font-family: 'Garnett Medium'; /*a name to be used later*/
    src: url("./assets/fonts/Garnett-Medium.woff"); /*URL to font*/
}

*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    background: #000000;
}

.maincontainer{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1vh;
    overflow-y: hidden;
    padding-top: 5vh;
    height: 100vh;
    width: 100vw;
    position: relative;
    background-image: url("./assets/images/spiralcam.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 45vw;
}

.oureyelogo{
    width: 35vw;
    background: transparent;
}

.gradientheading{
    font-family: 'Garnett Semibold';
    font-style: normal;
    font-weight: 600;
    font-size: 3vw;
    line-height: 10vh;
    background: linear-gradient(50.19deg, #8A2387 0%, #E94057 50%, #F27121 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.avairlogo{
    width:15vw;
    background: transparent;
}

.redirectButton{
    background: linear-gradient(50.19deg, #8A2387 0%, #E94057 50%, #F27121 100%);
    border-radius: 15px;    
    padding: 2vh 5vw;
    border: none;
    color: white;
    font-family: "Garnett Medium";
    font-weight: 300;
    font-size: 1vw;
}


/* for mobile devices */
@media (min-width: 320px) and (max-width: 480px) {

    .maincontainer{
        padding-top: 5vh;
        background-size: 100vw;
        height: 85vh;
    }


    .oureyelogo{
        width: 55vw;
        background: transparent;
    }

    .gradientheading{
        font-size: 8vw;
    }


    .avairlogo{
        width:45vw;
        background: transparent;
    }


    .redirectButton{
        background: linear-gradient(50.19deg, #8A2387 0%, #E94057 50%, #F27121 100%);
        border-radius: 15px;    
        padding: 2vh 5vw;
        border: none;
        color: white;
        font-weight: 400;
        font-size: 4vw;
    }
}

/* for ipads and tablets */
@media (min-width: 481px) and (max-width: 768px) {

    .maincontainer{
        padding-top: 5vh;
        background-size: 100vw;
    }


    .oureyelogo{
        width: 55vw;
        background: transparent;
    }

    .gradientheading{
        font-size: 8vw;
    }


    .avairlogo{
        width: 45vw;
        background: transparent;
    }


    .redirectButton{
        background: linear-gradient(50.19deg, #8A2387 0%, #E94057 50%, #F27121 100%);
        border-radius: 15px;    
        padding: 2vh 5vw;
        border: none;
        color: white;
        font-weight: 400;
        font-size: 10vw;
    }
}

/* for small screens and laptops */
@media (min-width: 769px) and (max-width: 1024px) {
}

/* for Desktops and large screens */
@media (min-width: 1025px) and (max-width: 1200px) {
}

/* fot large screens */
@media (min-width: 1201px) {
}