:root{
    --hover-accent: rgb(144, 255, 100);
    --bold-border-radius: 3px;
    scroll-behavior: smooth;
}

body{
    background-color: rgb(14, 14, 14);
    color:white;

    font-family: monaco, Consolas, "Lucida Console", monospace; 
    font-size: 24px; 
    font-style: normal; font-variant: normal; 
    font-weight: 700; line-height: 26.4px;
}

.content{
    margin:100px 200px;
}

.intro-section{
    padding:0px;
    margin:150px 0px;
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
}


.top-bar{
    display:flex;
    margin:10px;
    align-items: center;
}

.top-bar-cv{
    margin-left:auto;
    box-shadow: 3px 3px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    padding:2px 10px;
    transition:0.2s;
}

.top-bar-cv a{
    transition: 0.2;
    color:white;
}
.top-bar-cv:hover a{
    color:var(--hover-accent);
}

.top-bar-cv:hover{
    margin-right:10px;
    color:var(--hover-accent);
    border:2px solid var(--hover-accent);
    box-shadow: 3px 3px 2px 1px var(--hover-accent);
}



.top-bar-links a{
    transition:0.2s;
    color:white;
}

.top-bar-links a:hover{
    color:var(--hover-accent);
}

.intro-section h1{
    text-align: center;
}
.intro-section h2{
    text-align: center;
    font-weight:lighter
}

.intro-section p{
    text-align: center;
    font-size: large;
    font-weight:400;
}

.seperation-line{
    margin:0px auto;
    width:60%;
    border-bottom:1px solid white;
}

.navigation ul{
    display:flex;
    list-style:none;
    justify-content: center;
}

.navigation ul li{
    padding:5px;
    margin:0px 8px;
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    box-shadow: 4px 4px 2px 1px rgba(255, 255, 255, 0.2);
    transition: 0.2s;
}

.navigation ul li:hover{
    color:var(--hover-accent);
    border:2px solid var(--hover-accent);
    box-shadow: 2px 2px 2px 1px var(--hover-accent);
}

.navigation ul li a{
    color:white;
    text-decoration: none;
    transition:0.2s;
}
.navigation ul li:hover a{
    color:var(--hover-accent);
}

.project-section{
    padding:0px;
    margin:100px 0px;
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
}

.projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    padding: 0 20px;
    justify-items: center;
}

.project-section h3{
    text-align:center;
    padding:0px;
    margin:50px 0px 30px 0px;
}

.project-section p{
    text-align: center;
    justify-content: center;
    font-size: medium;
}

.project-section p a{
    color:white;
}
.project-section p a:hover{
    color:var(--hover-accent);
}

.project{
    min-width:300px;
    max-width:400px;
    height:620px;
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    margin:20px;
    transition: 0.2s;
    cursor:pointer;
}

