/**************************************************************************
CSS for the home page of the website
**************************************************************************/

* {

    margin: 0;
    padding: 0;

}

*:focus {

    outline: none;

}

html {

    scroll-behavior: smooth;
    font-size: 22px;
    overflow: hidden;
    overscroll-behavior: none;

}

body{

    /* background-color: #173347; */
    height: 100dvh;
    width: 100vw;
    /* background-color: #173347; */
    /* background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); */
    /* background-position: center center; */
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-size: cover;
    animation: gradient 10s infinite alternate;
    background: linear-gradient(-45deg, #173347, #0f1e2a, #153247, #091720);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;

}

.bodyContainer{

    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.homeImg{

    width: clamp(300px, 85vw, 1000px);
    /* transform: 
            perspective(5000px)
            rotateY(var(--rotateY))
            rotateX(var(--rotateX)); */

    filter: drop-shadow(20px 14px 3px rgba(0, 0, 0, 0.1));

}

.buttonContainer{

    width: clamp(320px, 100%, 800px);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 30px;

}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.button {
    color: #cc7829;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    overflow: hidden;
    margin: 5px 0px 0px 10px;
    padding: 15px 30px 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "all-round-gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    border-radius: 50px;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    filter: drop-shadow(20px 14px 3px rgba(0, 0, 0, 0.1));

    &::before {
        content: '';
        position: absolute;
        z-index: -2;
        left: -50%;
        /* top: -50%; */
        width: 200%;
        height: 125%;
        background-color: rgba(204, 120, 41, 0.4);
        background-repeat: no-repeat;
        animation: rotate 10s ease-in infinite;
        transition: 0.3s ease-in-out;
    }

    &::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 2px;
        top: 4px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        background: #112737;
        border-radius: 50px;
        transition: 0.3s ease-in-out;
        /* box-shadow: 0.1rem 0.1rem 0.3rem rgba(255, 255, 255, 0.1),
                -0.05rem -0.05rem 0.25rem rgba(233, 233, 236, 0.1); */
    }
}

.buttonContainer a{

    text-decoration: none;

}

.button:hover{

    padding: 20px 30px;
    margin: 0px;
    filter: drop-shadow(20px 14px 3px rgba(0, 0, 0, 0.1));

}

.button:hover:before{

    background-color: rgba(204, 120, 41, 0.8);

}

.button:hover:after{

    background: #163246;
    left: 6px;
    top: 6px;

}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media screen and (max-width: 1635px) {

    .homeImg {

        width: clamp(300px, 100vw, 850px);

    }

}

@media screen and (max-width: 1025px) {

    html {

        font-size: 20px;

    }
}

@media screen and (max-width: 750px) {

    .homeImg {

        width: clamp(300px, 100vw, 785px);

    }
    
}

@media screen and (max-width: 600px) {

    .buttonContainer{

        flex-direction: column;
        margin-top: 0px;

    }

    .buttonContainer a{
        margin-top: 35px;   
    }

}

@media screen and (max-width: 426px) {

    html {

        font-size: 17px;

    }
}

@media screen and (max-height: 550px) and (min-width: 321px) {

    .homeImg {
    
        width: clamp(425px, 100vh, 550px);
    
    }
}