/* Import all the Fonts */
@font-face {
  font-family: 'MinecraftSevenv2';
  src: url('./src/fonts/Minecraft-Seven_v2.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MinecraftTenv2';
  src: url('./src/fonts/Minecraft-Tenv2.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('./src/fonts/NotoSans-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



/* CSS reset ============================================================================================================== */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 1.5;
  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  font-weight: 400;
  outline: none;
  border: none;
}



/* UTILITY CLASSES STYLING ================================================================================================= */

.hollow-btn {
  text-wrap: nowrap;
  color: #6cc349;
  border: 2px solid #3c8527;
  padding: 0.375rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  height: 75%;
  letter-spacing: normal;
  text-transform: uppercase;
  background: transparent;
}

.hollow-btn:enabled:hover {
  cursor: pointer;
  background-color: #343e40;
  color: #86d562;
}

.btn {
  background: #3c8527;
  box-shadow: inset 0 -6px 0 #2a641c, inset 0 6px 0 #52a535;
  color: white;
  font-weight: 800;
  letter-spacing: .03em;
  padding: .9375rem 1.75rem;
  font-size: 1.125rem;
  line-height: 1.25rem;
  border: 2px solid #262423;
  font-weight: 800;
  letter-spacing: .03em;
  justify-items: center;
  text-transform: uppercase;
}

.btn::after {
  content: url('./src/img/svg/arrow.svg');
  width: 14px;
  height: 26px;
  display: inline-block;
  margin: auto 0;
  margin-left: 4px;
  transform: rotate(270deg);
}

form:invalid .btn:enabled {
  background-color: #ede5e2;
  color: #aba4b0;
  border-top: #aba4b0;
  box-shadow: none;
  cursor: default;
}

.btn:enabled:hover {
  background-color: #367723;
  cursor: pointer;
}

.section-headings {
  font-size: 3.5rem;
  line-height: 3.5rem;
  font-family: 'MinecraftTenv2';
  color: white;
  text-align: center;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.sub-heading-link {
  display: block;
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  color: #6cc349;
  font-weight: bolder;
}

.sub-heading-arrow-link {
  font-size: 1.125rem;
  text-decoration: none;
}

.sub-heading-arrow-link::after {
  content: url('./src/img/svg/link-arrow-green.svg');
  width: 7px;
  height: 7px;
  position: relative;
  top: -0.2rem;
  right: -0.8rem;
  display: inline-block;
}

.sub-heading-arrow-link:hover::after,
.watch-trailer-tag::after {
  content: url('./src/img/svg/link-arrow.svg');
}

.sub-heading-link:hover {
  color: white;
  text-decoration: underline 1px solid white;
}

.arrows {
  display: flex;
  gap: 4rem;
  max-width: 1840px;
  margin: auto;
}

.arrow {
  fill: white;
  width: 40px;
  height: 40px;
  cursor: pointer;
}


.slider {
  position: relative;
  height: 100%;
  display: flex;
  gap: 1.5rem;
}

.slider-card {
  display: inline-block;
  position: relative;
  aspect-ratio: 1 / 1;
}

.wrapper {
  max-width: 1920px;
  margin: auto;
  width: 100%;
  display: flex;
  align-items: start;
  gap: 3rem;
}

#hamburger:active,
#ham-cross:active,
#hamburger:focus,
#ham-cross:focus,
button:focus,
a:focus,
select:focus,
input:focus {
  border: 2px solid blue;
  outline: 1px solid white;
}



/* ========================================================================================================================= */
/* HEADER ================================================================================================================== */

header {
  width: 100%;
  backdrop-filter: blur(10px);
  background-color: rgba(38, 36, 35, .9);
  height: 80px;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .25);
  position: sticky;
  top: 0;
  z-index: 9999;
}

.header-divs {
  width: 100%;
  padding: 1rem 3.25rem 1rem 3.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1920px;
  margin: 0 auto;
  height: 80px;
}

.logo-div a {
  width: 222px;
  display: block;
  margin-right: 1.5rem;
}

.primary-navigation {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 100%;
}

.navigations ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.second-navigation {
  display: flex;
  height: 100%;
  margin-left: 0.75rem;
}

.navigations li {
  height: 100%;
  list-style: none;
  padding: 0 0.5rem;
  align-content: center;
  margin: 0 0.125rem;
}

.nav-btn {
  color: white;
  background-color: transparent;
  border: none;
  padding: 0.625rem 0.5rem 0.625rem 0.5rem;
  display: flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  text-transform: uppercase;
  cursor: pointer;
  gap: 7px;
}

.nav-btn::after {
  content: url('./src/img/svg/arrow.svg');
  width: 10px;
}

.nav-btn:focus::after {
  content: url('./src/img/svg/arrow-green.svg');
  transform: rotate(180deg);
}

.nav-btn:hover::after {
  content: url('./src/img/svg/arrow-green.svg');
}

.nav-btn:focus,
.nav-btn:hover {
  color: #86d562;
}

.mobile-search {
  display: none;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: .06em;
}

.mobile-header-div {
  display: none;
}

#ham-cross {
  display: none;
  cursor: pointer;
}

#ham {
  display: none;
}

