@font-face {
  font-family: "Cantarell";
  font-style: normal;
  font-weight: 800;
  src: local("Cantarell Extra Bold"), local("Cantarell-ExtraBold"), url(fonts/cantarell-extra-bold-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
@font-face {
  font-family: "Cantarell";
  font-style: normal;
  font-weight: 600;
  src: local("Cantarell Bold"), local("Cantarell-Bold"), url(fonts/cantarell-bold-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
@font-face {
  font-family: "Cantarell";
  font-style: normal;
  font-weight: 400;
  src: local("Cantarell Regular"), local("Cantarell-Regular"), url(fonts/cantarell-regular-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}

/* fonts */
p, a, container, card, h1, h2, h3, li, span, .catalogue-title, .post-title, .catalogue-time {
  font-family: "Cantarell";
}


body{
	background: #FAFAFA;
  margin-left: auto;
  margin-right: auto;
  color: #353535;
  font-size: 18px;  

}

.center-div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
.center-div a {
    width: 100%;
    text-align: center;
  }
}


.container{
  margin-top: 75px;
  margin-right: auto;
  min-width: 500px;
  margin-left: auto; 
  max-width: calc(50% - 20px);
    }
    

.card {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 1px 3px 1px rgba(0,0,0,0.07), 0 2px 6px 2px rgba(0,0,0,0.03);
  padding: 0px 20px 20px 20px;
  background-color: #FFFFFF;
  margin-right: auto;
  font-size: 18px;  
  margin-left: auto;
  margin-bottom: 30px;
  margin-top: 20px;
  min-width: 500px;
  border:1.5px solid #e5e5e5;
  border-radius: 12px;
    }



img {
  max-width: 100%;
}

/* CSS */
.navbar {
  font-size: 22px;  
  font-weight: 550;
  position: fixed;
  width: 100%;
  top: 0;
  overflow: hidden;
  background-color: #EBEBEB;
}

.navbar label {
  font-weight: bold;
  display: none;
  cursor: pointer;
}

#menu-toggle {
  display: none;
}

#menu-toggle:checked ~ .navbar nav ul {
  display: block;
}

@media screen and (max-width: 600px) {
  .navbar label {
    display: block;
  }

  .navbar nav ul {
    display: none;
  }
}


ul.navlist{
	display: flex;
	margin: auto;
  list-style-type: none;	
  margin-left: auto;	
  align-items: flex-start;	
  justify-content: flex-start;
}


li.navlist {
    margin-left: auto;
    color: black;
    margin: auto;
    border:1.5px solid #EBEBEB;
}


li.navlist:hover {
  background: #CFCFCF;
  color: black;
  border:1.5px solid #e5e5e5;
  border-radius: 12px;
  background-size: 100% 100%;
  animation: spring 300ms ease-out;
  }
  

li.navlist:active {
  transform: scale(1.05);
}

@media all and (max-width: 600px) {
   ul.navlist {
      flex-direction: column;
   }
   
   .card {
  min-width: calc(90% - 20px);
  max-width: calc(90% - 20px);
}
  .container {
  margin-top: 50px;
  min-width: calc(90% - 20px);
  max-width: calc(90% - 20px);
}
   
}



a {
  color: #6AACE6;
  text-decoration: none;
}

a.navlist {
    margin-left: auto;
    color: black;
    display: flex;
    height: 100%; 
    padding: 10px;

}

td {
    padding: 5px;
    text-align: left;
}



@keyframes spring {
  25% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(0.9, 0.9);
  }
  50% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(0.98, 0.98);
  }
  75% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.03, 1.0);
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.02, 1.02);
  }
}

@media (prefers-color-scheme: dark) {
  body{
      color: #FFFFFF;
      background-color: #242424;
      }

  .card{
      background-color: #363636;
      border-color: black;
  }
  .navbar {
    background-color: #303030;
        border:1.5px solid #3A3A3A;
}

a.navlist {
    color: white;
}

li.navlist {
  border:1.5px solid #303030;
  }  
  
li.navlist:hover {
  background: #4E4E4E;
  border:1.5px solid #3A3A3A;
  }  
    
    
}