/* fredoka-one-regular - latin */
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fredoka-one-v5-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Fredoka One"), local("FredokaOne-Regular"), url("../fonts/fredoka-one-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/fredoka-one-v5-latin-regular.woff2") format("woff2"), url("../fonts/fredoka-one-v5-latin-regular.woff") format("woff"), url("../fonts/fredoka-one-v5-latin-regular.ttf") format("truetype"), url("../fonts/fredoka-one-v5-latin-regular.svg#FredokaOne") format("svg");
  /* Legacy iOS */ }

/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("../fonts/source-sans-pro-v11-latin-300.woff2") format("woff2"), url("../fonts/source-sans-pro-v11-latin-300.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("../fonts/source-sans-pro-v11-latin-regular.woff2") format("woff2"), url("../fonts/source-sans-pro-v11-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local("Source Sans Pro SemiBold"), local("SourceSansPro-SemiBold"), url("../fonts/source-sans-pro-v11-latin-600.woff2") format("woff2"), url("../fonts/source-sans-pro-v11-latin-600.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

/* source-sans-pro-700 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("../fonts/source-sans-pro-v11-latin-700.woff2") format("woff2"), url("../fonts/source-sans-pro-v11-latin-700.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

body,
html {
  background-color: #FFE6E6;
  font-family: "Source Sans Pro", sans-serif;
  color: #F03037;
  font-size: 21px;
  height: 100%;
  padding: 0;
  margin: 0; }

.body-wrapper {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100vh 100vh;
  grid-template-areas: "m h h h h h h h h h h h" "m c c c c c c c c c c c"; }

@media only screen and (min-device-width: 320px) and (max-device-width: 780px) {
  .body-wrapper {
    grid-template-areas: "h h h h h h h h h h h h" "c c c c c c c c c c c c"; }
  .sidebar-wrapper {
    display: none; }
  .about-content {
    width: 100vw;
    grid-template-areas: "m m m m m m m m m m m m" "n n n n n n n n n n n n" "x x x x x x x x x x x x"; } }

.sidebar-wrapper {
  grid-area: m; }

.sticky {
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: 0; }

.sidebar {
  display: grid;
  grid-template-rows: 180px auto; }

.sidebar-logo {
  display: flex;
  justify-content: center;
  align-items: center; }

.sidebar-info * {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  color: #F03037;
  line-height: 38px;
  text-decoration: none; }

.sidebar-info ul {
  display: grid;
  grid-template-rows: 150px 150px;
  height: 100%;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  list-style: none; }

.sidebar-info li {
  transform: rotate(270deg) translate(0%); }

.splash {
  display: grid;
  grid-template-rows: auto 20px;
  justify-content: center;
  align-items: center;
  padding: 20px; }

.splash {
  grid-area: h;
  border-bottom: 3px solid #FFD9D9;
  background: url("../images/c.png") center center no-repeat, url("../images/topography.png") center center repeat;
  background-size: 600px, auto;
  border-left: 3px solid #FFD9D9; }

.splash-content {
  max-width: 860px;
  height: auto;
  text-align: center;
  padding: 0px 60px 0px 60px; }

.splash-title {
  margin-bottom: 20px;
  font-family: "Fredoka One";
  font-size: 66px;
  line-height: 68px;
  font-weight: 400; }

.splash-text {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 21px;
  font-weight: 400;
  max-width: 600px;
  margin: auto;
  line-height: 28px; }

.splash-button {
  font-family: "Fredoka One";
  font-size: 32px;
  color: #1212DB;
  letter-spacing: 3px;
  line-height: 48px;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 3px solid #F03037; }

.splash-social {
  margin-top: 40px;
  margin-bottom: 40px; }

.splash-social a {
  padding: 5px; }

.splash-down {
  margin: auto; }

.about {
  border-left: 3px solid #FFD9D9;
  min-height: 1000px;
  grid-area: c;
  display: grid;
  grid-template-rows: auto 20px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: url("../images/caro.png") center center no-repeat;
  background-size: auto; }

.about-content {
  width: 80vw;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100% 100%;
  grid-template-areas: "m m m m h h h h h h h h" "b b b b b b b b n n n n" "c c c c c x x x x x x x"; }

@media only screen and (min-device-width: 320px) and (max-device-width: 780px) {
  .about-content {
    width: 90vw;
    grid-template-areas: "m m m m m m m m m m m m" "b b b b b b n n n n n n" "z z z z x x x x x x x x"; } }

.about-questions {
  grid-area: m;
  background: #FFEEEE;
  box-shadow: 0 0 44px 0 #FFD0D0;
  width: 270px;
  height: 270px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center; }

.about-questions ul {
  list-style-image: url("../images/list.png");
  font-size: 18px;
  color: #F03037;
  line-height: 29px;
  font-weight: 600;
  padding: 0; }

.about-questions ul li {
  margin-bottom: 20px;
  width: 100%; }

.about-questions ul li:last-child {
  margin-bottom: 0; }

.about-questions a {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  color: #F03037;
  line-height: 29px;
  font-weight: 400; }

.about-text {
  grid-area: n;
  text-align: left;
  float: right;
  font-family: "Fredoka One";
  font-size: 46px;
  color: #F03030;
  letter-spacing: 0;
  line-height: 48px; }

.about-skills {
  grid-area: x;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: #FFEEEE;
  box-shadow: 0 0 44px 0 #FFD0D0;
  text-align: center;
  margin-top: 20px; }

.about-skills ul {
  list-style: none;
  display: flex;
  flex-flow: row;
  padding: 0; }

.about-skills ul li {
  /* SOCIAL MEDIA: */
  font-family: "Fredoka One";
  text-transform: uppercase;
  font-size: 16px;
  color: #1212DB;
  letter-spacing: 1.16px;
  line-height: 29px;
  padding: 20px;
  border-right: 2px solid #FFD9D9;
  word-break: keep-all; }

.about-skills ul li:last-child {
  border: none; }

.yellow {
  border: 3px solid yellow; }

.green {
  border: 3px solid green; }

.blue {
  border: 3px solid blue; }

.red {
  border: 3px solid red; }