body{
    background-color:#303030;
    margin: 0;
}

@font-face{
    font-family: "Zector";
    src: url("../font/Zector.otf");
}

header{
    color: #999999;
    background-color:#303030;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Zector", Verdana, Geneva, Tahoma, sans-serif;
    font-size: 60px;
    font-weight: lighter;
}

a, a:visited, a:hover, a:active{
    color:#999999;
}

.container{
    box-shadow: 4px 1px 15px;
}

.box{
    display: flex;
    height: 50vh;
    background-color: #262626;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width:none;
    align-items:center;

}
.box::-webkit-scrollbar {
    display: none;
}
.box::-webkit-scrollbar{
    width:100px;
}


.card {
    margin-right: 25px;
    font-size: 15px;
    color: #999999;
    font-family: "Zector", Verdana, Geneva, Tahoma, sans-serif;
    font-weight:normal;
    flex-shrink: 0;
    background-color: #4d4d4d;
    height: 90%;
    width: 400px;
    border-radius: 40px;
    position: relative;
    overflow:hidden;
    z-index: 0;
    overscroll-behavior-x: contain;

    
}

.dimCard{
    display: absolute;
    background-color:rgba(26,26,26,0.7);
    text-align: center;
    height: 100%;
    width: 100%;
    border-radius: 40px;
    transition: background-color 500ms;

}
.dimCard:hover{
    background-color:rgba(26,26,26,0.0);
    bottom: 0;
}

.textCard{
    display: flex;
    justify-content:  center;
    align-items: center;
    height: 100%;
    width: 100%;
    transition: .5s;
    text-shadow: 4px 4px 5px #262626;
}
.textCard:hover {
    height: 65vh;
    color:#e6e6e6;
}

#card1{
    background-image:url('../images/Artstation.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size:cover;
    position: relative;
}
#card2{
    background-image:url('../images/Facebook.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
#card3{
    background-image:url('../images/LinkedIn.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
#card4{
    background-image:url('../images/Twitter.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
#card5{
    background-image:url('../images/Instagram.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
#card6{
    background-image:url('../images/Youtube.jpg');
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
#card7{
    background-image:url('../images/Github.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
#card8{
    background-image:url('../images/Phone.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
#card9{
    background-image:url('../images/Website.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

#card10{
    background-image:url('../images/Email.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.card h1{
    position: absolute;
}