$ftt: 97%; // allows to reajust gloabally the entire blocks :it will fit for each media-query feature, it's a compromise to find out;)
$ft_container: 16px; // font to display on main blocks ;)
$bgreal: hsl(310, 33%, 7%) ! important; // suppress "!important" to reveal specific media queries background-colors;)

@mixin background($bg) {
 @if $bg == bgXXS {background: navy;    }
 @if $bg == bgXX-S {background: gray; }
 @if $bg == bgXS {background: blue;}
 @if $bg == bgS {background: darkcyan; }
 @if $bg == bgM { background: yellowgreen;}
 @if $bg == bgXM {background: darken(gold, 10);}
 @if $bg == bgXXM {background: indigo;}
 @if $bg == bgL { background: tomato; }
 @if $bg == bgXL {background: red;}
}
html {
 background: transparent;
}
body {
 background: $bgreal;
 font-size: 16px;
 position: absolute;
 z-index: 0;
 width: 100%;
 height: 100vh;
 top: 0;
 left: 0;
 overflow: hidden;
 @include breakpoint(XX-S) {
  @include background(bgXX-S);
  background: $bgreal;
 }
 @include breakpoint(XXS) {
  @include background(bgXXS);
  background: $bgreal;
 }
 @include breakpoint(XS) {
  @include background(bgXS);
  background: $bgreal;
 }
 @include breakpoint(X-S) {
  @include background(bgX-S);
  background: $bgreal;
 }
 @include breakpoint(S) {
  @include background(bgS);
  background: $bgreal;
 }
 @include breakpoint(M) {
  @include background(bgM);
  background: $bgreal;
 }
 @include breakpoint(XM) {
  @include background(bgXM);
  background: $bgreal;
 }
 @include breakpoint(XXM) {
  @include background(bgXXM);
  background: $bgreal;
 }
 @include breakpoint(L) {
  @include background(bgL);
  background: $bgreal;
 }
 @include breakpoint(XL) {
  @include background(bgXL);
  background: $bgreal;
 }
}
.wrap {
 position: absolute;
 z-index: 0;
 width: 90%;
 height: 90vh;
 top: 50%;
 left: 50%;
 padding: 1em;
 transform: translate(-50%, -50%);
 @include breakpoint(XX-S) {
  left: 20%;
  top: 40%;
  width: 135%;
 }
 @include breakpoint(XS) {
  height: 70%;
  top: 15%;
 }
 @include breakpoint(X-S) {
  height: 70%;
  top: 0;
 }
 @include breakpoint(M) {
  height: 70%;
  top: 30%;
 }
 @include breakpoint(XXM) {
  width:75%;
  height:40%;
  top: 2%;
 }
 @include breakpoint(L) {
  width:75%;
  height: 65%;
  top: 25%;
 }
}

 p {
 transform: translate(-50%, -50%);
 @include breakpoint(XX-S) {
  @include background(bgXX-S);
  margin-top: 0;
 }
 @include breakpoint(XXS) {
  margin-top: 0;
 }
 @include breakpoint(XS) {
  margin-top: 70%;
 }
 @include breakpoint(M) {
  margin-top: 0;
 }
 @include breakpoint(XXM) {
  margin-top: 0;
  background: $bgreal;
 }
 @include breakpoint(XL) {
  background: $bgreal;
 }
}


.ft {
 position: absolute;
 z-index: 1;
 width: 100%;
 height: 100vh;
 top: 70%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 1000px;
 text-align: center;
 font-size: 1.2em;
 color: ivory;
 opacity: 0;
 animation: appear 5s ease-in forwards 2s 1;
}
@keyframes appear {
 to {
  opacity: 1;
 }
}

.site {
 color: deeppink;
 font-size: 1em;
}

a {
 color: deeppink;
 text-decoration: none;
}
a:hover {
 color: hsl(136, 65%, 74%);
 text-decoration: none;
}