/* body formatting */
* { box-sizing: border-box;}

body { background-color: #f8de87;
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
       background-position: center;
       color: #ccc8c8;
       font-family: Verdana, Arial, sans-serif; 
       margin: 0;
       padding: 0;}

img { max-width: 100%;
      height: auto;
      display: block;
      object-fit: cover; }

/* Four corners of the world image formatting */
.img-container { position: relative;
                 width: 100%; 
                 height: auto; }

.top-left-img { position: absolute;
                margin-top: 5em;
                margin-left: 2em;
                top: 0;
                left: 0; }

.top-right-img { position: absolute;
                 margin-top: 5em;
                 margin-right: 2em;
                 top: 0;
                 right: 0; }

.bottom-left-img { position: fixed;
                   margin-bottom: 5em;
                   margin-left: 2em;
                   bottom: 0;
                   left: 0; }

.bottom-right-img { position: fixed;
                    margin-bottom: 5em;
                    margin-right: 2em;
                    bottom: 0;
                    right: 0; }

.center-img { display: flex;
              justify-content: center; 
              align-items: center; }

.round-img { border-radius: 20px;   
             width: 600px;
             height: auto;
             display: block; }

nav { padding-top: 0;
      padding-right: 0;
      padding-bottom: 0;
      display: flex;
      position: fixed;
      top: 0;
      justify-content: space-evenly;
      border: 2px solid #56c4f0; 
      font-weight: bold; 
      float: left;
      width: 100%;
      height: 50px;
      font-size: 1em; 
      text-align: left; 
      background-color:#70d5fd;
      font-family:'Times New Roman', Times, serif;}

nav a:link { color: #e96bce; }
nav a:visited { color: #e056c2; }
nav a:hover { color: #A52A2A; }
nav a { text-decoration: none; }


nav ul { list-style-type: none; 
         padding-left: 1em;
         display: flex; 
         flex-direction: row;
         gap: 20px; }

/* All the text stuff */

main { display: block;
       padding-left: 2em;
       padding-right: 2em; 
       margin-bottom: 5em;
       margin-top: 6em;
       margin-left: 170px; 
       margin-right: 170px;
       background-color: #70d5fd; 
       overflow: auto;
       min-width: 350px; 
       border-radius: 10px; }


.most-paragraphs {color:#382a35;
                  font-family:'Times New Roman', Times, serif;
                  font-weight: 400; 
                  text-indent: 50px;
                  font-size: 25px; }

h2 { color:#382a35;
     text-align: center;
     font-family:'Times New Roman', Times, serif;
     font-size: 40px;}

/* the "back" link for all side pages */

.back-link { text-align: left; 
               padding-right: 2em;
               padding-bottom: 1em;}

.back-link a { text-decoration: none; }
.back-link a:link { color: #e056c2; }
.back-link a:visited { color: #e056c2; }
.back-link a:hover { color: #A52A2A; }

/* Centered text*/
.center-text { height: 100vh;
               margin: 0;
               display: grid;
               place-items: center; }

/* Bottom credits link */

.bottom { position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: #88469c;
          text-align: center;
          padding: 10px; 
          font-family:'Times New Roman', Times, serif; 
          font-weight: bold;}

.bottom a { color: #4e1061;
            text-decoration: none; }