/* select all elements in the page */
html {
    /* includes padding and borders when setting element widths. "by default, browsers consider an element's width to be only the width of the content area: padding and borders are then added on top of that. so if you set the width of an element to be 300px but then add 10px of padding to the left and right sides, the overall width of the element will actually be 320px by default." */
    box-sizing: border-box;
}

body {
  background-color: #ffabc4;
  font-family: serif;
}

ul {
  list-style-type: none;
}

/* main page */

#header {
  padding: 20px;
  max-width: 800px;
  margin: auto;
  display: flex;
  justify-content: center;
  font-family: 'blackadderitc_regular';
  font-size: 50px;
}

@font-face {
      font-family: "blackadderitc_regular";
      src: url("/fonts/blackadderitc_regular.ttf");
    }
    
@font-face {
    font-family: "broadsheet";
    src: url("/fonts/broadsheet.ttf");
    }
    
    @font-face {
    font-family: "ebgaramond08_regular";
    src: url("/fonts/ebgaramond08_regular.otf");
    }
    
    @font-face {
    font-family: "babypop";
    src: url("/fonts/babypop.otf");
    }
    
    @font-face {
    font-family: "treasuremap";
    src: url("/fonts/treasuremap.ttf");
    }

.image-hover {
  width: 200px;
  height: 200px;
  background-image: url('home images/nara1.png');
  background-size: cover;
  transition: background-image 0.5s ease-in-out;
}

.image-hover:hover {
  background-image: url('home images/nara2.png');
}

/* the navbar container... trying to remember why it's a class selector so look into that later lol. my guess is because topnav a affects links specifically? */
.topnav {
  max-width: 800px;
  margin: auto; 
  display: flex;
  justify-content: center;
}
  

.topnav a {
  color: black;
  text-align: center;
  text-decoration: none;
  padding: 14px 14px;
}

#main-container {
  max-width: 800px;
  margin: auto;
  }
 
 /* diary page */
 
 /* the row that contains the columns for my diary page */ 
.diary-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* this centers the main container's items horizontally i think. like the items and not the container */
  margin: auto;
}

/* the first column in my two-column layout for my diary page */
.diary-posts {
  flex: 0 0 700px;
  padding: 1rem;
  margin-left: 40px;
  margin-right: 50px; /* the margins just provide more space between the columns that i like more visually */
  max-width: 100%; /* adding this makes this item mobile responsive, go figure */ 
}

/* i should change the links to an unordered list maybe */

/* the second column */
.diary-nav {
  flex: 0 0 50px;
  padding: 1rem;
}


/* directory stuff */ 

.indent {
  margin-left: 25px;
}

.secret {
  color: #ffabc4;
  display: inline;
}

/* gallery page */

.gallery { /*the row that contains the columns for my gallery page */
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  margin: auto;
  max-width: 800px;
  height: auto;
}

.gallery section{
display: none;
margin-left: 20px;
width: 100%;
}

.gallery section img{
  height: auto; /* i'm not sure which one of these i need to make absolute */
  max-width: 100%;
}

.gallery input {
  display: none;
}

.gallery label {
  margin: 0 0 10px;
  padding: 5px;
  width: 20%;
}

.gallery img {
  height: auto;
  width: 100%;
}

.gallery #tab1:checked ~ #skfy2020img {
  display:block;
}