#hamburger {
  display: block;
  height: 48px;
  height: 48px;
  cursor: pointer;
}



/* ========================================================================================================================= */
/* MAIN CONTENT ===========================================================================================================- */

main {
  width: 100%;
  display: flex;
  flex-direction: column;
}


/* HERO SECTION ============================================================================================================ */

#hero-section {
  background-color: #171615;
}

#hero-img-ctrl-1,
#hero-img-ctrl-2,
#hero-img-ctrl-3,
#hero-img-ctrl-4 {
  display: none;
}

#hero-controls {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
  border-top: 4px solid #3d3938;
  padding: 2rem 0;
  overflow-y: visible;
  gap: 0.9rem;
  background-color: #171615;
  max-width: 1920px;
}

.hero-ctrl-imgs {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  grid-template-rows: minmax(64px, 1fr);
  gap: 1.8rem;
  justify-content: center;
  align-items: center;
  width: 40%;
}

.hero-img {
  width: 100%;
  height: 78vh;
  max-height: 1100px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}

.hero-img-ctrl label {
  width: 100%;
  height: 100px;
  background-size: cover;
  background-position: center;
  display: block;
  cursor: pointer;
}

.hero-desc {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  color: white;
  padding: 3rem 2rem 0 1.4rem;
  max-width: 33%;
  background-color: #171615;
  border-top: 4px solid #3d3938;
  margin-top: -10rem;
  min-width: 436px;
  gap: 1.2rem;
}

.hero-desc a {
  color: white;
}

.hero-desc h2 {
  font-family: "MinecraftSevenv2";
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: white;
}

.hero-desc p {
  color: #d0c5c0;
}

#hero-ctrl-imgs {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}


#hero-img-ctrl-1:checked~#hero-controls .hero-ctrl-imgs .hero-img-ctrl:nth-child(1),
#hero-img-ctrl-2:checked~#hero-controls .hero-ctrl-imgs .hero-img-ctrl:nth-child(2),
#hero-img-ctrl-3:checked~#hero-controls .hero-ctrl-imgs .hero-img-ctrl:nth-child(3),
#hero-img-ctrl-4:checked~#hero-controls .hero-ctrl-imgs .hero-img-ctrl:nth-child(4) {
  border: 2px solid #86d562;
}

#hero-img-ctrl-1:checked~#hero-controls .hero-desc:nth-of-type(1),
#hero-img-ctrl-2:checked~#hero-controls .hero-desc:nth-of-type(2),
#hero-img-ctrl-3:checked~#hero-controls .hero-desc:nth-of-type(3),
#hero-img-ctrl-4:checked~#hero-controls .hero-desc:nth-of-type(4) {
  display: flex;
}

#hero-img-ctrl-2:checked~.hero-img {
  background-image: url('./src/img/hero/minecraft-at-offer-main.jpg');
}

#hero-img-ctrl-3:checked~.hero-img {
  background-image: url('./src/img/hero/newyear-sale-main.jpg');
}

#hero-img-ctrl-1:checked~.hero-img {
  background-image: url('./src/img/hero/stranger-things-dlc-main.jpg');
}

#hero-img-ctrl-4:checked~.hero-img {
  background-image: url('./src/img/hero/mayhem-mount-main.jpg');
}



/* DISCOVER SECTION ======================================================================================================== */

#discover-section {
  background-color: #171615;
  padding: 3rem 3.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(auto, 25%));
  width: 100%;
  gap: 1.5rem;
  justify-content: center;
  justify-items: center;
  margin: 3rem auto 0 auto;
  max-width: 1920px;
}

.discover-grid a {
  width: 100%;
  text-decoration: none;
}

.discover-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.discover-card-content {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  flex-wrap: wrap;
}

