@charset "UTF-8";

@font-face { font-family: 'TokyoBold'; src: url(https://s0.2mdn.net/creatives/assets/4118473/TOKYO2020-DeBold.otf) format("opentype"); font-weight: bold;}
@font-face { font-family: 'TokyoRegular'; src: url(https://s0.2mdn.net/creatives/assets/4118473/TOKYO2020-Regular.otf) format("opentype"); font-weight: normal;}

html, body {background: #ffffff; padding: 0; margin: 0; -webkit-text-size-adjust: none; font-family: 'TokyoBold';}

#main-container { position: absolute; width: 300px; height: 600px; border: 1px solid #000; box-sizing: border-box; background: #fff; overflow: hidden; top: 0; left: 0; opacity: 0; }

#exitButton { position: absolute; top: 0px; left: 0px; width: 300px; height: 600px; cursor: pointer; z-index: 500; }

.container{ position:absolute; width:100%; height:100%; background-color: white; }
#main-logo{ position:absolute; width:95px; height:144px; background: url(main-logo.svg) no-repeat; left:50%; top:50%; transform: translateY(-50%)translateX(-50%);}

#header-container{ position:absolute; width:100%; height:157px; background-color:#B11D33; }
#header-container::after{content: url(artifact.svg); position: absolute; bottom: -60px;left: -20px;}
#header-logo{ position:relative; width:70px; height:99px; background: url(header-logo.svg) no-repeat; top:27px; left:47px; background-size: cover;}
#title{ position:absolute; top:72px; left:155px; color:white; font-size:22px; line-height: 1em; font-family: 'TokyoRegular';}

.image-overlay{position: absolute; width:100%; height:100%; background-color: white;}
.image{ position:absolute; bottom:0px; width:100%; height:118px; }

#copy-container{position:absolute; width:90%; left:5%; height:263px; top: 211px; }
.copy{position: relative; color:#96754D; text-align:center; text-transform: uppercase; font-size:20px; height: max-content; top: 50%; transform: translateY(-50%);}

#content-container{position: absolute;}

#separator{position: absolute; width:100%; height:100%; background-color:#771A2A;}