
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

body{
margin: 0;

align-items: top;
align-items: center;
height: 100vh;
background-color: hsl(0, 0%, 5%);
padding: 20px;
}

a:link {
	color:#FFFFFF;
	}
	
a:visited {
	color:#FFFFFF;
	}

#header{
font-family: Arial, sans-serif;
background-color: hsl(0, 0%, 13%);
justify-content: center;

border-radius: 15px;
max-width: 550px;
max-height: 225px;
overflow: hidden;
line-break: auto;

}
#navbar{
font-family: "Archivo", sans-serif;
font-style: italic;
font-size: 30px;
background-color: hsl(0, 0%, 13%);
border-radius: 10px;

justify-content: center;
align-items: center;
font-weight: 1000;
width: 700px;
height: 70px;
}

#post{
font-family: "Archivo", sans-serif;
color: white;
background-color: hsla(0, 0%, 19%, 0.411);
border-radius: 10px;
margin-top: 20px;
width: 700px;
max-height: 1000px;
overflow: hidden;
align-items: center;
justify-content: center;
padding: 15px;
}

#extendedpost{
font-family: "Archivo", sans-serif;
color: white;
background-color: hsla(0, 0%, 19%, 0.411);
border-radius: 10px;
margin-top: 20px;
width: 700px;

overflow: hidden;
align-items: center;
justify-content: center;
padding: 15px;
}
.row{
content: "";
display: table;
clear: both;
}

div.scroll-container {
  background-color: #7289da;
  white-space: nowrap;
  padding: 10px;
  overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

h4{


text-align: left;

}
h3{

    text-align: left;
    font-weight: 1000;
}

img{
max-width: auto;
max-width: auto;
}

button{
width: 100px;
height: 100px;
border-radius: 10px;
border: none;
background-color: hsl(281, 74%, 22%);
color: white;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
}

a:hover{
color:#0bac20;

}
a:active{
   color:#078318; 
}
button:hover{
    background-color: hsl(150, 74%, 32%);
}
button:active{
    background-color: hsl(281, 74%, 42%);
}

img {
	height: auto; 
	max-width: 100%;
}
p{
text-align: left;
font-size: 18px;
line-height: 40px;
text-indent: 20px;
}