.discover-card-content p {
  color: #aba09c;
  font-size: .875rem;
  margin-bottom: 2rem;
}

.discover-card-content h3 {
  font-size: 1.5rem;
  letter-spacing: .04em;
  color: white;
  margin: 1.5rem 0 1rem 0;
}

.discover-card-logo-container {
  display: flex;
  justify-content: center;
  align-items: baseline;
  border-top: 2px solid #262423;
  list-style: none;
  width: 100%;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.4rem;
  justify-content: flex-start;
}

.discover-card-logo-container li {
  width: 2rem;
  height: 2rem;
  max-height: 20px;
  max-width: 20px;
  color: #6b6562;
}

.discover-card img {
  width: 100%;
}



/* MARKETPLACE SECTION ===================================================================================================== */

#marketplace-section {
  padding: 5rem 0 11rem 4rem;
  background: url('./src/img/marketplace/marketplace-bgnd.png') repeat-x bottom / auto, #242424;
}

.marketplace-addons * {
  text-align: inherit;
}

.marketplace-addons h2 {
  background: linear-gradient(270deg, #fff27a, #ffc42b) text;
  color: transparent;
}

.marketplace-addons {
  width: 60%;
  max-width: 435px;
  text-align: left;
}

.marketplace-addons p {
  color: white;
  margin: 1rem 0 2rem 0;
}

.marketplace-addons>.btn {
  background-color: #ffc42b;
  box-shadow: inset 0 -6px 0 #db9f21, inset 0 6px 0 #ffd953;
  color: #071927;
}

.marketplace-addons>.btn:hover {
  background-color: #ffe075;
}

.marketplace-addons>.btn:after {
  content: url('./src/img/svg/arrow-black.svg');
}

.marketplace-card {
  width: 100%;
  max-width: 280px;
  background-color: #3d3938;
  padding: 1rem;
  color: white;
  text-decoration: none;
}

.marketplace-card:hover h3 {
  text-decoration: underline 1px solid;
}

.marketplace-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 42%;
}

.marketplace-card img {
  width: 100%;
  margin-bottom: 1rem;
}

.marketplace-card-content>h3 {
  font-size: 1.125rem;
  font-weight: 700;
  width: 90%;
}

.marketplace-card-content>p {
  font-size: .875rem;
  color: #d0c5c0;
  margin-bottom: 0.5rem;
}

.marketplace-card-content>div {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.stars::before {
  content: url('./src/img/svg/star.svg');
  position: relative;
  bottom: 1px;
}

.minecoins::before {
  content: url('./src/img/svg/minecoin.svg');
  position: relative;
  top: 4px;

}

.stars {
  color: white;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 3px;
}

.minecoins {
  font-family: 'MinecraftTenv2';
  color: #ffc42b;
  font-size: 1.25rem;
  text-shadow: 1px 1px 0 black;
  display: flex;
  align-items: center;
  gap: 3px;
}

.marketplace-addons-slider {
  width: 100%;
  max-width: 1416px;
  overflow: hidden;
  height: 19.4rem;
}

#marketplace-section .arrows {
  margin-top: 2rem;
}

#marketplace-section .arrow:hover {
  fill: #db9f21;
}


/* GAMEPLAY TRAILERS SECTION =============================================================================================== */

#trailers-section {
  background-color: #171615;
  padding: 3.5rem 3.75rem 10rem 3.75rem;
  justify-items: center;
}

.trailers-accordion {
  margin-top: 3rem;
  display: none;
  max-width: 1920px;
}

.trailers-tablist {
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
  max-width: 1920px;
  margin-top: 3rem;
}

.trailer-title-box {
  list-style: none;
  background-color: #171615;
  box-shadow: inset 0 -4px 0 0 black, inset -4px 0 0 0 #262423, inset 0 4px 0 0 #262423;
}

.trailer-title-box:open {
  background-color: #262423;
  box-shadow: inset -4px 0 0 0 #6b6562, inset 0 4px 0 0 #6b6562;
}

.trailer-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  padding: 1.5rem;
  gap: 1rem;
  position: relative;
}

.trailer-summary::after {
  content: url('./src/img/svg/arrow.svg');
  width: 0.8rem;
  position: absolute;
  right: 2rem;
}

