/**
 * Lomba Dies Natalies SMKN 5 Batam 2022
 * 
 * Website Created By : Muhammad Hasan Firdaus
 * XII Multimedia 1 SMKN 5 Batam
 * 
 * Created with love for SMKN 5 Batam
 **/

* {
	margin: 0;
	padding: 0;
	background: unset;
	border: none;
	text-decoration: none;
	color: unset;
	box-sizing: border-box;
}
img {
	max-width: 100%;
}
:root {
	--background: #fff;
	--background2: #f6edf988;
	--primary: #ffc83a;
	--secondary: #ff008a;
	--third: #6100ff;
	--text: #0b1126cc;
	--button: #111c;
	--button-text: #fff;
	--shadow: #f7d0e5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Amaranth', sans-serif;
}
body {
	font-family: 'Montserrat', sans-serif;
	color: var(--text);
	line-height: 1.5;
	background-color: var(--background);
	overflow-x: hidden;
}
html {
	overflow-y: scroll;
}
.wrap {
	max-width: 1100px;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
}

#hero:before {
	content: '';
	filter: blur(100px);
	background-image: radial-gradient(var(--secondary), transparent, transparent);
	height: 500px;
	width: 500px;
	position: absolute;
	display: inline-block;
	z-index: -1;
	top: -50%;
	left: calc( 100% - 1090px );
}

#hero:after {
	content: '';
	filter: blur(100px);
	background-image: radial-gradient(var(--third), transparent, transparent);
	height: 500px;
	width: 500px;
	position: absolute;
	display: inline-block;
	z-index: -1;
	top: -50%;
	right: calc( 100% - 1090px );
}

#hero {
	text-align: center;
	padding: 80px 0;
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
}
#hero .logo img {
	max-height: 150px;
	margin: 10px;
	display: inline-block;
}
#hero .icon img {
	max-width: 200px;
}

#hero h1 {
	font-size: 45pt;
	color: var(--primary);
	background-image: linear-gradient(45deg, var(--primary) 20%, var(--secondary) 55%, var(--third) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 20px 0;
}

.btn {
	display: inline-block;
	background-color: var(--button);
	color: var(--button-text);
	padding: 20px 30px;
	font-weight: bold;
	border-radius: 40px;
	font-size: 15pt;
	margin: 10px;
}
.btn.secondary {
	color: var(--button);
	border: 2px solid var(--button);
	background-color: transparent;
}
.btn.sm {
	font-size: 12pt;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 5px;
	border: 1px solid var(--button);
}
#about {
	background-color: var(--background2);
	padding: 80px 0;
}

.with-left-title {
	display: grid;
	grid-template-columns: 500px minmax(100px, 1fr);
	column-gap: 40px;
	align-items: center;
}
.with-left-title h3 {
	text-transform: uppercase;
	color: var(--third);
	font-family: 'Montserrat', sans-serif;
}
.with-left-title h4 {
	color: var(--secondary);
	font-size: 25pt;
}
.with-left-title p {
	font-size: 12pt;
	line-height: 2.0;
}
.center {
	text-align: center;
}

#lomba,
#timeline,
#hadiah {
	padding: 40px 0;
	position: relative;
}
.heading h3 {
	font-size: 35pt;
	color: var(--primary);
	background-image: linear-gradient(45deg, var(--primary), var(--secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.heading p {
	font-weight: bold;
}
.lomba-list {
	text-align: left;
	display: grid;
	grid-template-columns: repeat(2, 50fr);
	margin: 40px 0;
	column-gap: 20px;
	row-gap: 20px;
}
.lomba-item {
	display: grid;
	grid-template-columns: 150px minmax(100px, 1fr);
	column-gap: 20px;
	align-items: center;
	background-color: var(--background2);
	padding: 20px;
	border-radius: 10px;
	border:1px solid var(--shadow);
}
.lomba-item .btn.secondary {
	background: var(--shadow);
	color: var(--secondary);
	border: unset;
	font-size: 10pt;
	text-transform: uppercase;
}
.lomba-item h4 {
	font-size: 20pt;
	color: var(--secondary);
}
.lomba-item p {
	margin: 10px 0;
}
.time-calendar {
	display: grid;
	grid-template-columns: repeat(3, 33.33fr);
	column-gap: 20px;
	row-gap: 20px;
	margin: 20px 0;
}
.timeline .icon img {
	max-height: 100px;
}
.timeline h4 {
	font-size: 25pt;
}
.timeline h5 {
	font-size: 12pt;
	font-family: 'Montserrat', sans-serif;
}
#footer {
	position: relative;
	padding: 40px 0;
}
#footer h6 {
	font-size: 12pt;
	text-align: center;
}

#timeline:after {
	background-image: radial-gradient(var(--third), transparent, transparent);
	content: '';
	height: 500px;
	width: 500px;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%,-50%);
	z-index: -1;
	filter: blur(100px);
}

