@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*,
*::before,
*::after		{
	box-sizing: border-box;
}
:root	{
	--fs-200: .9rem
	--fs-300: 1rem
	--fs-400: 1.125rem;
    --fs-500: 1.5rem;
    
    --fr-gul: rgb( 245 225 0 );
    --fr-hvid: #fff;
    --fr-graa: rgb( 255 255 255 / .7 );
    --fr-sort-6: rgb( 0 0 0 / .06 );
    
    --lg-sortblaa: linear-gradient( 50deg, rgb( 0 0 0 ), rgb( 62 65 205 ), rgb( 0 0 0 ) );
    --lg-hvidhvid: linear-gradient( 50deg, rgb( 255 255 255 / .2 ), rgb( 255 255 255 / .8 ) );
}
@view-transition	{
	navigation: auto;
}

::view-transition-group(root)	{
	animation-duration: 1.4s;
}

::view-transition-old(root)		{
	animation-name: scale-out;
}

::view-transition-new(root)		{
	animation-name: scale-in;
}

@keyframes scale-in				{
	from	{
		scale: 0;
	}
}

@keyframes scale-out			{
	to	{
		scale: 0;
	}
}

html	{
	background-color: rgb( 0 0 0 ) !important;
	background-image: linear-gradient( 50deg, rgb( 0 0 0 ) 70%, rgb( 10, 0, 140 ) );
	background-size: cover;
	background-repeat: no-repeat;
}

body	{
	margin: 0px !important;
	padding: 0px !important;
	background-color: transparent !important;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 300;
	font-size: 15px;
}

h1		{
	margin-left: 1.5rem;
}

h3		{
	text-align: center;
	font-size: var( --fs-500 );
	padding: 0px;
	margin: 0px;
	color: var( --fr-gul );
}

h4		{
	font-size: var( --fs-400 );
	text-align: center;
	padding: 0px;
	margin: 0px;
	color: var( --fr-hvid );
}

.parent {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr auto;
}

header	{
	display: flex;
	align-content: center;
	justify-content: space-between;
	background-color: rgb( 49 56 60 );
	padding: 2rem;
	/* color: #5A7380; */
}
main {
    display: grid;
    place-items: center;
    background-color: rgb( 255 255 255 / .9 );
}
.hkode		{
	width: clamp( 300px, 30%, 400px );
	padding: 2rem;
	border-radius: 1rem;
	box-shadow: 3px 5px 12px 4px var( --fr-sort-6 );
	background-image: var( --lg-hvidhvid );
	margin-top: -3rem;
}

footer	{
	text-align: center;
	color: var( --fr-graa );
	background-color: rgb( 49 56 60 );
	background-image: var( --lg-sortblaa );
	padding: .4rem;
}
button, .btn 	{
	padding: 9px 12px;
	display: inline-block;
	border: none;
	border-radius: .25rem;
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
	cursor: pointer;
	width: auto;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	color: rgb( 0 0 0 / .9 );

	font-size: var( --fs-200 );
	background-color: var( --fr-hvid );
}