/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h2 {
    font-size: 1.8rem;
    font-family: 'Georgia', serif;
    font-weight: bold;
    margin-bottom: 0.25rem;
}
p {
    font-size: 1.1rem;
    font-family: 'proxima-nova', 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 60ch;
}
ul {
    font-family: 'proxima-nova', 'Arial', sans-serif;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:link {
  color: #9ab0ff; /* Or any other color name or hex code */
}
a:visited {
  color: #9ab0ff; /* Or any other color name or hex code */
}
a:hover {
  color: #9ab0ff; /* Or any other color name or hex code */
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

body {
  display: grid;
  place-content: center;
  left: 0;
  right: 0;
  min-width: none;
  min-height: 100vh;
  text-align: center;
  grid-auto-columns: 1fr;
  grid-auto-rows: auto auto auto 1fr auto;
  grid-template-areas: 
    "header"
    "nav"
    "edition-banner"
    "main"
    "footer";
}
.weekly-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    border-radius: 0;
    grid-template-areas: 
    "deep"
    "short"
    "one-word"
    "quote"
    "pemdas";
}
/*
.page-details {
    border-radius: 4px;
    border: 4px solid #ccc;
}
*/

.article-section {
    border: none;
    border-radius: 8px;
}

.intro {
  background-color: #333;
  color: white;
  padding: 1rem 0;
  text-align: center;
}
.edition-banner {
    background-color: rgb(131, 23, 23);
    color: white;
    font-size: 1em;
    font-weight: bold;

}
.red-background {
  background-color: rgb(131, 23, 23);
}

.white-background {
  background-color: white;
}

.grey-background {
  background-color: #444;
  color: white;
}

.light-red-color {
  color: rgb(230, 96, 96);
}

.article-header {
  position: relative
}

.see-full-page {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.menu-bar { 
    display: grid;
    list-style-type: none;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #444;
    color: white;
    align-items: center;
    padding-inline-start: 0;
    margin: 0;
}
.menu-bar li {
    color: white;
}
.menu-bar li:hover {
    background-color: #666;
    cursor: pointer;
}
.menu-bar a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 0.5em;
}

.edition-banner p {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: bold;
}

.short-read h2 {
    font-size: 1.8rem;
    font-family: 'Georgia', serif;
    font-weight: bold;
    margin-bottom: 0.25rem;
}
.short-read h3 {
    font-size: 1.5rem;
    color: rgb(230, 96, 96);
    font-weight: bold;
    margin-bottom: 0;
}
.short-read h4 {
    font-size: 1.2rem;
    font-weight: bold;
    color:rgb(184, 32, 32);
}

.deep-dive h2 {
    font-size: 1.8rem;
    font-family: 'Georgia', serif;
    font-weight: bold;
    margin-bottom: 0.25rem;
}
.deep-dive h3 {
    font-size: 1.5rem;
    color: rgb(230, 96, 96);
    font-weight: bold;
    margin-bottom: 0;
}


header { grid-area: header;}
div.edition-banner { grid-area: edition-banner;}
nav { grid-area: nav;}
main { grid-area: main;}
footer { grid-area: footer;}

.deep-dive { grid-area: deep;}
.short-read { grid-area: short;}
.one-word { grid-area: one-word;}
.quote { grid-area: quote;}
.pemdas { grid-area: pemdas;}

@media (min-width: 40em) {
  .weekly-blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "deep one-word"
      "deep quote"
      "short pemdas";
  }
}

/* PEMDAS Section */
.pemdas-content {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    row-gap: 1rem;
    column-gap: 0;
    grid-template-areas: 
      "r1c1 r1c2 r1c3"
      "r2c1 r2c2 r2c3";
}

.row1-column1 { grid-area: r1c1; }
.row1-column2 { grid-area: r1c2; }
.row1-column3 { grid-area: r1c3; }
.row2-column1 { grid-area: r2c1; }
.row2-column2 { grid-area: r2c2; }
.row2-column3 { grid-area: r2c3; }


.box {
    width: 8vw; 
    height: 8vw;  
    margin: 0;
    padding: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer; /* Change cursor to pointer when hovering */
}

@media screen and (max-width: 40em) {
    .box {
        width: 20vw; 
        height: 20vw;  
        font-size: 8vw;
    }
    .difficulty-button {
        padding: 0.3rem 0.4rem;
        font-size: 0.9rem;
    }
    .pemdas-button {
        padding: 0.3rem 0.4rem;
        font-size: 0.9rem;
    }
  
}
.box.used {
    opacity: 0.4;
    cursor: default; /* Disable pointer cursor after use */
}

.pemdas-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 0;
  column-gap: 0.5rem;
}

.pemdas-button {
    color:white;
    background-color: #333; /* Blue */
    cursor: pointer;
    border-color: #222;
    border: none;
    box-shadow: none;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
    width: 10vw;
    height: 2vw


}
.pemdas-button:hover {
    background-color: #555; /* Darker blue on hover */
}
.difficulty-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.difficulty-button {
  background: #333;
  color: white;
  border: 2px solid #222;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
}

.difficulty-button.active {
  background: #f1c40f;
  color: #111;
  border-color: #e67e22;
  font-weight: bold;
}

/* BEGIN solo article section */

.solo-article {
    display: grid;
  place-content: center;
  left: 0;
  right: 0;
  min-width: none;
  min-height: 100vh;
  text-align: center;
  grid-auto-columns: 1fr;
  grid-auto-rows: auto;
    grid-template-areas: 
    "title"
    "section"
    "details"
    "body";
}
.solo-article-title { grid-area: title; }
.solo-article-section { grid-area: section; }
.solo-article-details { grid-area: details; }
.solo-article-body { grid-area: body; }

.solo-article-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* END solo article section */

/* BEGIN archive section */

.archive-list {
  list-style-type: none;
  text-align: left;
}

/* END archive section */
/* BEGIN about section */

.about-page p{
    max-width: 70ch;
    margin: 0 auto;
    padding: 0 1rem;
    font-size: large;
    text-align: left;
    line-height: 1.6;
    justify-content: center;
    margin-bottom: auto;

}
.about-page ul {
    list-style-type: disc;
    text-align: left;
    max-width: 70ch;
    margin: 0 auto;
    padding: 0 1rem;
    font-size: large;
    line-height: 1.6;
    justify-content: center;
}