/* SETUP ----------------------------- */

html {
  font-size: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  overflow-x: hidden;
}


*{
  margin:0;
  padding:0;
  }

  img {
      max-width: 100%; 
  height: auto; 
  }

*, *::before, *::after {
      box-sizing: inherit;
    }

  :root {
    --darkest: #3d3f41;
    --lines: #e3e5e7;
    --background: #f4f4f5;
    --whitebg: #fff;
    --lightertext: #b5b9bd;
    --warningtext: #e64646;
  }

/* BODY PAGES ----------------------------*/
body {
  background-color: var(--whitebg);
 height: 100vh;
}

.body {
    /* font stuff */
    color: var(--darkest);
    font-size: .81rem;
    font-family: 'Josefin Sans', sans-serif;
    
}

  .pagecontent {
min-height: 75vh;
 display: flex;
  justify-content: center;
  align-items: center;
   border: 1px solid var(--lines);
  }


.pagepadded {
  margin: auto;
    max-width: 800px;
    @media screen and (min-width: 1050px) {
      padding: 50px 50px 50px 50px;
      }
      @media screen and (max-width: 1050px) {
        padding: 50px 50px 50px 50px;
        }
  }

  

  footer {
    background-color: var(--whitebg);
    padding-top: 40px;
    padding-bottom: 20px;
  }

/* BOXES ----------------------------*/

.paperbox {
  padding: 20px 40px 20px 40px;
  box-shadow: 1px 1px 8px 1px rgba(0,0,0,.1); 
  background-color: var(--whitebg);
   width: 100%;
   border-radius: 5px;
}

/* flexboxes */

.iconflextable {
margin: auto;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}

/* images */

img {
  display: block;
  margin: auto;
}

/* speech bubble boxes */
.bubblequestion {
  position:relative;
  padding: 15px 40px 0px 40px;
  background: var(--lines);
   border-radius: 5px;
   margin-bottom: 20px;
   width:fit-content;
   text-transform: uppercase;
}
.speechright {
  background: var(--lines);
  border-bottom: 0;
  border-left: 0;
  min-width: 20px;
  min-height: 20px;
  position: absolute;
  right: -10px;
  top: 18px;
  transform: rotate(-45deg)
}

.bubbleanswer {
  padding: 15px 40px 0px 40px;
  border: 1px solid var(--lines);
   border-radius: 5px;
   position: relative;
    margin-bottom: 20px;
}
.speechleft {
  background-color: var(--whitebg);
  border: 1px solid var(--lines);
  border-bottom: 0;
  border-right: 0;
  min-width: 20px;
  min-height: 20px;
  position: absolute;
  left: -10px;
  top: 18px;
  transform: rotate(-45deg)
}



/* TEXT -------------------------------- */
/* titles -------- */
  .titlemain {
      font-family: 'EB Garamond', serif;
      letter-spacing: .2rem;
      font-weight: bold;
      text-align: center;
      }
      

      .bigtitle {
        font-size: clamp(2rem, 3vw, 3rem);
        
      }

      .mediumtitle {
        font-size: clamp(1rem, 2vw, 1.3rem);
        text-transform: uppercase;
        margin-bottom: 8px;
      }

      .smalltitle {
        text-transform: uppercase;
        letter-spacing: .07rem;
        
      }
      
       .subtitle {
        font-size: .90rem;
      }
      
      /* paragraphs ---------*/
      .bodytext {
      letter-spacing: .01rem;
      line-height: 1.5rem;
      }

      .caption {
        color: var(--lightertext);
      }

      .warningtext {
        color: var(--warningtext);
      }

       ul li {
        margin: 0 0 0 30px;
      }

      /* ICONS -------------------------------- */
      .fontarrow::before {
        content: "";
         background-image: url('https://arcardia.neocities.org/images/FontAwesomeCheats/ARROW%20fontawesome.png');
         background-size: 13px 9px;
    display: inline-block;
    width: 13px; 
    height: 9px;
    background-repeat: no-repeat;
        padding-bottom: 4px;
      }

      .fontarrow {
        margin: 0 5px 0 23px;
      }

/* BUTTONS AND LINKS -------------------------------- */
     a:link, .linktext:link {
      text-decoration: none;
      color: inherit;
      transition: 200ms ease-in-out;
      }

      a:hover, .linktext:hover {
      text-decoration: none;
      color: inherit;
      opacity: .7;
       transition: 200ms ease-in-out;
      }

        a:visited, .linktext:visited {
      text-decoration: none;
      color: inherit;
       transition: 200ms ease-in-out;
      }
  
       .menubutton {
        background: transparent; 
        text-decoration: none;
      color: inherit;
        overflow: hidden; 
        border: 0;
        opacity: .7;
       transition: 200ms ease-in-out;
      }

       .menubutton:hover {
        transition: 200ms ease-in-out;
        text-decoration: none;
      color: inherit;
        opacity: 1;
      }