* {
  box-sizing: border-box;
}


/* fonts */
.walter-turncoat-regular {
  font-family: "Walter Turncoat", cursive;
  font-weight: 400;
  font-style: normal;
}
.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}
.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}
/* ACTIVATE BELOW IF WANT TO USE:
.funnel-sans1 {
  font-family: "Funnel Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.gowun-dodum-regular {
  font-family: "Gowun Dodum", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name */
.nokora1 {
  font-family: "Nokora", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.bytesized-regular {
  font-family: "Bytesized", sans-serif;
  font-weight: 400;
  font-style: normal;
}




/* Header/Blog Title */
.header {
  padding: 30px;
  font-size: 1.5rem;
  /*font-size: clamp(2rem, 5vw+1rem, 7rem); that is too small and i can't make it bigger*/
  font-family: "press start 2p";
  text-align: center;
  background: rgb(252, 244, 234);
}

body {
  font-family: Nokora;
  padding: 20px;
  background: rgb(252, 244, 234);
}
h2 {
  font-family: silkscreen;
}
h3 {
  font-family: Bytesized;
}




nav{
    /* display: flex;
    padding: 1% 4%;
    justify-content: space-between;
    align-items: center;
    {*/


  list-style-type: none;
  margin: 0; /* does nothing if changed*/
  padding: 0; /* does nothing if changed*/
  background-color: #333333;
  display: flex;

}
       /* nav img{
            padding: 10%;
            
            width:  105px;
            height: 105px;
        } */

    .nav-links {
        display: block;
        color: white;
        padding-top: 16px;
        padding-bottom: 16px;
        text-decoration: none;
    }
    .nav-links{
        flex: 1; /* does nothing??*/
        text-align: center;
    }
    .nav-links ul li{
        list-style: none;
        display: inline-block;
        padding: 4px 26px; /*padding bottom+top: 4px and padding right+left: 26px for indiv. items in list*/
    }
    .nav-links ul li a{
        color:antiquewhite;
        text-decoration: none;
        font-size: 13px;
        font-family: silkscreen;
    }
    .nav-links ul li::after{
        content: '';
        width: 0%;
        height: 17px;
        background: rgba(234, 252, 230, 0.726);
        display: block;
        margin: auto;
        transition: 0.5s;
    }
    .nav-links ul li:hover::after{
       width: 100%;
    }






/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}



/* Fake image and real ones */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}


  /* images for blog overview*/
      .image-wrapper1 {
        overflow: hidden;
        width: 100%;
        height: 200px; 
      }
      .image-wrapper1 img {
        width: 100%;
        height: 100%;
        /* or contain, scale-down */
        object-fit:cover; 
        /*object-position: 50% 90%;*/
      }


        /* images for individual blog posts*/
      .image-wrapper2 {
        overflow: hidden;
        width: 100%;
        
      }
      .image-wrapper2 img {
        width: 100%;
        height: 100%;
        /* or contain, scale-down */
        object-fit:cover; 
        /*object-position: 50% 90%;*/
      }





/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #134b08;
  margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}