/* Header */

.header{
    display: inline-block;
    width: 100%;
    height: 50px;
    background-color: #be3144;
    position: fixed;
}
    .header > .nav {
        display: inline-block;
        float: right;
        margin-right: 20px;
        height: 100%;
    }
        .header > .nav > .header-links{
            display: inline-block;
            float: left;
            height: 100%;
        }

            .header > .nav > .header-links > a{
                display: inline-block;
                text-decoration: none;
                color: white;
                height: 100%;
                font-size: 24px;
                padding: 13px 10px;
            }
            .header > .nav > .header-links > a:hover{
                background-color: #45567d;
            }

/* Sections */
.section{
    display: inline-block;
    width: 100%;
}
.background{
    display: inline-block;
    height: 100vh;
    background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

    .section.background h1{
        margin-top: 45vh;
        text-align: center;
        color: #f0f0f0;
        font-size: 90px;
    }
    .section.background p{
        text-align: center;
        color: #be3144;
        font-style: italic;
        font-size: 50px;
        font-weight: 200;
    }

.section.second{
    background-color: #45567d;
}

    .secondh{
        display: inline-block;
        width: 640px;
        margin-left: calc(50% - 320px);
        margin-top: 60px;
    }

        .section > .secondh > h2 {
            text-align: center;
            color: #f0f0f0;
            font-size: 44px;
            padding: 4px 0;
            border-bottom: solid #f0f0f0;
        }
    
    .main-box{
        display: inline-block;
        margin-left: calc(50% - 350px);
        margin-top: 40px;
    }
        .box-row{
            display: inline-block;
            width: 100%;
            height: 50%;
        }
            .box{
                display: inline-block;
                height: 100%;
                float: left;
                padding: 16px;
            }
                .box-link{
                    text-decoration: none;
                }
                .box-link:hover > p > span{
                   animation-name: animation;
                   animation-duration: 1s;
                   animation-fill-mode: forwards;
                }
                    .box > a > .img.card{
                        display: inline-block;
                        width: 200px;
                        height: 200px;
                        background-image: url(../images/card.png);
                        background-size: cover;
                        background-position: center;
                        margin: auto;   
                    }

                    .box > a > .img.tik{
                        display: inline-block;
                        width: 200px;
                        height: 200px;
                        background-image: url(../images/tik.png);
                        background-size: cover;
                        background-position: center;
                        margin: auto;   
                    }
                    .box > a > .img.mine{
                        display: inline-block;
                        width: 200px;
                        height: 200px;
                        background-image: url(../images/mine.png);
                        background-size: cover;
                        background-position: center;
                        margin: auto;   
                    }
                    .box > a > .img.yami{
                        display: inline-block;
                        width: 200px;
                        height: 200px;
                        background-image: url(../images/yami.png);
                        background-size: cover;
                        background-position: center;
                        margin: auto;   
                    }
                    .box > a > .img.node{
                        display: inline-block;
                        width: 200px;
                        height: 200px;
                        background-image: url(../images/node.png);
                        background-size: cover;
                        background-position: center;
                        margin: auto;   
                    }
                    .box > a > .img.mern{
                        display: inline-block;
                        width: 200px;
                        height: 200px;
                        background-image: url(../images/mern.png);
                        background-size: cover;
                        background-position: center;
                        margin: auto;   
                    }
                    .box-link > p {
                        text-align: center;  
                        color: #f0f0f0;
                    }
                        .box-link > p > span{
                            opacity: 0;
                            color: coral;
                        }

@keyframes animation{
    0%{ 
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.button {
    display: inline-block;
    width: 100px;
    background-color: #303841;
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 6px;
    margin-left: calc( 50% - 50px)
}
    .button:hover > a > .simbol{
        animation-name: move-right;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

.button > a > p{
    display: inline-block;
    font-size: 18px;
    line-height: 25px;
    color: #f0f0f0;
}

    .button > a > .show{
        padding-left: 1px;
        padding-right: 2px;
    }
    .button > a > .simbol{
        margin-top: 1px;
        font-size: 25px;
    }


@keyframes move-right{
    0%{
        padding-left: 0px
    }
    100%{
        padding-left: 3px
    }
}

.section.third{
    height: 75vh;
    background-color: #303841;
    text-align: center;
    color: #f0f0f0;
    
}
    .third > h2{
        margin-top: 25vh;
        font-size: 70px;
    }
    .third > p{
        font-size: 20px;
    }
    .logo-container{
        display: inline-block;
        height: 40px;
        width: 600px;
        margin-top: 30px;
        justify-content: center;
    }
        .logo-container > .brand-logo{
            display: inline-block;
            width: 20%;
            float: left;
        }
            .logo-container > .brand-logo > a{
                display: inline-block;
                text-decoration: none;
                color: white;
                font-size: 25px;
                padding: 5px;
            }
            .logo-container > .brand-logo > a:hover{
                animation-name: move-bottom;
                animation-duration: 0.5s;
                animation-fill-mode: forwards;
            }


.footer{
    display: inline-block;
    background-color: #303841;
    height: 80px;
    border-top: solid #be3144;
}

@keyframes move-bottom{
    0%{
        margin-top: 0;
    }
    100%{
        margin-top: 8px;
    }
}

/* schroll down */

.scroll-down {
  height: 50px;
  width: 30px;
  border: 2px solid black;
  position: absolute;
  left: 50%;
  bottom: 90px;
  border-radius: 50px;
  cursor: pointer;
}
.scroll-down::before,
.scroll-down::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  height: 10px;
  width: 10px;
  transform: translate(-50%, -100%) rotate(45deg);
  border: 2px solid black;
  border-top: transparent;
  border-left: transparent;
  animation: scroll-down 1s ease-in-out infinite;
}
.scroll-down::before {
  top: 30%;
  animation-delay: 0.3s;
  /* animation: scroll-down 1s ease-in-out infinite; */
}

@keyframes scroll-down {
  0% {
    /* top:20%; */
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    top: 90%;
    opacity: 0;
  }
}