/*======================
       RESET          
 =======================*/

  * {
  	margin: 0;
  	padding: 0;
  	box-sizing: border-box;
  }
  
  @font-face {
    font-family: 'Inter';
    src: url('./Inter_18pt-SemiBold.ttf');
  }

  
  html {
  	scroll-behavior: smooth;
  }
  
  body {
  	display: flex;
  	flex-direction: column;
  	font-family: Inter;
  	background: linear-gradient(90deg, rgb(5, 00, 10), #120031);
  }
  
  header {
  	text-align: center;
  	margin: 1.2rem 0.8rem;
  	line-height: 1.6;
  }
  
  header h1 {
  	color: #f4f4f4;
  }
  
  main {
  	margin: 2rem 1rem;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	gap: 40px;
  }
  
  #detalhes {
  	display: flex;
  	flex-direction: column;
  	gap: 10px;
  }
  
  details summary {
  	color: #f4f4f4;
  	font-size: 16px;
  	font-weight: 500;
  }
  
  #detalhes[open],
  #detalhes[open] summary {
  	color: #f4f4f4;
  	font-size: 16px;
  }
  
  .cor {
  	margin: 0.4rem 0.6rem;
  	border: 1px solid white;
  	border-radius: 10px;
  	box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  	padding: 5px 20px;
  	text-align: center;
  	width: 100%;
  	font-family: Georgia;
  	transition: transform 0.1s;
  }
  
  .cor:active {
  	transform: translateY(4px);
  }
  
  #RGB {
  	color: #f4f4f4;
  	font-size: 2em;
  	font-weight: 600;
  	letter-spacing: 2px;
  	margin: 2rem 0.4rem;
  	padding: 22px 20px;
  	border: 1px solid transparent;
  	backdrop-filter: blur(10px);
  	border-radius: 12px;
  	width: 100%;
  	text-align: center;
  }
  
  #buttons {
  	padding: 6px 0px;
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-around;
  	align-items: center;
  	gap: 8px;
  	position: fixed;
  	bottom: 10px;
  	background-color: rgba(200, 200, 200, 0.1);
  	box-shadow: 0 0 20px rgba(200, 200, 200, 0.2);
  }
  
  #buttons button {
  	font-size: 14px;
  	background: linear-gradient(180deg, rgb(5, 0, 10), #120031);
  	box-shadow: 0 0px 20px rgba(5, 0, 10, 0.9);
  	backdrop-filter: blur(10px);
  	border: 1px solid transparent;
  	border-radius: 40px;
  	padding: 10px 16px;
  	color: #167df9;
  	font-weight: 500;
  	width: 80%;
  	transition:
  		transform 0.1s,
  		color 0.1s;
  }
  
  #buttons button:active {
  	transform: translateY(-4px);
  	color: transparent;
  }
  
  .footer {
  	margin-top: 50px;
  	padding: 20px;
  	text-align: center;
    margin-bottom: 9rem;
  	border-top: 1px solid rgba(255, 255, 255, 0.1);
  
  	color: #cbd5f5;
  	font-size: 14px;
  }
  
  .footer-links {
  	margin: 10px 0;
  	display: flex;
  	justify-content: center;
  	gap: 15px;
  	flex-wrap: wrap;
  	opacity: 0.8;
  	animation: showup 1.2s ease forwards;
  }
  
  .autor {
  	opacity: 0.6;
  	font-size: 12px;
  }