#minecraft-trailer:checked~.trailer-tablist-controls-box>.trailer-tablist-controls:nth-of-type(1)>img,
#minecraft-dungeons-trailer:checked~.trailer-tablist-controls-box>.trailer-tablist-controls:nth-of-type(2)>img,
#minecraft-legends-trailer:checked~.trailer-tablist-controls-box>.trailer-tablist-controls:nth-of-type(3)>img,
#minecraft-education-trailer:checked~.trailer-tablist-controls-box>.trailer-tablist-controls:nth-of-type(4)>img,
.trailer-title-box:open .trailer-summary-img {
  border: 2px solid black;
  outline: 2px solid white;
}

.trailer-title-box:open .trailer-summary::after {
  transform: rotate(180deg);
}

.trailer-summary-h3 {
  font-size: 1.5rem;
  color: #d0c5c0;
  font-family: MinecraftSevenv2;
}

.trailer-summary-img {
  width: 48px;
  height: 48px;
}

.trailer-description-box {
  padding: 0 1rem 1rem 1rem;
  box-shadow: inset 0 -4px 0 0 black, inset -4px 0 0 0 #6b6562;
}


.trailer-desc-video-div {
  position: relative;
  width: 100%;
}

.trailer-desc-video {
  width: 100%;
}

.watch-trailer-tag {
  color: white;
  font-size: 1rem;
  padding: 0.5rem 2rem 0.5rem 1.5rem;
  background-color: #171615;
  position: absolute;
  right: 0;
  bottom: 0.3125rem;
  opacity: 0.9;
}

.watch-trailer-tag:hover {
  text-decoration: underline 1px solid white;
}


.trailer-desc {
  padding-top: 1rem;
  display: flex;
  align-items: start;
  gap: 1rem;
  color: white;
  font-size: 1rem;
}

.trailer-btn {
  width: 30%;
  min-width: 223px;
  margin: auto 0;
  height: 4rem;
}

.trailer-tablist-controls-box {
  width: 35%;
  max-width: 456px;
  min-width: 423px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  box-shadow: inset -4px 1px 1px 0px #2a2626;
  height: 100%;
}

.trailer-tablist-controls {
  cursor: pointer;
  display: flex;
  width: 100%;
  padding: 1.5rem;
  gap: 1.5rem;
  align-items: center;
  background-color: #262423;
  box-shadow: inset 0 2px 0 0 hsla(0, 0%, 100%, .2), inset 0 -2px 0 0 #000, inset 4px 0 0 0 rgba(0, 0, 0, .3), inset 0 0 0 0 hsla(0, 0%, 100%, .15);
}

.trailer-tablist-desc-box {
  width: 65%;
  max-width: 1348px;
  height: 100%;
}

.trailer-tablist-desc {
  padding: 2rem;
  background-color: #3d3938;
  color: white;
  box-shadow: inset 0 4px 0 0 hsla(0, 0%, 100%, .2), inset 0 -4px 0 0 rgba(0, 0, 0, .32), inset -4px 0 0 0 hsla(0, 0%, 100%, .16);
  display: none;
}

.trailers-tablist>input {
  display: none;
}

#minecraft-trailer:checked~.trailer-tablist-desc-box>.trailer-tablist-desc:nth-of-type(1),
#minecraft-dungeons-trailer:checked~.trailer-tablist-desc-box>.trailer-tablist-desc:nth-of-type(2),
#minecraft-legends-trailer:checked~.trailer-tablist-desc-box>.trailer-tablist-desc:nth-of-type(3),
#minecraft-education-trailer:checked~.trailer-tablist-desc-box>.trailer-tablist-desc:nth-of-type(4) {
  display: block;
}

#minecraft-trailer:checked~.trailer-tablist-controls-box>.trailer-tablist-controls:nth-of-type(1),
#minecraft-dungeons-trailer:checked~.trailer-tablist-controls-box>.trailer-tablist-controls:nth-of-type(2),
#minecraft-legends-trailer:checked~.trailer-tablist-controls-box>.trailer-tablist-controls:nth-of-type(3),
#minecraft-education-trailer:checked~.trailer-tablist-controls-box>.trailer-tablist-controls:nth-of-type(4) {
  background-color: #3d3938;
  box-shadow: inset 0 4px 0 0 hsla(0, 0%, 100%, .2), inset 0 -4px 0 0 #000, inset 4px 0 0 0 rgba(0, 0, 0, .3), inset 0 0 0 0 hsla(0, 0%, 100%, .15);
}


/* LATEST NEWS SECTION ===================================================================================================== */

