@font-face {
     font-family: Mario;
     src: url('https://raw.githubusercontent.com/Rph-nsmb/contests/refs/heads/main/assets/font/nsmbwii-font-ds-version.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}

 body {
     background: url("https://raw.githubusercontent.com/Rph-nsmb/contests/refs/heads/main/assets/background.png");
     background-size: 75%;
     font-family: Mario;
     text-align: center;
}

 .navbar {
     margin-left: auto;
     margin-right: auto;
     width:98%;
     margin-bottom:2rem;
     border-radius:25px;
     overflow: hidden;
     top: 1rem;
     position: -webkit-sticky;
    /* Safari */
     position: sticky;
     background: transparent;
     font-family:Ubuntu;
     font-size:200%;
     z-index:10;
	box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.1);
}

 .navbar_inside {
     backdrop-filter: blur(10px);
     display:flex;
     flex-direction: row;
     gap: 0rem;
     color:#FFFFFF;
     padding: 1rem;
     align-items: center;
}

 .navbar_icon {
 
	height: 5rem;
 	width:auto;
}

 .navbar_l {
 
   display: flex;
  align-items: center;
     font-weight: bold;
     padding: 0.25rem 1.5rem;
     border-radius: 12px;
     transition: all 0.2s;
     text-align:left;
     flex-shrink:0;
	 background:transparent;
}

 .navbar_l:hover {
 
      background: rgba(77, 77, 77, 0.1);
}

 .navbar_m{
     flex-grow:1;
}

 .navbar_r{
 
 height: 100%;
  display: flex;
  align-items: center;
     font-weight: bold;
     padding: 1rem 1.5rem;
     border-radius: 12px;
     transition: all 0.2s;
     text-align:right;
     flex-shrink:0;
	 background:transparent;
}

 .navbar_r:hover {
     background: rgba(77, 77, 77, 0.1);
}

 
 .nolink {
     text-decoration:none;
     color:#000;
     font-size: 125%;
}

 .flex-column {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 2rem;
}

 .flex-row {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
}

.main-page {

	margin-bottom: 5rem;
}

 .DS {
     display: flex;
     margin-left: auto;
     margin-right: auto;
     width: 50%;
     height: auto;
     transition: ease-in-out 0.5s !important;
}

 .DS:hover {
     width:70%;
}
 
.box {

	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
 
 }
 
.info_box {

	width:90%;
	background: rgba(0, 226, 255, 0.12);
	color: #00c1ff;
	backdrop-filter: blur(5px);
	font-family: Ubuntu;
	border-radius: 20px;
     box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1), inset 0px 5px 5px rgba(255, 255, 255, 0.01);
	padding: 5px;
	transition: ease-in-out 0.5s;
	backdrop-filter: blur(5px);
}
 
.info_box a {

	color:#00c1ff;
	text-decoration: underline #00c1ff;
}
 

.warning_box {

	width:90%;
	background: rgba(255, 0, 0, 0.12);
	color: #FF0000;
	backdrop-filter: blur(5px);
	font-family: Ubuntu;
	border-radius: 20px;
     box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1), inset 0px 5px 5px rgba(255, 255, 255, 0.01);
	padding: 5px;
	transition: ease-in-out 0.5s;
	backdrop-filter: blur(5px);
}

.warning_box a {

	color:#FF0000;
	text-decoration: underline #FF0000;
}

.warning_box h1, .info_box h1 {

	font-size: 36px;

}

.warning_box:hover, .info_box:hover {

	width: 95%;
}

.contest_box {

	width:85%;
	background: rgba(255, 255, 255, 0.2);
	color: #000000;
	backdrop-filter: blur(5px);
	font-family: Ubuntu;
	border-radius: 20px;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1), inset 0px 5px 5px rgba(255, 255, 255, 0.01);
	padding: 5px;
	transition: ease-in-out 0.5s;
	backdrop-filter: blur(5px);
}

.contest_box h3 {

	margin-top: -10px

}

.contest_box img {

	max-width: 100%;
	max-height: 50%;
	border-radius: 12px;
}

.staff_box {

	width:95%;
	background: rgba(255, 0, 0, 0.12);
	color: #FF0000;
	backdrop-filter: blur(5px);
	font-family: Ubuntu;
	border-radius: 20px;
     box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1), inset 0px 5px 5px rgba(255, 255, 255, 0.01);
	padding: 5px;
	transition: ease-in-out 0.5s;
	backdrop-filter: blur(5px);
}


.yt {
  position: relative;
  width: 50%;
  padding-bottom: 28.125%; /* 16:9 ratio = 9/16 = 0.5625 = 56.25% */
  height: 0;
  overflow: hidden;
  max-width: 100%;
    margin: 0 auto; 
}

.yt iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 25px;
}


h1 {

	font-size:96px;
}

h2 {

	font-size:64px;
}

h3 {

	font-size:60px;
}

h4 {

	margin-top: 0px;
	font-size: 48px;
}

h5 {

	margin-top: -30px;
	font-size: 30px;
	font-weight: normal;
	margin-bottom: 45px;
}

p {

	font-size:36px;
}

details {

	width: 90%;
	border-radius: 25px;
	background-color: rgba(0, 0, 0, 0.05);
	margin: 0 auto 10px auto;
	padding: 15px;
	backdrop-filter: blur(10px);

}

summary {

	margin-bottom: 5px;
	font-size: 30px;
}