html, body {
  height:100vh;
  height: calc(var(--vh, 1vh) * 100);}

#wrapper {
	height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: table-cell;
  vertical-align: middle;
  padding: 0 48px 0 48px;
  transition: 0.3s;}


div {
  -webkit-tap-highlight-color: rgba(0,0,0,0);}

a {
  color: black;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);}

a:hover {
  color: darkslateblue;}

#text {
  height:80px;
  font-family:"Fira Mono";
  font-size: 16px;
  line-height: 80px;
  transition: 0.3s;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;}

#about_me_text, #contacts_list {
  display: none;
  margin: 0 64x 0 64px;
  padding: 0;
  font-family:"Fira Mono";
  font-size: 12px;
  line-height: 16px;
  color:#000;
  transition: 0.3s;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;}

#contacts_list {
  height:80px;
}

label {
    display: inline-block;
    margin: 0;
    cursor: pointer;
    width: 100%;
    }

input[type=checkbox] {
  display: none;}

input[id=toggle_about]:checked ~ #about_me_text {
	display: block;}

input[id=toggle_about]:checked ~ #contacts_list {
  	display: none;}

input[id=toggle_contacts]:checked ~ #contacts_list {
  display: block;}

#text::before {
    content: '';
    width:16px;
    height:1px;
    display: block;
    float:left;
    margin-top:40px;
    margin-right: 48px;
    background-color:black;
    transition: 0.5s;
		}

@media (min-width: 400px) {
  	#wrapper {padding: 0 64px 0 64px;}
    #text::before {margin-right: 64px; margin-top:48px;}
		#text {height:96px; line-height: 96px;}
    #contacts_list {height:96px;}
    #about_me_text, #contacts_list {margin: 0 0 0 80px;}
		}

@media (min-width: 960px) {
		#wrapper {padding: 0 96px 0 96px;}
    #text::before {margin-right: 96px;}
    #about_me_text, #contacts_list {margin: 0 0 0 112px;}
		}