$bp-small: 500px;
$bp-medium: 800px;

@function strip-unit($number) {
	@if type-of($number) == "number" and not unitless($number) {
		@return $number / ($number * 0 + 1);
	}

	@return $number;
}

@mixin fluid($properties, $min-value, $max-value, $min-vw: 320px, $max-vw: 1680) {
	@each $property in $properties {
		#{$property}: $min-value;
	}

	@media (min-width: $min-vw) {
		@each $property in $properties {
			#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
		}
	}

	@media (min-width: $max-vw) {
		@each $property in $properties {
			#{$property}: $max-value;
		}
	}
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: darkblue;
  text-decoration: none;
  
  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

.content {
  width: 100%;
  max-width: 600px;
  animation: fadein 0.3s;
}

.emoji {
  display: block;
  @include fluid(margin-bottom, 16px, 26px);
}

.title {
  @include fluid(font-size, 30px, 50px);
}

.subtitle {
  @include fluid(font-size, 20px, 34px);
  font-weight: normal;
  margin-top: 4px;
}

.text,
.link-list {
  @include fluid(font-size, 16px, 20px);
  @include fluid(margin-top, 16px, 26px);
  line-height: 1.6;
}

.link-list {
  display: flex;
  list-style: none;
}

.link-list__item {
  @include fluid(margin-right, 10px, 20px);
}