/* poppins-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* poppins-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* poppins-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-v21-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* poppins-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  

:root {
    --c-grey: #b3b5a9;
    --c-bronze: #777a6a;
    --c-green: #9bc31c;
    --c-blue1: #38b7ec;
    --c-blue2: #7bd4fa;
    --c-yellow: #f1e42e;
}

html, body {
    padding: 0px;
    margin: 0px;
    background-color: rgb(229, 21, 215);
    font-family: 'Poppins', sans-serif;
    color: white;
    height:100%;
    width:100%;
    animation-name: color_change;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}


h1 {
    font-size: calc(30px + 1vmax);
    font-weight: 400;
}

h3 {
    font-size: calc(15px + 1vmax);
    font-weight: 300;
}

hr.custom_hr {
    position: relative;
    border: none;
/*    border-top: calc(4px + 0.1vmax) dotted;*/
    border-top: 4px dotted;
    margin: 20px 0px 10px 0px;
}


#construction {
    z-index: 200;
    width:60vw;
    height: auto;
    text-align: center;
    font-size: calc(10px + 1vmax);
    position: absolute;
    top: 50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
}


#textlinks {
    position: absolute;
    font-size: 11px;
    left: 50%;
    bottom: 0px;
    z-index: 200;
    width: auto;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    font-weight: 300;
    color:white;
    /* padding: 0px 10px 0px 10px; */
    text-decoration: none;
}

#textlinks a {
    color:inherit;
    text-decoration: none;
}

#textlinks a:hover:active {
    text-decoration: overline;
}


@keyframes color_change {
    0%   {background-color: rgb(228, 19, 113);}
    10%   {background-color: rgb(228, 19, 211);}
    20%   {background-color: rgb(19, 158, 228);}
    30%   {background-color: rgb(19, 228, 193);}
    40%   {background-color: rgb(144, 228, 19);}
    50%   {background-color: rgb(211, 228, 19);}
    60%   {background-color: rgb(228, 186, 19);}
    70%   {background-color: rgb(238, 137, 13);}
    80%   {background-color: rgb(228, 78, 19);}
    90%   {background-color: rgb(228, 19, 19);}
    100%    {background-color: rgb(228, 19, 113);}
  }