/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* // */

/* animações */

/* 
@keyframes text-glow{
    0%{text-shadow: 0 0 10px #000ff9;}
    100%{text-shadow: 0 0 10px #ececec;}
}
 */

@keyframes draw-border {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
    }
    25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 0%);
    }
    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%);
    }
    75% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes erase-border {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%);
    }
    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 0%);
    }
    75% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
    }
}
 

/* // */

    
    body{
        background-color: #0d0d0d;
        color: #fff;
    }

    header{
        position: fixed;
        top: 15px;
        left: 0;
        width: 100%;
        height: 75px;
        background-color: transparent;
        box-shadow: 0 0 5px rgb(85, 85, 85);
    }

    #header-stripe{
        backdrop-filter: blur(5px);
        /* background-color: #020b1de6; */
        background-color: #091a3de6;
        opacity: .8;
        width: 100%;
        height: inherit;
        position: fixed;

        z-index: 2;
    }

    #logo-container{
        margin-left: 75px;
        padding: 0 5px;
        height: inherit;
        background: rgb(15,147,225);
        background: linear-gradient(155deg, rgba(15,147,225,1) 20%, rgba(74,64,143,1) 90%);
        position: fixed;

        z-index: 3;
    }

    #logo{
        width: 100%;
        height: 100%;
    }

    nav{
        position: absolute;
        z-index: 3;
        width: 100%;
        height: 100%;

        #nav-links{
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 50px;



            .nav-link{
                margin: 0 5px;
                color: #93d0ff;
                text-decoration: none;
                text-transform: capitalize;
                font-family: "exo 2", Arial, Helvetica, sans-serif;
                font-size: .9rem;
                text-shadow: 0 0 10px #000ff9;
                padding: 5px 10px;
                border-radius: 10px;
                border: 1px solid transparent;
                transition: 250ms ease-in-out;
                user-select: none;
                line-height: 3;

                &:hover{
                    color: #9dd2ff;
                    text-shadow: 0 0 6px #ffffff;
                    }
            }
        }

    }

    /* 1250px terá um media query para adaptar o header */

    section {
        width: 100%;
        height: 100vh;
        display: flex;
        z-index: 1;
    }

        .title{
            font-family: "Quicksand", Arial, Helvetica, sans-serif;
            font-size: 3rem;
            text-align: center;
            color: #93d0ff;
            text-shadow: 0 0 10px #000ff9;
            margin-bottom: 20px;
        }

        .text{
            font-family: "Inter", Arial, Helvetica, sans-serif;
            font-size: 1.2rem;
            color: #93d0ff;
            text-shadow: 0 0 10px #000ff9;
            max-width: 600px;
            text-align: center;
        }


        #start{

            box-shadow: 0px 0 15px 2px #6367ed;
            align-items: center;
            justify-content: center;


            #video-background-container{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                z-index: -1;

                video{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    min-width: 100%;
                    min-height: 100%;
                    width: auto;
                    height: auto;
                    transform: translate(-50%, -50%);
                    z-index: -1;
                }
            }

            #start-content{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            gap: 20px;
            width: 30%;
            padding: 15px 0 25px;

            background: rgba(0, 20, 60, 0.4);
            backdrop-filter: blur(3px);
            border-radius: 20px;
            box-shadow: 0px 0px 10px 1px #7813d693;

            z-index: -1;

            h1{
            font-family: "Quicksand", Arial, Helvetica, sans-serif;
            font-size: 3rem;
            text-align: center;
            color: #dedede;
            text-shadow: 0 0 2px #5e54ff;
            }

            p{
            font-family: "inter", Arial, Helvetica, sans-serif;
            font-size: 1.2rem;
            text-align: center;
            color: #dedede;
            text-shadow: 0 0 2px #5e54ff;
            }

            /* Estilos do botão  serão diferentes afim de diferenciar do nav e dar mais identidade ao corpo*/
            a {
                position: relative;
                display: inline-block;
                text-decoration: none;
                font-family: "Exo 2", Arial, Helvetica, sans-serif;
                font-size: 1.3rem;
                padding: 10px 20px;
                border-radius: 10px;
                transition: transform 600ms ease-in-out;
                margin-top: 10px;

                color: #00143E;
                background: linear-gradient(155deg, rgba(15,147,225,1) 20%, rgba(74,64,143,1) 90%);
                box-shadow: 0px 0px 10px 1px #7813d693;
                overflow: hidden;

                &:hover {
                    transform: scale(1.05);
                    color: #ffffff;
                }

                &::before {
                    content: "";
                    position: absolute;
                    top: 0; left: 0;
                    width: 100%; height: 100%;
                    border: 2px solid #ffffff;
                    border-radius: 10px;
                    box-sizing: border-box;
                    pointer-events: none;
                    z-index: 1;

                    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
                    animation: draw-border 500ms forwards;
                    animation-play-state: paused;
                }

                &:hover::before {
                    animation-play-state: running;
                    animation-name: draw-border;
                    animation-duration: 500ms;
                    animation-fill-mode: forwards;
                }

                &:not(:hover)::before {
                    animation-name: erase-border;
                    animation-duration: 500ms;
                    animation-fill-mode: forwards;
                    animation-play-state: running;
                }


            }
        }


        }