* { margin: 0; line-height: 1.5; }
*, *:before, *:after { box-sizing: border-box; }
img { display: block; max-width: 100%; }

html {
    font-family: Noto Serif;
    color: #3f3f3f;
    background-color: #fff9ec;
}

main {
    width: 55rem;
    margin: auto;
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

h1, h2, h3, nav {
    font-family: 'Noto Serif', serif;
    color: #ba2653;
    font-weight: 600;
}

.title { 
    font-family: 'Noto Serif', sans-serif;

    h1 {
        font-size: 36px;
        font-weight: 600;
    }

    #date { font-family: Literata, serif; }
}
h2 { font-size: 24px; }
h3 { 
    color: black;
    font-size: 16px;
}

ul { list-style-type: circle; }

ul, ol {
    list-style-position: outside;
    padding-left: 1rem;
}

header {
    text-align: center;
    display: flex;
    position: sticky;
    justify-content: space-between;
    background-color: #8a9b46;
    background-position: center;
    height: 56px;
    align-items: center;
    padding: 1rem;
    z-index: 999;

    img { height: 30px; }

    .left, .right { 
        display: flex;
        gap: 0rem;
        align-items: center;
    }

    .right {
        display: flex;
        gap: 1rem;
        margin-right: 5px;
    }

    h1 {
        color: #fff9ec;
        font-size: 20px;
    }
    
    .pc { 
        padding-left: 1rem;
    }

    nav {
        display: flex;
        gap: 1rem;
        font-size: 16px;
        font-weight: bold;

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

        a:visited { color: black }
        
        a:hover { color: #001cce; }
    }
}

.title {
    display: grid;
    align-self: center;
}

.image img {
    height: 25rem;
    width: 100%;
    object-fit: cover;
}

.times {
    display: grid;
    grid-template-columns: 35% 65%;
}

.content {
    display: none;
    margin-top: 8px;
    background-color: #ffbddb5a;
    padding: 1.3rem;
    transition: all 0.3s ease;
}

.content.show {
  display: block;
}

.top { 
    border: 1px solid lightgray;
    background-color: white;
}

.last { 
    grid-area: 4 / 1 / 4 / -1;
}

.intro-text h1 {
  margin-bottom: 2rem; 
  line-height: 1rem;
}

.intro-text p.description {
  margin-bottom: 1.5rem; 
  line-height: 1.7;
}


#instructions, #ingredients, #equipment, .last {
    border-top: 1px solid #8a9b46;
    padding-top: 1rem;
}

.dropdown {
    display: flex;
    align-items: center;
    position: relative;

    img { 
        height: 30px;
        position: absolute;
        top: 0;
        right: 0.5rem;
    }

    img:hover {
        cursor: pointer;
    }
}

.sidebar {
  position: fixed;
  z-index: 1000;
  margin: 0;
  padding: 0;
  width: 250px;
  background-color: #f8edd6;
  height: 100%;
  overflow: auto;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: #ba2653;
  color: #f3f3f3;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #eb99b3d1;
  color: #f3f3f3;
}

.quick-info{
    display: flex;
    column-gap: 2rem;
    row-gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

section.intro{
    background-color: #c8d29da7;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    
}

.intro-text{
    padding: 60px;
    margin: auto;
    max-width: 960px;
    display:block;
}

.child-info{
    white-space:nowrap;
    overflow:hidden;
}

.fa-solid{
    color: #e78ca9;
}

.image img {
  width: 18%;          
  height: auto;
  float: right;     
  display: block;      
  margin-left: auto;   
  margin-right: -14rem;
  margin-top: -8rem;    
}

.sidebar button.dropdown-btn {
  background-color: #f8edd6;
  border: none;
  outline: none;
  color: #ba2653;
  padding: 16px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sidebar button.dropdown-btn:hover {
  background-color: #eb99b3d1;
  color: #fff9ec;
}

.sidebar button.active {
  background-color: #ba2653;
  color: #fff9ec;
}

/* Hidden content by default */
.sidebar .dropdown-content {
  display: none;
  background-color: #fff3e0;
  padding: 10px 16px 15px 16px;
  font-size: 13px;
}

/* Show content when active */
.sidebar .dropdown-content.show {
  display: block;
}

@media (max-width: 960px) {
    main { width: 95%; }

    main, #notes { grid-template-columns: 1fr; }
    
    .last { grid-area: 7 / 1 / 7 / -1; }

    .title { text-align: center; }
}

@media (max-width: 576px) {
    header {
        h1 { font-size: 16px; }
        nav { font-size: 12px; }
        img { height: 16px; }
    }

    .title h1 { font-size: 24px; }

    .image img { height: 15rem; }

    .pc { display: none; }

    /* .box.times { justify-items: center; } */
}
@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}