@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,700&display=swap');
p,div{
	font-family: 'Barlow Condensed', sans-serif;  
	font-size: 40px;
}
body {
	background-image: url('summer.jpg');
   	background-size: cover;
}
.white-box {
	background-color: white;
	color: black;
	border: 5px outset #FFBF00;
	padding: 10px;
	margin: 10px auto;
	width: 800px;
	position: relative;
}
.centered {
    text-align:center; margin: 10px;
}
.header {
	font-family: 'Barlow Condensed', sans-serif;  
	color: #FFBF00;
    text-align:center;
    font-size:60px;
	font-weight: 600;
}
.h1,h2,h3,h4,h5,h6 {text-align: center; margin: 10px; color: #FFBF00;}
p.smalltxt {
	font-size:20px;
}
p.whitetxt { color: white; }
.banner-image {
  width: 100%;
}
.redtxt { color: red; text-align: center; margin: 5px; font-weight: bold;}
.image-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
a:link {
  color: #E49B0F;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #FFAC1C;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #FFEA00;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: FFBF00;
  background-color: transparent;
  text-decoration: underline;
}

.banner-image {
  width: 100%; 
  max-width: 100%; 
  height: auto; 
}

.small-box {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  background-color: #5865F2;
  color: white;
  text-align: center;
  border: 3px solid #505cde;
  border-radius: 20px;
}
.NunitoSans { font-family: 'Nunito Sans', sans-serif; }
.smaller-image {
  width: 200px; 
  height: auto; 
}
.small-box:hover {
  background-color: #FFBF00; 
  color: white;
  text-decoration: none; 
  border: double white;
  transition: 0.1s;
}
.stars { background-image: url("banner.png");}

.top-center {
  position: absolute;
  top: -30px; 
  left: 50%; 
  transform: translateX(-50%); 
  text-align: center;
  z-index: 1; 
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.discord {
  width: 300px;
  height: 150px;
  background-image: url("pictures/discord_logo_black.png");
  background-size: contain;
  background-repeat: no-repeat;
  transition: background-image 0.2s;
}

.discord:hover {
  background-image: url("pictures/discord_logo_yellow.png");
}
*/

.discord {
  transition: 0.2s;
  position: relative;
  z-index: 1000;
  width: 30%;
  max-width: 30%;
  margin: auto;
}
.discord:hover {
  filter: invert(42%) sepia(93%) saturate(1322%) hue-rotate(19deg) brightness(139%) contrast(119%);
}
.containerinner {
    display: flex;
    justify-content: space-between;
    width: auto; /* Adjust as needed */
}

.left,
.center,
.right {
    border: 1px;
    padding: 10px;
    box-sizing: border-box;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}