#latestnews-section {
  background-color: #262423;
  padding: 5rem 4.5rem;
}

.news {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: rgba(23, 22, 21, .8);
  padding: .875rem .75rem .25rem;
  border-bottom: 3px solid #4d4c4b;
  text-align: left;
  position: absolute;
  bottom: 0;
  min-height: 6.5rem;
  height: auto;
}

.news span {
  background-color: white;
  box-shadow: 2px 2px 0 0 #0000004d;
  color: #1d1e1e;
  display: inline-block;
  font-family: 'MinecraftSevenv2';
  font-size: .875rem;
  letter-spacing: .56px;
  line-height: 18px;
  padding: 1px 4px;
  text-align: center;
  text-transform: uppercase;
}

.news h3 {
  font-family: 'MinecraftSevenv2';
  color: white;
  margin: 0.375rem 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.04rem;
  line-height: 1.5rem;
}

.news p {
  color: white;
  font-size: .875rem;
  opacity: 0%;
  display: none;
  margin-bottom: 0.4rem;
}

.news-grid a:hover .news>p {
  display: block;
  opacity: 100%;
}


.news-grid a:hover .news-card>img {
  scale: 1.025;
  transition: all 0.3s ease-in-out;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(auto, 25%));
  width: 100%;
  gap: 2rem;
  justify-content: center;
  max-width: 1920px;
  justify-items: center;
  margin: 4rem auto 0 auto;
}

.news-grid a {
  width: 100%;
  text-decoration: none;
}

.news-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  overflow: hidden;

}

.news-card img {
  width: 100%;
}

.news-card>div {
  width: 100%;
  position: relative;
  height: 0;
}



/* GO TO DOWNLOADS BANNER ================================================================================================== */

#download-banner {
  background-color: #171615;
  padding: 2rem;
  justify-items: center;
}

#download-banner>div {
  display: flex;
  width: 100%;
  align-items: center;
  box-shadow: 0 4px 0 0 #000 inset, 0 -4px 0 0 #3a3735 inset, 4px 0 0 0 #3a3735 inset, -4px 0 0 0 #000 inset;
  gap: 2rem;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  width: 96%;
  margin: auto;
  max-width: 1920px;
}

#download-banner img {
  background-color: #2a641c;
  flex-shrink: 0;
  height: 75px;
  margin: 0 auto;
  width: 75px;
}

.download-first-div {
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  color: #d0c5c0;
  font-size: 1rem;
}

#download-banner h2 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .25px;
  color: #ede5e2;
}

.go-to-download {
  color: white;
  border: 2px solid white;
  font-size: 1rem;
  padding: 0.625rem 0.625rem 0.625rem 1rem;
  letter-spacing: .51px;
  margin: 0;
  min-width: 14.375rem;
  width: 20%;
}

.go-to-download:enabled:hover {
  background-color: white;
  color: black;
}



/* NEWSLETTER FORM SECTION ================================================================================================= */

#newsletter-section {
  background-color: #171615;
  padding: 4rem 1rem;
  box-shadow: inset 0 4px 0 0 rgba(0, 0, 0, .6);
}

.newsletter h2 {
  letter-spacing: -.015em;
}

.newsletter {
  background: linear-gradient(0deg, hsla(0, 0%, 100%, .04) 0, hsla(0, 0%, 100%, .04) 100%), var(--mc-core-grey-6, #262423);
  box-shadow: inset 0 -4px 0 0 #000, inset -4px 0 0 0 #3d3938, inset 4px 0 0 0 #000, inset 0 4px 0 0 #3d3938;
  margin: 0 auto;
  max-width: 960px;
  padding: 1.5rem;
}

.requiredStar {
  color: #ff605e;
  margin: 0 4px;
}

.form-divider {
  border: 1px solid #3d3938;
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, .25);
  margin: 1.5rem 0;
  width: 90%;
}

.newsletter label,
.newsletter fieldset>p {
  color: #ede5e2;
  font-weight: 700;
  letter-spacing: -.24px;
  margin: 8px 0;
}

