body {
background-color: #1c1c1c;
font-size: 18px;
font-family: notosans;
color:darkgrey;
margin:0;
}

/*-- Links --*/
a{
color:#00b1a0;
font-weight:bold;
text-decoration:none;
}

a:hover{
text-decoration:underline; 
}

/*-- Paragraphcs --*/
p {
line-height:1.5;
}

/*-- Font --*/
@font-face {
font-family: notosans;
src: url(fonts/NotoSans-Regular.ttf);
}

/*-- Flex --*/
.flex{
display:flex;
flex-direction:row;
gap:0;
}

/*-- Sidebar --*/
.sidebar{
order:1;
padding:50px;
width: 100%;
max-width: 400px;
}

.nav{
position:sticky;
top:20px;
}

.nav a{
font-size:20px; 
}

.nav hr{
border: 1px solid darkgray;
max-width:5%;
margin-top:20px;
margin-bottom:20px;
margin-left:0;
}

.nav li{
list-style-type:none;
margin-bottom:5px;
}

/*-- Main --*/
.main{
order: 2;
width: 100%;
max-width: 2160px;
padding:20px;
}

blockquote{
max-width: 100%;
width:1000px;
margin-left:auto;
margin-right:auto;
}

.vgen{
display: flex;
justify-content: center;
align-items:center;
color:black;
font-weight: bold;
background-color: #B8FF26;
padding:5px;
margin-bottom:5px;
}

.vgen img {
float:none;
padding:20px;
}

/*-- Artwork --*/
.recent img{
height:500px;
width:500px;
object-fit: contain;
}

/*-- Projects --*/
.project-column {
display: flex;
flex-direction: row;
gap: 20px;
width:100%;
margin-bottom:20px;
align-items:center;
}

.project-left {
padding:10px;
width:25%;
}

.project-right{
padding-left:50px;
width:75%;
border-left:1px solid darkgrey;
}

/*-- Stream --*/
.stream{
display: flex;
justify-content: center;
align-items:center;
color:white;
font-weight: bold;
background-color: #9146FF;
padding:5px;
}

.stream img {
float:none;
padding:20px;
}

.stream-schedule li{
  line-height:2;
  list-style-type:none;
  font-size:20px;
}

/*-- Footer --*/
.footer{
text-align:center;
}

/*-- Mobile --*/
@media only screen and (max-width: 800px) {
.flex {
flex-direction: column;
}
.flex, .sidebar, .main, .artwork-column, .project-column{
        max-width: unset;
}
}

@media only screen and (max-width: 500px){
.flex{
max-width: 100%;
height:auto;
}
}