@font-face {
    font-family: 'bpreplayregular';
    src: url('bpreplay-webfont.eot');
    src: url('bpreplay-webfont.eot?#iefix') format('embedded-opentype'),
         url('bpreplay-webfont.woff2') format('woff2'),
         url('bpreplay-webfont.woff') format('woff'),
         url('bpreplay-webfont.ttf') format('truetype'),
         url('bpreplay-webfont.svg#bpreplayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body,html {
  height: 100%;
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
}

body,h1,h2,h3,h4,h5,h6 {
  margin: 0;
  font-weight: 400;
}

html {
  font-family: bpreplayregular;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #293C48;
  color: #FFFCDB;
  font-size: 16px;
  word-spacing: normal;
  min-height: 100%;
  background-size: 100% 100%;
  text-align: center;
	display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: stretch;
}


div {
	position: relative;
}

#heading {
flex-grow: 1;
display: flex;
    align-items: center;
    justify-content: center;
	min-height: 150px;
	}
	

#io {
	color: #D25D58;
	}


#footer {
	background-color: #D25D58;
	height: 6%;
display: flex;
    align-items: center;
    justify-content: center;
}

#copyright {
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
}


.logotype span {
    font-size: clamp(20px, 12vw, 114px);
}

@media only screen and (max-width:33.75em) { 
#copyright {
    font-size: 0.6em;
}