.newsletter-form-fields {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.newsletter-form-fields>div {
  display: flex;
  flex-direction: column;
  width: 50%;
  align-items: start;
  justify-content: center;
}

.newsletter-form-fields input,
.newsletter-form-fields select {
  letter-spacing: -.24px;
  color: #ede5e2;
  line-height: normal;
  align-items: center;
  background: #262423;
  border: 2px solid #898481;
  box-shadow: inset 0 6px 0 0 rgba(0, 0, 0, .5);
  display: flex;
  font-weight: 400;
  font: inherit;
  gap: 1rem;
  height: 48px;
  width: 100%;
  padding: 8px 12px;
}

.newsletter-form-submitdiv {
  display: flex;
  justify-content: space-between;
  color: #ede5e2;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: -.21px;
  line-height: 20px;
  gap: 2rem;
}

.newsletter-form-submitdiv .btn {
  margin-left: 5px;
  flex-shrink: 0;
}

#newsletter-country option {
  background-color: #6b6562;
  border-bottom: 2px solid #171615;
  border-left: 2px solid #171615;
  border-right: 0;
  border-top: 0;
  box-shadow: inset -2px 2px 0 0 #817c7a;
  color: white;
  font-size: 1rem;
  letter-spacing: .16px;
  padding: 0.5rem 0.725rem;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}



/* COLLECTIBLES SECTION ==================================================================================================== */

#collectibles-section {
  width: 100%;
  background-color: black;
  padding: 3rem 0 3rem 4rem;
}

.collectibles * {
  text-align: inherit;
}

.collectibles {
  width: 35%;
  max-width: 357px;
  text-align: left;
}

.wallpaper-card>img {
  width: 100%;
  max-width: 280px;
}

.wallpaper-card>div {
  position: absolute;
  bottom: 0;
  padding: 1rem 1rem 1.5rem 1rem;
  background-color: #171615;
  width: 100%;
  color: white;
}

.wallpaper-card h3 {
  font-size: 1.5rem;
  letter-spacing: .04em;
  line-height: 1.5325rem;
  margin-top: 4px;
  max-width: calc(100% - 32px);
}

.wallpaper-card span {
  font-family: 'MinecraftSevenv2';
  text-transform: uppercase;
}

.wallpaper-card div::after {
  content: url('./src/img/svg/download.svg');
  display: inline-block;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 2.3rem;
  right: 1rem;
}

.wallpaper-slider {
  width: 100%;
  max-width: 1416px;
  overflow: hidden;
  height: 17.4rem;
}

.collectibles p {
  color: white;
  margin: 1rem 0 2rem 0;
}

#collectibles-section .arrow:hover {
  fill: #3c8527;
}


/* ========================================================================================================================= */
/* FOOTER ================================================================================================================== */

footer {
  background-color: #313131;
}



/* FOLLOW LINK BUTTONS ===================================================================================================== */

#follow-minecraft {
  padding: 1.5rem 0;
  background-color: black;
}

#follow-minecraft h2 {
  color: white;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

#follow-minecraft ul {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  list-style: none;
  margin: auto;
  align-items: center;
  justify-content: center;
}

.follow-buttons {
  padding: 5px;
  border-radius: 20px;
  background-color: #262423;
  display: block;
  width: 42px;
  height: 42px;
}

#follow-minecraft svg {
  fill: white;
  width: 100%;
  height: 100%;
}

.follow-buttons.youtube:hover {
  background-color: #fa0020;
}

.follow-buttons.instagram:hover {
  background-color: #f1437a;
}

.follow-buttons.facebook:hover {
  background-color: #046ae4;
}

.follow-buttons.twitter-x:hover {
  background-color: #1891ee;
}

.follow-buttons.tiktok:hover {
  background-color: #E53D4F;
}

.follow-buttons.whatsapp:hover {
  background-color: #25D366;
}

.follow-buttons.discord:hover {
  background-color: #5865F2
}

.follow-buttons.spotify:hover {
  background-color: #1ED760;
}

/* UPPER FOOTER ============================================================================================================ */

#upper-footer {
  background-color: #111111;
}

#upper-footer>div {
  display: grid;
  padding: 3.4rem 0.5rem 4rem 1.5rem;
  gap: 1rem;
  grid-template-columns: minmax(auto, 40%) repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: 'xbox-mojang-logo-div footer-nav-1 footer-nav-2 esrd-rating-div'
    'mojang-copyright-div footer-nav-1 footer-nav-2 esrd-rating-div';
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

#upper-footer h2 {
  color: white;
  font-size: 1.125rem;
  letter-spacing: .08rem;
  line-height: 1.5rem;
  margin-top: 0.5rem;
}

#upper-footer ul {
  list-style: none;
}

#upper-footer li a {
  color: #a0e081;
  font-size: .75rem;
  text-decoration: none;
}

.mojang-copyright-div ul {
  display: flex;
  gap: 0.5rem;
}

