:root{
	
	--color-tmwhite: white;
	--color-tmpink: #FF29EB;
	--color-tmpurple: #6B42FF;
	
	--font-roboto: "Roboto", system-ui;
	--font-cherrybomb: "Cherry Bomb One", system-ui;
}

.hide{
	display:none;
}

body, html{
	min-height: 100vh;
}

a {
	color: var(--color-tmpink);
	text-decoration:none;
}

a:hover {
	color: var(--color-tmpurple);
}

body{
	background-color: var(--color-tmwhite);
	font-family: var(--font-roboto);

}

header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    color: var(--color-tmwhite);
    background-color: var(--color-tmpink);
    z-index: 30;
    box-shadow: 0px 10px 10px #00000099;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    font-size: 30px;
    text-transform: uppercase;
    padding: 5px 10px;
    box-sizing: border-box;
	font-family: var(--font-cherrybomb);
}

header a{
	color:var(--color-tmwhite);
	text-decoration:none;
}


header a:hover, header a:focus{
	color:var(--color-tmpurple);
}

.headerleft, .headerright{
	width:32px;
}

.headermid {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    gap: 30px;
}

.headermid li {
    margin: 0;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.headermid li:nth-of-type(1){
	order:2
}

.headermid li:nth-of-type(2){
	order:1
}

.headermid li:nth-of-type(3){
	order:3
}

.headermid li img{
	max-height:30px;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    min-height: 100vh;
}

.mainvideobg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mainvideobg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
	object-position: center top;
}

.maincontent {
    display: block;
    position: relative;
    z-index: 10;
    text-align: center;
}

.maincontent h1 img {
    width: 480px;
    max-width: 80vw;
    filter: drop-shadow(0px 0px 25px black);
}

.mainbuybtn {
    display: inline-block;
    color: var(--color-tmwhite);
    font-size: 32px;
    text-transform: uppercase;
    text-decoration: none;
    background-color: var(--color-tmpink);
    padding: 10px 25px 12px;
    border: 3px solid var(--color-tmwhite);
    border-radius: 100px;
	animation: mainbuybtnanim 3s ease-in-out infinite;
	font-family: var(--font-cherrybomb);
}


@keyframes mainbuybtnanim {
  0%   {transform: rotate(0deg) scale(1);}
  25%  {transform: rotate(5deg) scale(1.1);}
  50%  {transform: rotate(0deg) scale(1);}
  75% {transform: rotate(-5deg) scale(1.1);}
  110%   {transform: rotate(0deg) scale(1);}
}

.mainbuybtn:hover{
	color: var(--color-tmwhite);
	background-color: var(--color-tmpurple);
}


.maincontentcorner {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 200;
}

.maincontentcorner:hover{
	filter:brightness(1.2);
}

.maincontentcornerteddy {
    max-height: 310px;
    filter: drop-shadow(0px 3px 2px black);
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 20;
}

.maincontentcornerstar {
    display: flex;
    position: absolute;
    bottom: 0px;
    left: 190px;
    width: 320px;
    height: 320px;
    background-image: url(../img/star2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    text-align: center;
    filter: drop-shadow(8px 8px 10px black);
	font-family: var(--font-cherrybomb);
}



.maincontentcornerstar span {
    font-size: 60px;
    line-height: 90%;
    display: block;
    width: 100%;
    color: var(--color-tmwhite);
    font-weight: normal;
    -webkit-text-stroke: 2px var(--color-tmpink);
	transform: rotate(11deg);
}

.maincontentcornerstar span strong {
    display: block;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-tmwhite);
    font-weight: normal;
    margin-top: 10px;
    background-image: linear-gradient(to top right, var(--color-tmpink) 40%, white, var(--color-tmpink) 60%);
    background-size: 100% 300%;
	background-position: 0% 0%;
    background-clip: text;
	animation: maincontentcornerstaranim 2s linear infinite;
}

@keyframes maincontentcornerstaranim {
  from {background-position: 0% -20%;}
  to {background-position: 0% 120%;}
}


.footer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
	text-align: right;
	max-width:90vw;
}

.footer p {
    margin: 0px;
    color: var(--color-tmwhite);
    text-shadow: 0px 1px 1px #000000aa, 0px 0px 30px white, 0px 0px 40px white;
}

.footer p a{
	color:var(--color-tmwhite);
}
.footer p a span{
	color: var(--color-tmpink)
}

.footer p a:hover{
	color: var(--color-tmpink)
}

@media(max-width:1320px), (max-height: 600px) {

	.maincontentcornerteddy{
		max-height:280px;
	}

	.maincontentcornerstar{
		width:260px;
		height:260px;
	
	}
	
	.maincontentcornerstar span {
		font-size:50px;
	}

}

@media(max-width:960px){
	
	.mainvideobg{
		    object-position: top 0 right 25%
	}

}

@media(max-width:960px), (max-height: 600px) {

	.main {
        /*align-items: initial;
        box-sizing: border-box;
        height: 90vh;
        min-height: unset;*/
    }

	.maincontent h1 img {
		max-width: 60vw;
	}

	.maincontentcorner {
		bottom: unset;
		top: 0px;
		left: 0px;
	}

	.maincontentcornerteddy {
        max-height: 170px;
		display:none;
    }
	
	.maincontentcornerstar {
        width: 150px;
        height: 150px;
        left: 100px;
        bottom: unset;
        left: 10px;
        top: 60px;
    }

	.maincontentcornerstar span,
	.maincontentcornerstar span strong	{
        font-size: 28px;
        -webkit-text-stroke-width: 1px;
    }
	
	.headerleft, .headerright {
		display:none;
	}
	
	header {
		height: auto;
		font-size:24px;
	}
	
	.headermid {
        display: flex;
        flex-direction: row;
        gap: 5px;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
	
	.headermid li:first-of-type {
		display:none;
	}
	
	.headermid li{
		/*order:unset !important;*/
	}
	
	.headermid li span{
		display:none;
	}
	
	.footer{
		bottom:5px;
		right:5px;
	}
	
	.maincontent{
		position:relative;
	}
	
	.mainbuybtn {
		font-size: 24px;
		padding: 5px 20px 8px;
	}


	
	

}