.project .link a{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.project:hover{
    box-shadow: 5px 5px 2px 1px var(--hover-accent);
    border:2px solid  var(--hover-accent);
}

.video-section{
    position:relative;
    height:auto;
    overflow:hidden;
}

.video-section video{
    height:auto;
    display:block;
    translate:-25% 0;
}

.project-details{
    position:absolute;
    bottom:0;
    width:100%;
    height:40px;
    font-size:medium;
    font-weight: 200;
    display:flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    color:white;
    padding:2px 6px;
    box-sizing:border-box;
}

.group-size{
    align-items: center;
    display:flex;
    margin:0px 10px;
}
.group-size i{
    padding:0px 10px;
}

.tech{
    align-items: center;
    display:flex;
    margin:0px 10px;
}
.tech i{
    padding:0px 10px;
}

.github{
    transition: 0.2s;
    margin-right:15px;
    margin-left:auto;
    color:white;
}
.github:hover{
    color:var(--hover-accent);
}

.project-description{
    margin:15px;
}

.project-description h4{
    padding:10px;
    margin:0px;
}
.project-description p{
    font-weight: 100;
    font-size:medium;
}


.tech-stack-section{
    padding:0px;
    margin:100px 0px;
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
}

.tech-stack-section h3{
    text-align: center;
}

.tech-stack-list ul{
    list-style:none;
    justify-content: center;
    display:flex;
}

.tech-stack-list ul li{
    padding: 2px 4px;
    margin: 5px 10px;
    box-shadow: 4px 4px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    font-size:medium;
    transition:0.2s;
}

.tech-stack-list ul li:hover{
    color:var(--hover-accent);
    box-shadow: 2px 2px 2px 1px var(--hover-accent);
    border:2px solid var(--hover-accent);
}


.about-me{
    padding:20px;
    margin:100px 0px;
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
}

.about-me h3{
    padding:0px;
    margin:5px 10px;
}

.about-me p{
    margin:15px;
    font-weight: 300;
    font-size:medium;
}


.my-games-list{
    padding:20px;
    margin:100px 0px;
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
}

.my-games-list .games-list{
    display:flex;
    justify-content:center;
}
 
.my-games-list .games-list div{
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    padding:20px;
    margin:15px 50px;
}

.my-games-list h3{
    padding:15px;
    margin:0px;
}

.my-games-list h4{
    padding:0px;
    margin:0px;
    font-size:large;
    font-weight: 500;
}

.my-games-list ul li{
    font-size:medium;
    font-weight: 400;
    transition:0.2s;
}

.my-games-list ul li:hover{
    margin-left:15px;
}

.games-section{
    width:250px;
}

.footer{
    display:flex;
    justify-content: center;;
}

.contacts-section{
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    width:fit-content;
    padding:20px;
}

.contacts-section h3{
    padding:0px;
    margin:0px;
    font-size:larger;
    font-weight:600;
    text-align: center;
}

.contacts-section ul{
    list-style: none;
    text-align: center;
}

.contacts-section ul li a i{
    padding:5px;
}

.contacts-section ul li a{
    font-weight: 500;
    color:white;
}
.contacts-section ul li a:hover{
    font-weight: 500;
    color:var(--hover-accent);
}


.PP_project-introduction-section{
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    text-align: center;
}

.PP_project-introduction-section p{
    font-weight: 400;
}

.PP_back-button{
    position:absolute;
    top: 10px;
    left: 10px;
    padding:2px 5px;
    text-decoration: none;
    color:white;
    box-shadow: 3px 3px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    transition:0.2s;
    font-weight:300;
}

.PP_back-button:hover{
    color:var(--hover-accent);
    box-shadow: 3px 3px 2px 1px var(--hover-accent);
    border:2px solid var(--hover-accent);
}

.PP_github-button{
    position:absolute;
    top: 10px;
    right: 10px;
    padding:2px 5px;
    text-decoration: none;
    color:white;
    box-shadow: 3px 3px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    transition:0.2s;
    font-weight:300;
}

.PP_github-button:hover{
    color:var(--hover-accent);
    box-shadow: 3px 3px 2px 1px var(--hover-accent);
    border:2px solid var(--hover-accent);
}

.PP_project-overview{
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    text-align: center;
    align-items: center;
    margin:40px 0px;
    padding:10px;
}

.PP_project-overview video{
    max-width:700px;
    min-width:300px;
    height:auto;
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    margin:20px;
}

.PP_project-section{
    box-shadow: 8px 8px 2px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: var(--bold-border-radius);
    margin:20px;
    cursor:pointer;
}

.PP_project-section:hover{
    box-shadow: 5px 5px 2px 1px var(--hover-accent);
    border:2px solid var(--hover-accent);
    transition: 0.2s;
}

.PP_project-section-title{
    display:flex;
    justify-content: center;
    align-items: center;
}
.PP_project-section-title i{
    margin-left:auto;
    margin-right:20px;
    padding:10px;
}
.PP_project-section-title h3{
    margin-left:30px;
}

.PP_project-description-content{
    max-height:0px;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.PP_project-description-content img{
    max-width: 1000px;
    height:auto;
    margin:10px;
    box-shadow: 3px 3px 3px 1px rgba(255, 255, 255, 0.2);
    border:2px solid white;
    border-radius: 10px;
}

.PP_project-description-content a{
    color:white;
}

.PP_project-description-content a:hover{
    color:var(--hover-accent);
}

.PP_project-description a{
    color:white;
}

.PP_project-description a:hover{
    color:var(--hover-accent);
}