.mojang-copyright-div p {
  margin: 1rem 0 0.8rem 0;
}

.xbox-mojang-logo-div {
  grid-area: xbox-mojang-logo-div;
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  padding-top: 0.5rem;
}

.mojang-copyright-div {
  grid-area: mojang-copyright-div;
  color: #d1cfce;
  font-size: .75rem;
  line-height: 14px;
}

.footer-nav-1 {
  grid-area: footer-nav-1;
  padding: 0 1rem;
}

.footer-nav-2 {
  grid-area: footer-nav-2;
  padding: 0 1rem;
}

.esrd-rating-div {
  grid-area: esrd-rating-div;
  padding: 0 1rem;
  width: 100%;
}

#upper-footer li a:hover,
#bottom-footer li a:hover {
  text-decoration: underline 1px solid currentColor;
}



/* BOTTOM FOOTER =========================================================================================================== */

#bottom-footer {
  display: grid;
  width: 100%;
  gap: 1rem;
  grid-template-columns: 10% auto 10%;
  margin: 0 auto;
  max-width: 1440px;
  padding: 2rem 1.5rem;
  grid-template-areas: 'language-selector bottom-footer-nav microsoft-logo';
}

.bottom-footer-nav ul a {
  font-size: .725rem;
  color: white;
  text-decoration: none;
}

.bottom-footer-nav {
  grid-area: bottom-footer-nav;
  display: flex;
  justify-content: center;
  height: 100%;
}

.bottom-footer-nav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  list-style: none;
  gap: 1.2rem;
  flex-wrap: wrap;
}

#bottom-footer button {
  align-items: center;
  background-color: transparent;
  border: 0;
  display: flex;
  font-size: .725rem;
  padding: 0 3px;
  color: white;
  gap: 0.7rem;
  height: 100%;
  cursor: pointer;
}

.microsoft-logo {
  grid-area: microsoft-logo;
}

.language-selector {
  grid-area: language-selector;
}

/* ========================================================================================================================= */




/* ========================================================================================================================= */
/* ========================================================================================================================= */
/* ========================================== MEDIA QUERIES FOR RESPONSIVE LAYOUT ========================================== */
/* ========================================================================================================================= */
/* ========================================================================================================================= */




/* DESKTOPS AND LARGE SCREEN DEVICES ======================================================================================= */

@media (max-width: 1199px) {
  .header-divs {
    padding: 1rem;
  }

  #discover-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .section-headings {
    font-size: 2rem;
    line-height: 2rem;
  }

  #marketplace-section,
  #collectibles-section {
    padding-left: 1.5rem;
  }

  .collectibles {
    width: 62%;
  }

  .marketplace-addons {
    width: 84%;
  }

  #download-banner>div {
    width: 100%;
  }

  #upper-footer>div {
    padding: 3.4rem 1rem 4rem 1rem;
    grid-template-columns: repeat(3, 1fr) minmax(auto, 240px);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'xbox-mojang-logo-div footer-nav-1 footer-nav-2 esrd-rating-div'
      '. mojang-copyright-div mojang-copyright-div .';
    max-width: 960px;
  }

  .xbox-mojang-logo-div {
    justify-content: center;
    align-content: flex-start;
  }

  #trailers-section {
    padding: 3.5rem 1.5rem 10rem;
  }

  .trailers-accordion {
    display: block;
  }

  .trailers-tablist {
    display: none;
  }

  .hero-img-ctrl label {
    height: 64px;
  }

  .trailer-summary-h3 {
    font-size: 1.25rem;
  }

}

/* LAPTOPS AND MEDIUM SCREEN DEVICES ======================================================================================= */

