@font-face {
    font-family: "NanTragedyDisplayMonoBold";
    src: 
		url("fonts/NaNTragedy-Family/WOFF2/DisplayMono/NaNTragedyDisplay-Bold.woff2") format("woff2"),
		url("fonts/NaNTragedy-Family/WOFF/DisplayMono/NaNTragedyDisplay-Bold.woff") format("woff");
    font-weight: bold;
}
@font-face {
    font-family: "NanTragedyDisplayRegular";
    src: 
		url("fonts/NaNTragedy-Family/WOFF2/Display/NaNTragedyDisplay-Regular.woff2") format("woff2"),
		url("fonts/NaNTragedy-Family/WOFF/Display/NaNTragedyDisplay-Regular.woff") format("woff");
    font-weight: bold;
}
@font-face {
    font-family: "NanTragedyTextMedium";
    src: 
		url("fonts/NaNTragedy-Family/WOFF2/Text/NaNTragedyText-Medium.woff2") format("woff2"),
		url("fonts/NaNTragedy-Family/WOFF/Text/NaNTragedyText-Medium.woff") format("woff");
    font-weight: bold;
}
@font-face {
    font-family: "NanTragedyDisplayMonoMedium";
    src: 
		url("fonts/NaNTragedy-Family/WOFF2/DisplayMono/NaNTragedyDisplayMono-Medium.woff2") format("woff2"),
		url("fonts/NaNTragedy-Family/WOFF/DisplayMono/NaNTragedyDisplayMono-Medium.woff") format("woff");
    font-weight: bold;
}
@font-face {
    font-family: "NanTragedyDisplayMonoBold";
    src: 
		url("fonts/NaNTragedy-Family/WOFF2/DisplayMono/NaNTragedyDisplayMono-Bold.woff2") format("woff2"),
		url("fonts/NaNTragedy-Family/WOFF/DisplayMono/NaNTragedyDisplayMono-Bold.woff") format("woff");
    font-weight: bold;
}

:root{
	--header-height: 5vh;
}

*{
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	overscroll-behavior-x: none;
	font-display: auto;
    box-sizing: border-box;
}
html, body{
	margin: 0;
	width: 100%;
	height: 100%;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
    background: var(--color-1);
    overflow-x: hidden;
    font-family: "NanTragedyTextMedium";
    color: white;
}
p{
    margin: 0;
}
a{
    color: white;
    text-decoration: none;
}
strong{
    font-family: "NanTragedyDisplayMonoMedium";
    font-weight: 400;
}
footer{
    bottom: 0;
    position: absolute;
    left:50vw;
    transform: translateX(-50%);
    padding: 5px;
}
.top-menu{
    height:var(--header-height);
    top: 0;
    position: absolute;
    z-index: 1;
}
.top-menu-button{
    height: 100%;
    display: inline-block;
    padding: 0 0.2rem;
}
.info-menu-cont{
    position: relative;
    height: 100%;
    margin: 0 1rem;
}
.info-menu-button{
    cursor: pointer;
    padding: 0.7rem 0;
    height: 100%;
    float: left;
}
.info-menu-button:not(:first-child){
    margin-left: 1rem;
}
.info-field{
    position: absolute;
    width: 50vw;
    height: 0;
    background-color: black;
    color: white;
    transition: height 0.2s ease-in-out;
    top: 0;
    overflow: hidden;
    z-index: 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
.info-field-content{
    margin-top: var(--header-height);
    padding: 1rem;
}
.info-field.open{
    height: calc(100vh - var(--header-height));
}
.logo{
    position: absolute;
    left:50vw;
    top:0;
    transform: translateX(-50%);
    width:10vw;
    height: var(--header-height);
    text-align: center;
}
.logo svg{
    width:100%;
    height:100%;
    padding: 5px 0 10px 0;
}
.intermadiate-cover-container{
    position: absolute;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.intermadiate-cover-container img{
    max-width: 40vw;
    max-height: 50vh;
}
.site-background-container{
    position: fixed;
    width:100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}
.site-background-container img{
    width:100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (orientation:landscape) {
}

@media screen and (orientation:landscape) and (max-width: 1080px){
}

@media screen and (orientation:portrait){
}

@media screen and (max-width: 600px) and (orientation:portrait){

    .intermadiate-cover-container img{
        max-width: 90vw;
        max-height: 80vh;
    }
    .logo{
        width: 30vw;
    }.info-field{
        width: 80vw;
    }

}