@font-face {
    font-family: 'terminessttf_nerd_fontmedium';
    src: url('terminess_ttf_nerd_font_complete-webfont.woff2') format('woff2'),
         url('terminess_ttf_nerd_font_complete-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* style.css */

html{
    background-image: url("../assets/images/background/Pixel_Art_Car_in_Night.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    font-family:'terminessttf_nerd_fontmedium';
    background-color:#000;
}

body{
    color:lightgray;
    font-size:0.8em;
}

@media only screen and (min-width: 900px){
    body{
        color:lightgray;
        font-size:1em;
    }
}

a{
    text-decoration:none;    
    color:skyblue;
}

a:hover{
    color:#0099cc;
}

#navigationbar{
    list-style-type: none;
    padding:0px;
    margin:auto;
    margin-top:5%;
    overflow: hidden;
    background-color:#132440;
    width:290px;
    height:40px;
    border-style: solid;
    border-color: lightgrey;
    border-width: 2px;
}

#baritem{
    float: left;
    display: block;
    padding: 10px 15px;
    text-align: center;
    text-decoration:none;
    min-width:60px;
}

#baritem:hover{
    background-color: #0c1729;
}

.welcomesection, .info, .description, .list, .content{
    background: rgba(40, 40, 40, 0.8);
    border-style:solid;
    border-color:lightgrey;
    border-width:2px;
    padding:10px;
    margin-left:10%;
    margin-right:10%;
}

@media only screen and (min-width: 900px){
    .welcomesection, .info, .description, .list, .content{
        background: rgba(40, 40, 40, 0.8);
        border-style:solid;
        border-color:lightgrey;
        border-width:2px;
        padding:10px;
        margin-left:20%;
        margin-right:20%;
    }
}

.welcomesection #heading, .info h3, .info p, .description p, .content h1, .content h5, .content h3, .content p{
    text-align:center;
}

.sign p{
    text-align:right;
}



/* cv.css */

#p1{
    color:gray;
}
.cvsection img{
    height:30%;
    width:30%;
    float:right;
    background: rgba(61, 8, 123, 0.8);
    padding:20px;
}

.cvsection a{
    text-decoration:none;
    color:skyblue;
}

.cvsection a:hover{
    color:#0099cc;
}

.cvsection{
    margin:auto;
    width:780px;
}

.basicinfo{
    background: rgba(244, 59, 134, 0.8);
    width:250px;
    height:810px;
    padding:12px;
    position:relative;
    top:352px;
    left:506px;
}

.careerandstats{
    background: rgba(17, 5, 44, 0.8);
    width:486px;
    height:1167px;
    padding:10px;
    position:relative;
    top:-853px;
}

/* portfolio.css */

.header{
    text-align:center;
    background:#132440;
    margin-left:40%;
    margin-right:40%;
    border-style:solid;
    border-width:2px;
    border-color:lightgray;
}

.container{
    display:grid;
    grid-gap:10px;
    grid-template-columns: repeat(1fr,4);
    background: rgba(40, 40, 40, 0.8);
    padding:10px;
    margin-left:10%;
    margin-right:10%;
    text-align:center;
    border-style:solid;
    border-width:2px;
    border-color:lightgrey;
}

@media only screen and (min-width: 900px){
    .container{
        display:grid;
        grid-gap:10px;
        grid-template-columns: repeat(4,1fr);
        background: rgba(40, 40, 40, 0.8);
        padding:10px;
        margin-left:15%;
        margin-right:15%;
        text-align:center;
        border-style:solid;
        border-width:2px;
        border-color:lightgrey;
    }
    .header{
        text-align:center;
        background:#132440;
        margin-left:45%;
        margin-right:45%;
        border-style:solid;
        border-width:2px;
        border-color:lightgray;
    }
}

.gallery-item{
    width:100%;
    height:100%;
    position:relative;
}

.gallery-item .image{
    width:100%;
    height:100%;
    overflow:hidden;
}

.gallery-item .image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 50%;
    cursor:pointer;
    transition:.5s ease-in-out;
}

.gallery-item .image video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 50%;
    cursor:pointer;
    transition:.5s ease-in-out;

}

.gallery-item:hover .image img{
    transform:scale(1.1);
}

.gallery-item:hover .image video{
    transform:scale(1.1);
}

.gallery-item .text{
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    pointer-events:none;
    z-index:4;
    transition:.3s ease-in-out;
    text-align:center;
}

.gallery-item:hover .text{
    opacity:1;
    animation:move-down .3s linear;
    padding:1em;
    width:100%;
}

.w-2{
    grid-column:span 2;
}
.w-3{
    grid-column:span 3;
}
.w-4{
    grid-column:span 4;
}

.h-2{
    grid-row:span 2;
}
.h-3{
    grid-row:span 3;
}
.h-4{
    grid-row:span 4;
}

@keyframes move-down{
    0%{
        top:10%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
}