@font-face {font-family: MarioLuigi2; src:url("fonts/MarioLuigi2.ttf")}
@font-face {font-family: ShagLounge; src:url("fonts/ShagLounge.otf")}

.hithereignorethis {
    font-family: sans-serif;
}

html,body {
    height: auto;
    min-height: 50dvh;
    margin: 0;
    padding: 0;
}

body {
    background-image: url('./images/background.png');
    background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
    background-color: rgb(188,53,38);
}

p {
    color:#FFFFFF;
	font-family: MarioLuigi2;
	margin: clamp(15px, 1vw, 23px);
	font-size: clamp(14px, 10vw, 16px);
}

span {
    color:#FFFFFF;
	font-family: MarioLuigi2;
	margin: clamp(15px, 1vw, 23px);
	font-size: clamp(14px, 10vw, 16px);
}

.platform-button span {
	text-decoration: underline;
    color: #7dc0ff;
    margin: calc(clamp(14px, 10vw, 16px)/9);
    font-size: calc(clamp(14px, 10vw, 16px)*1.5);
}

.platform-button-disabled span {
    color: #838383;
    margin: calc(clamp(14px, 10vw, 16px)/9);
    font-size: calc(clamp(14px, 10vw, 16px)*1.5);
}

.popup-notif {
    z-index: 999;
    width: clamp(400px, 95%, 4000px);
    position: fixed;
    transform: translate(-50%);
    left: 50%;
    box-sizing:border-box;
    display:flex;
    background-color: #d91111;
    outline: solid clamp(1px, 1vh, 8px) #800000;
    border-radius: 1% / 25%;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    
}


.popup-notif span {
    font-size: calc(clamp(14px, 10vw, 16px)*1.5);
    text-align: center;
    width:100%;
}


.main-div {
    background-color: #3d3d3d;
    width: clamp(400px, 80%, 4000px);
    transform: translate(-50%);
    position: relative;
    left: 50%;
    height: fit-content;
    
    max-height: clamp(50vh, 130%, 210vh);
    padding: 2%;
    margin-top:24px;
    margin-bottom:24px;
    outline: #00000040 solid 16px;
    transform-origin: center;
}

.legal {
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
    width: fit-content;
    font-size: clamp(14px, 10vw, 16px);
    background-color: #3d3d3d;
    position:relative;
    padding: 0.8%;
    margin-top: 2.4%;
    margin-bottom: 2.4%;
    outline: #00000040 solid 8px;
}

.legal * {
    font-size: clamp(14px, 10vw, 16px);
    font-family: sans-serif;
}

.legal-button {
    color: #7dc0ff;
    text-decoration: underline;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.legal-button:hover {
    transform: scale(1.05);
}

.img-container {
    overflow-x: scroll;
    overflow-y: hidden;
    max-height: clamp(300px, 60vw, 550px);
    box-sizing: border-box;
    white-space: nowrap;
    margin: clamp(4px, 0.2vw, 16px);
    padding: clamp(4px, 0.2vw, 16px);
    
}

.screenshot {
    height: clamp(300px, 60vw, 500px);
    border-radius: 4% / 2%;
    display: inline-block;
    transform:scale(1);
}

.logo {
    z-index: 1;
    grid-area: 1 / 1;
    width: clamp(100px, 30vw, 600px);
    position: relative;
    transform: translate(-50%);
    left:50%;
    display: inline-block;
}

.buttons {
    display: flex;
    justify-content: center;
    margin: clamp(4px, 0.2vw, 16px);
    padding: clamp(4px, 0.2vw, 16px);
}

.buttons img {
    width: clamp(125px, 30vw, 220px);
}

.buttons div {
    transform: scale(1);
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.buttons div:hover {
    transform: scale(1.09);
    z-index: 48;
}

.slogan {
    z-index: 2;
    transform:translateY(-100%);
    font-size: clamp(14px, 2vw, 32px);
    font-family: ShagLounge;
    text-align:center;
}

.play-iframe {
    border:none;
    transform: translate(-50%,0);
    left: 50%;
    position: relative;
    width: clamp(375px, 80vw, 650px);
    aspect-ratio:19.5 / 9;
    border-radius: 2% / 4%;
    outline: solid rgba(0,0,0,0.2) clamp(1px, 5px, 25px);
    margin:2vh;
}