/* colors -> https://coolors.co/e54b4b-ebebd3-464655-e4b363-e8e9eb */
@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Orbitron&family=Press+Start+2P&family=Roboto+Mono&family=Sono&display=swap');
@import url("https://fonts.googleapis.com/css?family=Quicksand:400,700");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background: #f0f8ea;
  font-family: 'Nunito', sans-serif;
  overflow-y: scroll;
  
}
body {
  font-family: "Inter", sans-serif;
}
.page {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin-top: 2vh;
}

.container1 {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1.5fr 1.2fr 0.8fr;
  grid-template-areas:
    "top top top top"
    "main main main sidebar "
    " content1 content2 content3 sidebar"
    " footer footer footer footer";
  grid-gap: 0.2rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  color: #004d40;
  text-align: center;
  padding: 1rem;
  margin-top: 5vh;
  
}

.top {
  background: #ffffff;
  grid-area: top;
  border-radius: var(--main-radius);
  /*padding-top: var(--main-padding);*/
  
}

main {
  background: #ffffff;
  grid-area: main;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  height: auto;
  display: flex;
  flex-direction: column;
}

#sidebar {
  background: #000000;
  grid-area: sidebar;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
  height: auto;
}

#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content3 {
  background: #23e563;
  grid-area: content3;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

footer {
  background: #18181b;
  grid-area: footer;
  border-radius: var(--main-radius);
  font-size: 1rem;
  color: #fff;
  padding: 2rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.07);
  margin-top: 2rem;
  letter-spacing: 0.02em;
}

footer p {
  margin: 0.5rem 0;
  color: #e5e7eb;
  font-size: 1.05rem;
  text-align: center;
}

footer a {
  color: #23a6d5;
  text-decoration: none;
  margin: 0 0.5em;
  font-weight: 600;
  transition: color 0.2s;
  display: inline;
}

footer a:hover,
footer a:focus {
  color: #38e8c3;
  text-decoration: underline;
}

a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}

.container {
  width: 95%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-content: center;
  justify-content: space-between;
}

header {
  background: #000000;
  color: #ebebd3;
  /*padding: 1em 0;*/
  position: fixed;
  width: 100vw;
  display: flex;
  align-items: center;
  z-index: 101;
  
}

header::after {
  content: "";
  clear: both;
  display: block;
}

.logo {
  /*float: left;*/
  font-size: 1rem;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
  align-self: center;
}

.logo span {
  font-weight: 400;
}

.site-nav {
  position: absolute;
  top: 100%;
  right: 0%;
  background: #464655;
  clip-path: circle(0px at top right);
  transition: clip-path ease-in-out 700ms;
  
  /*   display: none; */
}

.site-nav--open {
  clip-path: circle(250% at top right);
  /*   display: block; */
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  border-bottom: 1px solid #575766;
  
}

.site-nav li:last-child {
  border-bottom: none;
}

.site-nav a {
  color: #ebebd3;
  display: block;
  padding: 2em 4em 2em 1.5em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus {
  background: #e4b363;
  color: #464655;
}

.site-nav--icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 1em;
  width: 1.1em;
  text-align: right;
  color: #7ffdb1;
}

.menu-toggle {
  padding: 1em;
  /*position: absolute;*/
  /*top: 0.5em;
    right: 0.5em;*/
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  background: #ebebd3;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}

.page {
  position: absolute;
  display: flex;
  flex-direction: column;
}

/*load more*/
.totop {
  position: fixed;
  bottom: 10px;
  right: 20px;
}
.totop a {
  display: none;
}
a,
a:visited {
  color: #33739e;
  text-decoration: none;
  display: block;
  margin: 10px 0;
}
a:hover {
  text-decoration: none;
}
#loadMore {
  padding: 10px;
  text-align: center;
  background-color: #7ffdb1;
  color: #ee75d0;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #fff;
  box-shadow: 0 1px 1px #ccc;
  transition: all 600ms ease-in-out;
  -webkit-transition: all 600ms ease-in-out;
  -moz-transition: all 600ms ease-in-out;
  -o-transition: all 600ms ease-in-out;
  width: 50%;
  align-self: center;
}
#loadMore:hover {
  background-color: #fff;
  color: #33739e;
}

.preview {
  display: none;
  
}
/*end load more*/

/*slider*/
#slidy-container {
  width: 70%;
  overflow: hidden;
  margin: 0 auto;
  
}
.sliderpic {
  height: 55vh;
}

/*arrow up*/

#button {
  display: inline-block;
  background-color: #7ffdb1;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #ee75d0;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}

.cards {
                  background-color: #ef6ec41a;
                  border: 1px solid #ddd;
                  padding: 20px;
                  text-align: center;
                  max-width: 300px;
                  margin: 0 auto;
                  height: 60vh;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
}
.cardimg{
  max-width: 100%; 
  height: 50%;
}
.cardh{
  margin: 10px 0; 
  font-size: 24px;
}
.cardp{
  font-size: 12px; 
  margin: 10px 0;
}
.carda{
                    display: inline-block;
                    padding: 10px 20px;
                    background-color: #000000;
                    color: #fff;
                    text-decoration: none;
                    border-radius: 5px;
                    font-weight: bold;
                    transition: background-color 0.3s;
}
#searchButton{
  font-size: 1em;
  color: #ee75d0;
  background-color: #7ffdb1;
  border-radius: 5%;
  padding: 1em;

}
/* Styles for the content section */

@media (min-width: 500px) {
  #button {
    margin: 30px;
  }
}

@media only screen and (max-width: 1100px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
  }
  #slidy-container {
    height: 40vh;
  }
  .sliderpic {
    height: 40vh;
  }
}

@media only screen and (max-width: 950px) {
  .container1 {
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
  }
}
@media only screen and (max-width: 825px) {
  .container1 {
    grid-template-columns: 1fr 1fr 1fr 1.8fr;
  }
}
@media only screen and (max-width: 717px) {
  .container1 {
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
      "top"
      "main"
      "content1"
      "content2"
      "content3"
      "sidebar"
      "footer";
  }
  #slidy-container {
    width: 100%;
  }
}

@media only screen and (max-width: 2000px) {
  #menuToggle {
    display: block;
  }
  .menu {
    display: none;
  }
  .navtop {
    justify-content: center;
  }
}

@media (min-width: 2000px) {
  .menu-toggle {
    display: none;
  }

  .site-nav {
    height: auto;
    position: relative;
    background: transparent;
    float: right;
    clip-path: initial;
  }

  .site-nav li {
    display: inline-block;
    border: none;
  }

  .site-nav a {
    padding: 0;
    margin-left: 3em;
  }

  .site-nav a:hover,
  .site-nav a:focus {
    background: transparent;
  }

  .site-nav--icon {
    display: none;
  }
}
@media (max-width: 500px) {
  #slidy-container {
    height: 35vh;
  }
  .sliderpic {
    height: 35vh;
  }
}