/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #210F04;
  /* background-image: url("https://adamappled.neocities.org/assets/homepage/background.png"); */
  background-image: url("https://adamappled.neocities.org/assets/homepage/backgroundtile.png");
  background-size: 30%;
  /* background-repeat: no-repeat; */
  /* background-attachment: scroll; */
  color: white;
  font-family: Monospace;
  font-size: 1rem;
}

.box {
  max-width: 950px;
  margin: 30px auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 240px minmax(0,1fr); 
}

/* HEADER */

header {
  grid-row: 1 / 2 ;
  grid-column: 1 / 3;
}

header span{
  display: flex;
  justify-content: flex-end;
}

.top_bar{
  display: flex;
  justify-content: center;
  max-width: 100%;
  height: auto;
}

/*MAIN GRID */

.sidebar {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  display: grid;
  grid-gap: 10px;
  align-content: flex-start;
}

.main_contents{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  display: grid;
  grid-gap: 10px;
  align-content: flex-start;
}

/*NAVBAR */

nav {
  border-style: double;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  height: max-content;
  background-color: #FEAB39;
  border-color: #D63901;
}

.navbutton {
  color: #D63901;
  background-color: transparent;
  text-decoration: none;
  width: 100%;
  font: inherit;
  text-align: left;
  transition: .2s ease;
  font-weight: 700;
  font-size: 1.25rem;
}

.arrowbutton{
  color: #D63901;
  background-color: transparent;
  text-decoration: none;
  font: inherit;
  text-align: left;
  font-weight: 700;
  display: none;
}

@media (hover: hover) {
  .navbutton:hover {
    color: white;
    background-color: black;
  }
}

.nav_list{
  list-style-type: none;
  margin: 0px;
  padding: .85em;
}

.button_link{
  text-decoration: none;
}

.otherside_submenu{
  display: none;
}

.otherside_submenu.show{
  display: block;
}

/*CRYPTID BOX */

cryptid {
  border-style: double;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  min-height: 580px;
  background-color: #FEAB39;
  border-color: #D63901;
  text-align: center;
  color: #D63901;
}

#wrapper{
  min-height: 490px;
}

cryptid a{
  text-decoration: none;
  color: black;
}

.cryptid_image{
  max-width: 80%;
  height: auto;
}

/* SUPPORT */

support {
  border-style: none;
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  height: max-content;
  background-color: transparent;
  border-color: #D63901;
}

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

/* CLIQUES CAROUSEL */
cliques {
  border-style: double;
  grid-row: 3 / 4;
  grid-column: 1 / 3;
  height: max-content;
  background-color: #F1B849;
  border-color: #D63901;
  color: #D63901;
}

.carousel {
  margin: 0px auto;
  display: flex;
  overflow-x: auto;
}

.carousel::-webkit-scrollbar{
  display: none;
}

.group {
  display: flex;
  animation: spin 15s infinite linear;
}

@keyframes spin{
  from {translate: 0;}
  to {translate: -100%;}
}

.card {
  flex: 0 0 5em;
  padding: 0.5em;
  align-content: center;
}

/* INFO SHEET */

info {
  border-style: double;
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  height: max-content;
  background-color: #050504;
  border-color: #A0A0A0;
}

/* CURRENT PROJECT */
project {
  border-style: double;
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  height: max-content;
  background-color: #050504;
  border-color: #A0A0A0;
}

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

/* NEWS */

news {
  border-style: double;
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  height: max-content;
  background-color: #050504;
  border-color: #A0A0A0;
}

/*PROJECT PROGRESS BAR */

comicprogress {
  border-style: double;
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  height: max-content;
  background-color: #F1B849;
  border-color: #D63901;
  color: #D63901;
  padding: 9px;
}

comicprogress a {
  display: flex;
  justify-content: flex-end;
}

.section_heading {
  text-align: center;
  border-bottom: double;
  border-color: #D63901;
  margin: 0px;
}

.section_count {
  color: black;
  border-bottom: dotted;
  border-color: black;
}

/* FOOTER */
footer {
  border-style: double;
  grid-row: 4 / 5;
  grid-column: 1 / 3;
  background-color: #F1B849;
  border-color: #D63901;
  color: #D63901;
}

/* Main section styling */

.section_content {
  margin: 20px;
}

.section_centered{
  text-align: center;
}

.bordered_header{
  border-style: double;
  margin: 0px;
  border-collapse: separate;
  padding: 5px 20px;
  border-color: #A0A0A0;
}

/* Link styling */

.box_link {
  color: #F1B849;
}

.dark_link{
  color: #D63901;
}

.dark_link:hover{
  color: white;
}

.box_link:hover{
  color: white;
}



/* CURSOR Start https://www.cursors-4u.com */ 
* {
  cursor: url(https://cur.cursors-4u.net/food/foo-3/foo258.ani), url(https://cur.cursors-4u.net/food/foo-3/foo258.png), auto !important;
} 
/* End https://www.cursors-4u.com */
  

@media(max-width: 800px){
  body {
    background-size: 100%;
  }
  
  .box {
    grid-template-columns: 230px 1fr;
    grid-template-areas: 
    "header_grid header_grid"
    "nav_grid nav_grid"
    "info_grid info_grid"
    "project_grid project_grid"
    "cryptid_grid cryptid_grid"
    "comicprogress_grid support_grid"
    "news_grid news_grid"
    "cliques_grid cliques_grid"
    "footer_grid footer_grid"
  }
  
  .sidebar{
    display: contents;
  }
  
  .main_contents{
    display: contents;
  }
  
  header {
    grid-area: header_grid;
  }

  nav {
    grid-area: nav_grid;
    position: sticky;
    top: 0;
    align-self: flex-start;
  }
  
  .nav_section_content {
    margin: 20px;
  }
  
  .button {
    display: inline;
    list-style: none;
  }
  
  .arrowbutton{
    display: block;
    margin-left: auto;
    margin-right: auto;
    font: inherit;
  }
  
  .rotate svg{
    transform: rotate(180deg);
  }
  
  .nav_list{
    display: none;
  }
  
  .nav_list.hide{
    display: list-item;
    list-style-type: none;
    align-items: flex-start;
    margin: 0px;
    padding: 0px;
  }
    
  info {
    grid-area: info_grid;
  }

  project {
    grid-area: project_grid;
  }
  
  cryptid {
    grid-area: cryptid_grid;
    min-height: 610px;
  }
  
  cryptid img{
    width: 45%;
  }
  
  #wrapper{
    min-height: 520px;
  }
  
  support {
    grid-area: support_grid;
  }

  news {
    grid-area: news_grid;
  }
  
  comicprogress {
    grid-area: comicprogress_grid;
  }
  
  cliques {
    grid-area: cliques_grid;
  }

  footer {
    grid-area: footer_grid;
}
}