@media (max-width: 991px) {
  .mobile-header-div {
    display: flex;
    padding: 1rem 2rem;
  }

  .main-header-div {
    display: flex;
    position: absolute;
    top: 0;
    left: -100%;
    background: #171615;
    height: 100vh;
    max-width: 420px;
    flex-direction: column;
    padding: 1rem;
    align-items: baseline;
    justify-content: start;
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
  }

  .main-header-div>.logo-div a {
    width: 145px;
  }

  .main-header-div>.logo-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #3d3938;
    padding-bottom: 0.5rem;
  }

  .primary-navigation>ul,
  .second-navigation,
  .second-navigation>ul,
  .primary-navigation {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    height: auto;
    align-items: baseline;
    width: 100%;
    margin: 0;
  }

  .main-header-div li {
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #3d3938;
  }

  .main-header-div .nav-btn {
    width: 100%;
    padding: 14px 5px;
    font-size: 0.85rem;
    gap: 20px;
  }

  .primary-navigation .nav-btn {
    padding-left: 43px;
  }

  .buy-now-li,
  .buy-now-li * {
    display: none;
  }

  #ham-cross,
  .mobile-search {
    display: block;
    padding-right: 5px;
  }

  .nav-btn::after {
    position: absolute;
    right: 23px;
    transform: rotate(270deg)
  }

  #ham:checked~.main-header-div {
    left: 0;
  }

  #bottom-footer {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: 'language-selector . microsoft-logo'
      'bottom-footer-nav bottom-footer-nav bottom-footer-nav';
  }

  .bottom-footer-nav,
  .bottom-footer-nav ul {
    justify-content: start;
  }

}

@media (max-width:960px) {
  .hero-desc {
    min-width: 42%;
    max-width: 260px;
  }

  .discover-grid,
  .news-grid {
    grid-template-columns: repeat(2, minmax(auto, 50%));
  }

}

/* TABLETS AND SMALL SCREEN DEVICES ======================================================================================== */

@media (max-width:767px) {
  .hero-img {
    height: 55vh;
    background-size: cover;
  }

  #hero-controls {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
  }

  .hero-desc {
    text-align: center;
    width: 90%;
    max-width: none;
    min-width: auto;
    justify-content: center;
    align-items: center;
  }

  #download-banner>div {
    flex-direction: column;
    justify-content: center;
  }

  .download-first-div {
    width: 100%;
  }

  .newsletter-form-fields,
  .newsletter-form-fields>div,
  .newsletter-form-submitdiv {
    flex-direction: column;
    width: 100%;
  }

  #marketplace-section,
  #collectibles-section {
    padding-left: 0;
  }

  .wrapper {
    flex-direction: column;
    align-items: center;
  }

  .marketplace-addons,
  .collectibles {
    flex-direction: column;
    text-align: center;
    max-width: none;
  }

  .arrows {
    justify-content: center;
    margin-top: 1.5rem;
  }

  .wallpaper-slider,
  .marketplace-addons-slider {
    max-width: 280px;
  }

  #latestnews-section {
    padding: 5rem 2rem;
  }

  #upper-footer>div {
    /* padding: 1rem; */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr 1fr;
    grid-template-areas: 'footer-nav-1 footer-nav-2 esrd-rating-div'
      'xbox-mojang-logo-div xbox-mojang-logo-div .'
      'mojang-copyright-div mojang-copyright-div .';
  }

  .xbox-mojang-logo-div {
    gap: 1rem;
  }

  .xbox-mojang-logo-div>img {
    height: 80px;
  }

}

/* MOBILES AND EXTRA SMALL SCREEN DEVICES ================================================================================== */

@media (max-width:575px) {
  .hero-ctrl-imgs {
    width: 100%;
    gap: 0.8rem;
    grid-template-columns: repeat(4, 55px);
  }

  .hero-img-ctrl>label {
    width: 51px;
    height: 51px;
  }

  .mobile-header-div {
    padding: 1rem;
  }

  .navigations li {
    margin: 0;
  }

  .logo-div>a {
    width: 170px;
  }

  .news-grid,
  .discover-grid {
    grid-template-columns: 1fr;
  }

  .watch-trailer-tag {
    position: static;
    margin-top: 0.1rem;
    display: block;
  }

  .download-first-div,
  .trailer-desc {
    flex-direction: column;
  }

  #upper-footer>div {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 'footer-nav-1'
      'footer-nav-2'
      'esrd-rating-div'
      'xbox-mojang-logo-div'
      'mojang-copyright-div';
  }

  .esrd-rating-div {
    max-width: 220px;
  }

  .xbox-mojang-logo-div {
    flex-wrap: wrap;
  }

}

@media (max-width:365px) {
  .logo-div>a {
    width: 135px;
  }

  .mobile-header-div .navigations li {
    padding: 0 4px 0 0;
  }

  .go-to-download {
    text-wrap: wrap;
    width: 100%;
    min-width: auto;
  }

  #bottom-footer {
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'language-selector'
      'microsoft-logo'
      'bottom-footer-nav';
  }

}


/* ========================================================================================================================= */
/* ================================================ END OF FILE LINE 1801 ================================================== */
/* ========================================================================================================================= */