header{
    top:0;
    left: 0;
    position: fixed;   
    width: 100%;
    background-image: linear-gradient(  white,rgb(182, 179, 179));
    flex-direction: row;
    align-items: center;
    z-index: 20;
}
#nav-bar{
    flex: 1;
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
    flex-shrink: 2;

}
.nav-link{
    display: inline-block;
    text-align: center;
    margin: 1vmin 1vmin 1vmin 1vmin;
    font-size:  4vmin;
    font-weight: bold;
    border-radius: 1%;
    text-decoration: none; 
    color: black;
}
a:hover{
    color: white;
}
h1,h2,h3,a,[type='submit']{
    color:  hsl(300deg,80%,0%);
    text-shadow: 1vmin;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h1{
   display: inline-block;
   width: 25%;
   text-align: left;
   font-size:  5vmin;
   margin: 1vmin 1vmin 1vmin 1vmin;
   flex-shrink: 1;
 
}

#header-img{
    width: 5vmin;
    height: 5vmin;
}

main{
    position: absolute;
    top: 10vh;
    background-color: white;
  
   
}

body{
    display: flex;
    width: 100vw;
    flex-direction: column;
    background-color: rgb(0, 0, 0);
    background-image: linear-gradient(  hsl(120deg,30%, 30%),hsl(60deg,50%, 60%));
    align-items: center;
   
}
section{
    width: 80vw;
    background-image: linear-gradient(  hsl(230deg,80%, 70%),hsl(230deg,100%, 100%));
    border-radius: 5px;
    border-width: 10%;
    margin-top: 5vh;
    box-shadow: 0 1vmin 1vmin 1vmin rgb(51, 70, 49);
    padding: 2vmin;
}
#section2{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.path{
    margin: 25vh 0  0 0vw;
    width: 60vw;
    height: 60vh;
    position: absolute;   
    z-index: 1;
    border: 1vmin dotted black;
  
}
.arrow{
    transform: translateX(-30vw) translateY(25vh) translateY(-5vmin);
    position: absolute;   
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 10vmin;
    height: 10vmin ;
    border-radius: 50%;

  
    background-color: black;
    animation-name: arrow;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  
}
.arrow2{
    width: 0; 
    height: 0; 
    border-right: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(255, 255, 255);
    z-index: -8;
}

#section1{
    margin-top: 15vh;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 20vw 40vw 20vw;
    grid-template-rows: 20vh 40vh 20vh;
    grid-template-areas: "atop atop atop"
                         "aleft acenter arigth"
                         "abottom abottom abottom";
   
}
#p-landing{
    display: flex;
    flex-direction: column;
    grid-area: acenter;
    align-items: stretch;
    box-shadow: 0 0px 10px 0px rgb(83, 84, 156);
    padding: 10%;
    border-radius: 50%;
    z-index: 3;
}
form{
    display: flex;
    flex-direction: row;
}
[type='submit']{
    width: 5%;
    flex-grow: 1;
    flex-shrink: 2;
}
[type='email']{
    width: 30%;
    flex-grow: 2;
    flex-shrink: 1;
}

.stop{
    width: 15vmin;
    height: 15vmin;
    z-index: 3;
    box-shadow: 0 0px 10px 0px rgb(83, 84, 156);
    background-image: linear-gradient(  hsl(230deg,80%, 70%),
    hsl(230deg,80%, 80%),
    hsl(230deg,80%, 90%),
    hsl(230deg,100%, 100%),
    hsl(30deg,80%, 90%),
     hsl(30deg,80%, 40%));
}


.top,.bottom{
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-items: center;
    justify-content:space-around;
}
.left,.rigth{
    grid-area:aleft;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    justify-content:space-around;
}

.top{
    grid-area: atop;
}

.bottom{
    grid-area: abottom;
}
.left{
    grid-area: aleft;
}

.rigth{
    grid-area: arigth;
}



.stop:hover{
    animation-name: rot;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

h2{
    text-align: center;
    font-size: 3vmin;
}
h3{
    text-align: center;
}
p,li{
    font-size:  3vmin;
    
}

iframe{
    height: 300px;
    width: 500px;
}

@keyframes rot {
    20%{
        transform:rotate(-15deg);
    }

    40%{
        transform:rotate(15deg);
    }

    60%{
        transform:rotate(-5deg);
    }

    80%{
        transform:rotate(5deg);
    }

    100%{
        transform:rotate(0deg);
    }
}

@keyframes arrow {
    25%{
        transform: translateX(30vw) translateY(25vh) translateY(-5vmin);
    }
    26%{
        transform: translateX(30vw) translateY(25vh) translateY(-5vmin) rotate(90deg);
    }

    50%{
        transform: translateX(30vw) translateY(85vh) translateY(-5vmin) rotate(90deg);
    }
    51%{
        transform: translateX(30vw) translateY(85vh) translateY(-5vmin)  rotate(180deg);
    }

    75%{
        transform: translateX(-30vw) translateY(85vh) translateY(-5vmin) rotate(180deg);
    }
    76%{
        transform: translateX(-30vw) translateY(85vh) translateY(-5vmin) rotate(270deg);
    }

    99%{
        transform: translateX(-30vw) translateY(25vh) translateY(-5vmin) rotate(270deg);
        
    }
    100%{
        transform: translateX(-30vw) translateY(25vh) translateY(-5vmin);
    }
}