﻿body {
    background: linear-gradient(90deg, gray, black, #383838, #202020, #282828, black);
    height: 1700px;
    color: white;
}
.logo {
    width: 10vh;
    max-width: 12vh;

    position: fixed;
    top: 0;
    left: 0;

    user-select: none;
}

.video_outsond {
    display: flex;
    flex-direction: column;

    width: 800px;
    height: 450px;
    max-width: 805px;
    max-height: 455px;
    justify-content: flex-start;
    align-items: flex-end;
    gap: -5%;

    background: rgba(255, 255, 255, 0.06);
    border-radius: 15px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
}

    .video_outsond video {
        width: 70%;
        height: 70%;
        max-width: 75%;
        max-height: 75%;
        border-radius: 10px;
    
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        display: block;
        cursor: pointer;
        user-select: none;
    }

.video_YT_install {
    display: flex;
    flex-direction: column;

    width: 800px;
    height: 400px;
    max-width: 805px;
    max-height: 405px;
    justify-content: flex-start;
    align-items: flex-end;
    gap: -5%;

    background: rgba(255, 255, 255, 0.06);
    border-radius: 15px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 70%);
}

    .video_YT_install video {
        width: 70%;
        height: 70%;
        max-width: 75%;
        max-height: 75%;
        border-radius: 10px;

        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        display: block;
        cursor: pointer;
        user-select: none;
    }

.menu {
	background: rgba(255, 255, 255, 0.03);
	border-radius: 15px;
	padding: 20px;

	position: fixed;
	top: 30%;
	left: 5%;
	transform: translate(-50%, -50%);
	
	display: block;
	box-shadow: 0 4px 50px rgba(0, 0, 0, 0.5);
	user-select: none;

	transition: border 2s ease;
}

	.menu button {
		background: white;
		color: black;
		border-radius: 10px;
		padding: 5px;
		width: 100%;
		margin-bottom: 5px;
	
		display: block;
		text-align: center;
		cursor: pointer;
	}

    .menu:hover {
        border: 2px solid yellow;
    }

.vide {
    padding: 90vh 10vw;
    position: absolute;
    background: rgba(0, 0, 0, 0.0);
}

.video_outsond h2 {
    width: 200px;
    max-width: 205px;

    position: fixed;
    top: 5%;
    left: 70%;
    transform: translate(-50%, -50%);
}

.video_YT_install h2 {
    width: 200px;
    max-width: 205px;

    position: fixed;
    top: 5%;
    left: 70%;
    transform: translate(-50%, -50%);
}

.video_Ultra_Booster {
    width: 800px;
    height: 400px;
    max-width: 805px;
    max-height: 405px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 15px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 190%);
}

    .video_Ultra_Booster h2 {
        width: 200px;
        max-width: 205px;

        position: fixed;
        top: 5%;
        left: 70%;
        transform: translate(-50%, -50%);
    }

    .video_Ultra_Booster h1 {
        width: 265px;
        max-width: 270px;

        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }