@font-face{
  font-family: "Lexend";
  src: url("/font/Lexend.ttf");
}

body{
    --transition-time: 0.5s;
	--logo-size: min(max(calc((100svh - 54svw) / 60.5 * 24), min(max(calc((100svh - 54svw) / 2), min(calc(88svh / 39 * 24), 24svw)), 42svw)), 92svw);

    margin: 0;
    background: #000;
    color: #fff;
    font-family: "Lexend", sans-serif;
}

a{
    display: inline-block;
}

header{
    margin: 0;
    padding: 2svw;
    height: 12svw;
	width: 96svw;
	position: fixed;
	top: 0;
	left: 0;
	overflow: visible;
	z-index: 64;
}

#home{
	position: fixed;
	top: 2svw;
	left: 2svw;
}

#home,
#logo{
    width: 12svw;
    height: 12svw;
	transition: var(--transition-time);
}

nav{
	position: fixed;
	right: 2svw;
	top: 2svw;
	display: flex;
	flex-direction: row;
	justify-content: end;
}

nav a img{
    width: 12svw;
    height: 12svw;
}

main{
    margin: 0;
    padding: 4svw;
	height: calc(100svh - 24svw);
	width: 92svw;
	position: fixed;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	align-content: space-around;
	flex-wrap: wrap;
	overflow: scroll;
	scrollbar-width: none;

	--font-size: 6svw;
}

#logo-space,
#qrcode{
	width: var(--logo-size);
	height: var(--logo-size);
}

#year{
	font-size: calc(var(--logo-size) / 24 * 10);
}

#name-surname{
	width: 92svw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: calc(var(--font-size) / 2);
    font-size: var(--font-size);
}

main h1{
    font-size: 3.5vmax;
}

main h2{
    font-size: 2.75vmax;
    color: #f80;
    text-align: center;
}

main p,
main li{
    font-size: 2vmax;
}

main .full-width{
    width: 92svw;
}

a{
    color: #f80;
}

.popup{
    display: none;
    z-index: 128;
    position: fixed;
    bottom: 20svh;
    left: calc(10svw + 0.7vmax);
    width: calc(80svw - 2.4vmax);
    border-radius: 2vmax;
    border: 0.5vmax solid #888;
    background: #fff;
    padding: 0.8vmax;
    text-align: center;
    font-size: 2.5vmax;
    color: #000;
}

.popup .close{
    border: none;
    padding: 0;
    background-color: #fff;
    font-size: 3vmax;
    font-weight: bold;
    color: #000;
}

.popup .button{
    border: 0.4vmax solid #666;
    border-radius: 1vmax;
    padding: 1vmax;
    background-color: #f80;
    font-size: 3vmax;
    font-weight: bold;
    color: #fff;
}

.absolute{
    position: absolute;
}

.top{
    top: 0;
}

.right{
    right: 1.25vmax;
}

.hidden{
    display: none;
}

#google-login{
    border: 0.6vmax solid #aaa;
    margin: 0 3vmax;
    border-radius: 5vmax;
    padding: 3vmax;
    font-size: 4vmax;
    font-weight: bold;
    text-align: center;
    background: #fff;
}

#google-logo{
    display: inline-block;
    width: 5vmax;
    vertical-align: middle;
}

#nouser-alert{
    margin: 0 3vmax;
    border: 0.6vmax solid #844;
    border-radius: 5vmax;
    padding: 3vmax 4vmax;
    font-size: 4vmax;
    font-weight: bold;
    text-align: center;
    background: #f88;
    color: #000;
}

.simple-form{
	margin: 0.5rem;
	display: flex;
	justify-content:center;
}

.simple-form > div{
    margin: 1rem;
    padding: 1rem;
	display: flex;
	border: 0.3vmax solid #fff;
	border-radius: 1vmax;
	flex-direction: column;
}

.simple-form label{
	padding-left: 2rem;
	font-weight: bold;
}

.simple-form input{
	margin: 0.6vmax;
	width: 25vmax;
    max-width:90vw;
    height: 3vmax;
    border-radius: 1vmax;
    border: 0.3vmax solid #fff;
    padding: 0.6vmax;
    box-sizing: content-box;
    font-size: 2vmax;
	font-family:inherit
}

.simple-form input{
    background-color: #fff;
	font-weight: normal;
}

.simple-form input[type="submit"]{
    background-color: #f80;
	font-weight: bold;
}

#help-grid{
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 5fr;
    grid-row-gap: 2svw;
    justify-items: center;
}

#help-grid img{
    width: 12svw;
}

@media (orientation: landscape) {
	header {
		padding: 2svh;
		height: 96svh;
	    max-height: 96svh;
		width: 12svh;
	}

	#home,
	#logo {
		top: 2svh;
		left: 2svh;
    	width: 12svh;
    	height: 12svh;
	}

	nav{
	    right: unset;
	    top: unset;
		left: 2svh;
		bottom: 2svh;
		flex-direction: column;
	}

	nav a img,
	#help-grid img{
    	width: 12svh;
    	height: 12svh;
	}

	main {
		--font-size: min(5svw, calc(var(--logo-size) / 24 * 5));

		padding: 4svh;
		height: calc(100svh - 8svh);
		width: calc(100svw - 24svh);
	}
}