html{
    font-family: Roboto, sans-serif;
    font-size: 12px;
}

html,body,.container{

    display:flex;
    flex-direction:column;
    align-items:center;

    margin:0px;
    min-width:310px;
}

.app-container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    
}

/* == GENERAL STYLING */
ul{
    padding-inline-start:0px;
}
li{
    list-style:none;
}
.bold{
    font-weight: bold;
}

/* == COMPONENT STYLING */

    /* title bar */

.site-title-bar{
    grid-area: header;
}
.site-title-bar h1{
    color: orange;
    text-align:right;
    font-size:3rem;
    padding-right:0.5rem;
    margin-bottom:0.1rem;
}

.site-title-bar nav ul{
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    margin-top:0.1rem;
}
.site-title-bar nav ul li{
    margin: 0px 0.5rem 0px 0.5rem;
    font-size:1rem;
}
.site-title-bar nav ul li:nth-child(n+2):before{
    content: "|";
    padding-right:0.5rem;
}

.site-title-bar nav a{
    color:black
}

.site-title-bar nav a:visited{
    color:inherit;
}

    /* project list */

.project-list{
    grid-area: body;
}

    /* project thumbnail */

.project-thumb{
    position:relative;
    margin-bottom:50px;

    box-shadow: 5px 5px 10px grey;
}
.project-thumb.orange {
    border-top: 10px solid orange;
}
.project-thumb.green {
    border-top: 10px solid greenyellow;
}

.project-thumb .project-image{
    width:100%
}

    /* details in project thumb */
.proj-details{
    width: calc(100% - 0.5rem);
    background: #000000cb;
    padding:0rem 0.5rem 0.5rem 0rem;

    position:absolute;

    color:white;
    text-align:right;

    bottom:0px;
    right:0px;

}

.proj-details h2{
    font-size: 2rem;
    padding:0.25rem 0rem 0.25rem 0rem;
    margin:0px;
    width:100%;
    text-align: right;

}

    /* project details heading */
.project-thumb.orange h2{
    color:orange;
}
.project-thumb.green h2{
    color:greenyellow;
}

.proj-details .proj-links{
    position: absolute;
    top:0.5rem;
    left:0.5rem;
}

.proj-link img{
    height:2rem;
    padding-right:0.25rem;
}


    /*project details tag list */
.tag-list{
    display:flex;
    flex-direction: row;
    width:100%;
    justify-content: flex-end;
    padding-inline-start: 0px;
    padding: 0.25rem 0rem 0.25rem 0rem;
}

.project-tag{
    border: 1px solid white;
    border-radius:1rem;
    padding:0.25rem 0.5rem;
    margin: 0.5rem 0.25rem 0rem 0.25rem;
    font-size:0.8rem;
}

    /* about block component */
    
.about-me{
    text-align:right;
    padding:2em 0.5em 2em 2em;
    color:#808080;
}

.mask-chequered{
  mask-image: url('/img/BackgroundTile_Chequered.svg')
}

#background{
  height: 100%;
  width: 100%;

  position: fixed;
  z-index:-1;
}

.gradient_blue-pink{
  background: linear-gradient(45deg,
    rgba(255, 255, 255, 1) 40%,
    rgba(120, 228, 200, 0.2) 43%,
    rgba(255, 255, 255, 1) 46%,
    rgba(255, 255, 255, 1) 54%,
    rgba(220, 132, 224, 0.2) 57%,
    rgba(255, 255, 255, 1) 60%);
}

#background.animated{
  background-size: 400% 400%;
  -webkit-animation: BackgroundSlideHorizontal 30s ease infinite;
  -moz-animation: BackgroundSlideHorizontal 30s ease infinite;
  animation: BackgroundSlideHorizontal 30s ease infinite;
}


@-webkit-keyframes BackgroundSlideHorizontal {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes BackgroundSlideHorizontal {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes BackgroundSlideHorizontal {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}