html { 
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: #4a4a4a; /* Cor do texto mais suave e legível */
	font-family: sans-serif;
}

* { 
	font-size: 14px; 
	padding: 0; 
	margin: 0; 
}

body {
	margin: 0; 
	padding: 0; 
	background-color: #f5f5f5; /* Fundo claro e alegre */
}

/* Estilo do Menu */
#menu {
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 15px 0;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
    position: sticky;
    top: 0;
    z-index: 1000;
}

#menu a {
    color: #fff;
    text-decoration: none;
    margin: 0 20px;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease;
}

#menu a:hover {
    color: #FF5E00; /* Cor vibrante do hover */
    transform: scale(1.1);
}

#menu a:active {
    transform: scale(0.95);
}

/* Rodapé */
#rodape {
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

#rodape a {
    color: #FF5E00;
    text-decoration: none;
}

#rodape a:hover {
    color: #fff;
}

/* Discord iframe */
#discord iframe {
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra no iframe */
}

/* IP: Texto */
#ip span {
    font-size: 18px; 
    color: #FFF; 
    font-weight: bold;
    text-align: center;
    display: block;
    margin-bottom: 15px; /* Espaçamento abaixo */
}

#paraCopiar {
    display: inline-block;
    background-color: #FFF;
    color: #FF5E00;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 10px; /* Espaçamento à esquerda do IP */
}

.button_copiar {
    background-color: #FFF;
    color: #FF5E00;
    border: 2px solid #FF5E00;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-left: 10px;
}

.button_copiar:hover {
    background-color: #FF8F1C;
    transform: scale(1.05);
}

.button_copiar:active {
    transform: scale(0.98);
}

/* FOTOS */
#inicio { margin-top: 10px; }
#sobre { margin-top: 80px; }
#inicio h1 {
	font-size: 18px; 
	text-shadow: 0px -5px 25px #FFF;
	margin-top: 20px; 
	color: #FF5E00; /* Cor vibrante */
}
#inicio h2 { 
	font-size: 15px; 
	font-style: italic; 
}
#fotos { 
	margin-left: 20px; 
	margin-top: 10px; 
	color: #000; 
}
#fotosslide li img {
	border-radius: 10px; 
}

/* LOGIN */
#login {
	margin-bottom: 10px; 
	margin-left: 750px; 
	margin-top: 10px; 
	background-color: #FFB74D; /* Cor de fundo quente */
	position: absolute; 
	width: 436px; 
	height: 276px; 
	border: #111 solid 2px;
}


/* VIP */
#vip {
	width: 100%; 
	height: 1250px; 
	color: #FFF;
}
#vip img {
	margin-left: -15px;
	margin-top: 10px;
}
#vip h1 {
	text-align: left;	
	margin-top: 10px;	
	margin-left: 10px;
	font-size: 30px;
	font-weight: bold;
	color: #FF5E00; /* Cor vibrante */
}
#vip h2 {
	text-align: left;	
	margin-top: 10px;	
	margin-left: 30px;
	font-size: 20px;
	font-weight: bold;
	color: #FF5E00;
}
#vip li {
	text-align: left;	
	margin-top: 10px;	
	margin-left: 30px;	
	font-size: 15px;
	text-decoration: none;
}
#vip #vantagens h1 {
	text-align: left;	
	margin-top: 10px;	
	margin-left: 30px;
	font-size: 30px;
	font-weight: bold;
	color: #FF5E00; /* Cor vibrante */
}
#vip #vantagens h2 {
	text-align: left;	
	margin-top: 10px;	
	margin-left: 30px;
	font-size: 20px;
	font-weight: bold;
	color: #FF5E00;
}

/* OUTROS ESTILOS */
#parceiros {
	position: absolute; 
	width: 365px; 
	margin-top: 400px; 
	margin-left: 825px; 
}
#parceiros iframe {
	border: 0px; 
	margin-top: 15px; 
	position: relative; 
	width: 100%; 
	height: 220px;
	background-color: #FFF;
}
#parceiros h3 {
	font-size: 20px; 
	text-align: left; 
	color: #FF5E00; /* Cor vibrante */
}
#parceiros h1 p {
	font-size: 20px; 
	color: #FFF;
}
#parceiros h2 { 
	font-size: 16px; 
	margin-top: 5px; 
	text-align: left;
}
#parceiros h2 p img { 
	margin-top: 25px;
}
#parceiros h2 p { 
	font-size: 20px;
}

#staff {
	position: relative;
}
#staff a {
	font-size: 25px; 
	color: #FFF; 
	display: inline-block; 
	font-stretch: extra-expanded;
}
#staff img { 
	padding: 10px;
}
#staff ul {
	display: inline-block; 
	margin-left: 10px;
}
#staff div {
	display: inline-block; 
	width: 330px; 
	height: 180px; 
	margin-left: 5px; 
	margin-top: 10px;
}

/* RECUPERAR CONTA */
#recuperarconta { 
	width: 500px; 
	height: 300px; 
	background-color: #FFF;
}
#recuperarconta span {}
#recuperarconta input {}
#recuperarconta label input {}
#recuperarconta label input:hover {}

/* Responsividade */
@media (max-width: 768px) {
    /* Ajustes no menu */
    #menu {
        padding: 10px 0;
    }

    #menu a {
        margin: 0 10px;
        font-size: 14px;
    }

    /* Ajustes no rodapé */
    #rodape {
        font-size: 12px;
        padding: 10px 0;
    }

    /* Ajustes nas imagens e textos */
    #inicio h1 {
        font-size: 16px;
    }

    #vip h1, #vip h2, #vip #vantagens h1 {
        font-size: 20px;
    }

    #ip {
        text-align: center;
        margin: 0 auto;
        width: 90%; /* Ajuste da largura */
        margin-top: 20px;
    }

    #parceiros {
        position: relative;
        width: 100%;
        margin-top: 40px;
        margin-left: 0;
    }

    #parceiros iframe {
        width: 100%;
        height: 200px;
    }

    #discord iframe {
        width: 100%;
        height: 400px;
    }

    /* Ajustes no login */
    #login {
        margin-left: 10px;
        margin-right: 10px;
        position: relative;
        width: auto;
        height: auto;
    }

    /* Ajustes no staff */
    #staff div {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    /* Ajustes para telas menores */
    #menu a {
        font-size: 12px;
        margin: 0 8px;
    }

    #rodape {
        font-size: 10px;
    }

    #inicio h1 {
        font-size: 14px;
    }

    #vip h1, #vip h2, #vip #vantagens h1 {
        font-size: 18px;
    }

    #ip span {
        font-size: 16px;
    }

    .button_copiar {
        font-size: 14px;
        padding: 6px 15px;
    }
}