#lomba:after,
#content:before,
#hadiah:after {
	background-image: radial-gradient(var(--primary), transparent, transparent);
	content: '';
	height: 500px;
	width: 500px;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-50%,-50%);
	z-index: -1;
	filter: blur(100px);
}
#pic {
	background-color: var(--background2);
	padding: 20px 0;
	margin: 20px 0;
}
#pic .wrap {
	display: grid;
	grid-template-columns: 80px minmax(100px, 1fr);
	column-gap: 50px;
	align-items: center;
}
#pic a {
	color: var(--secondary);
}
#content {
	padding: 40px 0;
	position: relative;
}
#content h3,
#pelaksanaan h3,
#hadiah h3,
#penilaian h3 {
	font-size: 35pt;
	color: var(--primary);
	background-image: linear-gradient(45deg, var(--primary), var(--secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	margin: 20px 0;
}
#content ul,
#content ol {
	margin-left: 15px;
}
ul { 
   list-style-type: disc; 
   list-style-position: outside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: outside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: outside; 
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: outside; 
   margin-left: 15px; 
}
#content ul li,
#content ol li {
	margin: 10px 0;
}
#pelaksanaan {
	text-align: center;
}
#pelaksanaan h4 {
	font-size: 28pt;
}
#hadiah {
	position: relative;
}
#hadiah .hadiah-grid,
.icons-grid {
	display: grid;
	grid-template-columns: 200px minmax(100px, 1fr);
	align-items: center;
	column-gap: 20px;
	row-gap: 20px;
	font-size: 14pt;
}
.icons-grid img {
	padding: 30px;
}
#hadiah table {
	overflow-wrap: break-word;
}
#hadiah table td {
	padding: 5px;
}
#hadiah table tr td:first-child {
	font-weight: bold;
	color: var(--secondary);
}
.buttons {
	position: sticky;
	top: 0;
}
#totop button {
	position: fixed;
	right: 20px;
	bottom: 20px;
	height: 50px;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary);
	color: var(--button-text);
	cursor: pointer;
	border-radius: 50%;
	z-index: 1000;
}
#poster {
	text-align: center;
}
#poster img {
	max-width: 500px;
}
@media screen and (max-width: 768px){
	.with-left-title {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}
	.lomba-list {
		grid-template-columns: 1fr;
	}
	.time-calendar {
		grid-template-columns: repeat(2, 50fr);
	}
	#hero:after {
		right: 0;
	}
	#hero:before {
		left: 0;
	}
	#pic .wrap {
		column-gap: 20px;
	}
}
@media screen and (max-width: 600px){
	.time-calendar {
		grid-template-columns: 1fr;
	}
	#hadiah .hadiah-grid,
	.icons-grid {
		grid-template-columns: 1fr;
		font-size: 12pt;
	}
	#hadiah .hadiah-grid .hadiah-icon,
	.icons-grid .icons-icon {
		text-align: center;
	}
	#hadiah .hadiah-grid .hadiah-icon img,
	.icons-grid .icons-icon img {
		height: 150px;
		padding: 0px;
	}
	#content h3,
	#pelaksanaan h3,
	#hadiah h3,
	.heading h3,
	#penilaian h3 {
		font-size: 25pt;
	}
	#pelaksanaan h4 {
		font-size: 20pt;
	}
}
@media screen and (max-width: 425px){
	#hero .logo img {
		max-height: 120px;
	}
	#hero h2 {
		font-size: 11pt;
	}
	#hero h1 {
		font-size: 40pt;
	}
	.btn {
		font-size: unset;
	}
	.lomba-item {
		grid-template-columns: 1fr;
		text-align: center;
	}
	#pic .wrap {
		column-gap: 10px;
	}
	#pic b {
		display: block;
	}
	#content {
		overflow-wrap: break-word;
	}

}