*{
    margin:0;
    padding:0;
}
body{
overflow: hidden;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
html{
    height: 100%;
}
@font-face {
    font-family: aquire;
    src: url("../fonts/AquireLight-YzE0o.otf") format("opentype");
}
.background{
    content: url(../images/bg-final.jpg);
    width: 100vw;
    height: 100vh;
    position: absolute;
}
.name{
    position:absolute;
    top:52vh;
    left: 15vw;
    z-index: 99;
    background: -webkit-linear-gradient(#d6c4ac,#8a7033, #473419);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 12vw;
    font-family:aquire;
    animation: fadein ease 2.5s;
    opacity: 0;
    animation-fill-mode: forwards;  
    -webkit-animation: fadein ease 2.5s;
    -webkit-animation-fill-mode: forwards;
    animation-delay: 2s;
    overflow: hidden;
    cursor: default;
}
.right{
    position: absolute;
    right: 0;
    animation: move 2s;  
    z-index: 10;
}
.polyg{
    height: 100vh;
    width: 31.1vw;
    clip-path: polygon(39% 0, 100% 0, 100% 100%, 39% 100%, 0 50%, 60% 25%);
    -webkit-clip-path: polygon(39% 0, 100% 0, 100% 100%, 39% 100%, 0 50%, 60% 25%);
    -moz-clip-path: polygon(39% 0, 100% 0, 100% 100%, 39% 100%, 0 50%, 60% 25%);
    -ms-clip-path: polygon(39% 0, 100% 0, 100% 100%, 39% 100%, 0 50%, 60% 25%);
    -o-clip-path: polygon(39% 0, 100% 0, 100% 100%, 39% 100%, 0 50%, 60% 25%);
    background-color: #414141;
    z-index: 10;
}
.logo{
    width: 22vw;
    position: absolute;
    top: 38vh;
    z-index: 999;
    animation: moveimg 2s, scalex 6s ease-in-out 5s infinite;
    animation-fill-mode: forwards;
    background-color: transparent;
}
.social-media{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 2vh;
    z-index: 999;
    animation: movesm 2s;
    animation-fill-mode: forwards;
    background-color: transparent;
}
.icon{
    width: 40px;
    margin: 0 0.5vw;
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .logo{
        width: 35vw;

    }
    .background{
        content: url(../images/bg-medium.jpg);
    }
    .polyg{
        height: 100vh;
        width: 55.4vw;
        clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 0 50%, 60% 25%);
        -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 0 50%, 60% 25%);
        -moz-clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 0 50%, 60% 25%);
        -ms-clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 0 50%, 60% 25%);
        -o-clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 0 50%, 60% 25%);
    }
    .name{
        top: 56vh;
        left: 10vw;
    }
  }

@media only screen and (max-width: 600px){
    .background{
        content: url(../images/bg-small.jpg);
    }
    .polyg{
        height: 100vh;
        width: 57vw;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 0 40%, 24% 20%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 0 40%, 24% 20%);
        -moz-clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 0 40%, 24% 20%);
        -ms-clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 0 40%, 24% 20%);
        -o-clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 0 40%, 24% 20%);
    }
    .logo{
        top: 35vh;
        width: 40vw;
    }
    .name{
        top: 47vh;
        left: 6vw;
        font-size: 15vw;
    }
    .social-media{
        display: flex;
        flex-direction: column;
        bottom: 4vh;
        width: 12vw;
    }
    .icon{
        width: 7vw;
        margin: 2% 2% 5% 2%;
    }
  }
@keyframes scalex{
    from {
        transform: scale(1);
    }
    65% {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }    
}
@keyframes move{
    from{
      right:-2000px;
    }
    to{
      right:0px;
    }
  }
@keyframes moveimg{
    from{
      right:-2000px;
    }
    to{
      right: 15px;
    }
  }
@keyframes movesm{
    from{
      right:-2000px;
    }
    to{
      right: 5.5vw;
    }
  }
@keyframes fadein{
    from{
        opacity: 0;
    }
    to{
      opacity: 1;
    }
  }