html {
	overflow: auto;
}

/* normalize :: */
table{ 
  border-spacing:0;

  border-collapse:collapse;}
ul { 
  margin: 0;
  padding: 0; 
  }
ul, ol{
  list-style:none;
  list-style-image:none
}

img{
	max-width: 100%;
}

/* :: normalize */

a img{
  border: none;
}

body {
	margin: 0;
	padding: 0;

  color: var(--c-text-primary);
	background-color: var(--c-bg-site);

	font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#wrapper{
	width: 100%;
  max-width: 57rem;
	margin: 0 auto;
	padding: 0;
}

a {
  text-decoration: none;

  color: var(--c-link);
}

a:hover		{
  color: var(--c-link-hover);
}

#content{
  box-sizing: border-box;
  padding: 0 1.5rem;

  word-break: break-word;
}

h1{
  margin: 0;

  font-size: var(--fs-xxl);
	line-height: var(--lh-xxs);
}

h2{
	margin: 0;

  font-size: var(--fs-md);
  line-height: var(--lh-s);
}

h3 a{
  color: var(--c-text-primary) !important;
}

/* mainpage */

.frontpage{
  display: flex;
  align-items: center;
  justify-content: center;

  max-width: 30rem;
  margin: auto;

  text-align: center;

  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: var(--lh-m);
}

/* ya */

.yf-section{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;

  width: 100%;
  margin: 1.5rem auto;
}

.yf-section_large{
  flex-direction: column;
}

.yf__block{
  overflow: hidden;

  min-width: 300px;
  max-height: 300px;
}

.yf__block_xl{
  width: fit-content;
  max-width: 100%;
}

.yf__block_xl:not(:first-child){
  margin-top: 1.5rem;
}

.yf__block_s{
  margin: .75rem;
}