/* CSS Resets */
      /* 1. Use a more-intuitive box-sizing model. */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      /* 2. Remove default margin */
      * {
        margin: 0;
      }
      /* Typographic tweaks! 3. Add accessible line-height 4. Improve text rendering */
      body {
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
      }
      /* 5. Improve media defaults */
      img,
      picture,
      video,
      canvas,
      svg {
        display: block;
        max-width: 100%;
      }
      /* 6. Remove built-in form typography styles */
      input,
      button,
      textarea,
      select {
        font: inherit;
      }
      /* 7. Avoid text overflows */
      p,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        overflow-wrap: break-word;
            text-wrap: balance;
		margin: 10px 0 2px 0;
      }
      /* 8. Create a root stacking context */
      #root,
      #__next {
        isolation: isolate;
      }

/* End Resets */

      main {
       font-size: 1.2rem;
       font-family: "Roboto Flex", sans-serif;
       margin: 12vh 30vw;
      }

      header {
        color: #33658a;        
      }

      section {
        margin-bottom: 20px;
      }

      #intro {
        /*background-image: url("images/forest-sky-3000x2000.jpg");*/
        background-color: #003366;
        background-size: 1000px;
        background-repeat: no-repeat;
        color: white;
        font-size: 1.5rem;
        margin-bottom: 20px;
        padding: 3em;
      }

      #intro h1 {
        margin-bottom: 20px;
      }

      #buttons {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-content: center;
        color: white;
        margin-top: 2em;
      }

      button {
        border: 2px white solid;
        padding: 10px;
        background-color: transparent;
        border-radius: .375rem;
      }

      button a {
        color: white;
        text-decoration: none;
        font-size: 90%;
      }

      h1,
      h2,
      h3,
      h4,
      h5 {
        text-wrap: balance;
      }

h1, h3 {
	        font-family: "Montserrat Alternates", sans-serif;
}


      p,
      li,
      figcaption {
        text-wrap: pretty;
        max-width: 80ch;
      }

      p,
      ul {
        margin: 20px inherit;
      }

      ul {
        list-style-type: square; 
        padding-top: 10px; }

      #skills {
        columns: 2;
      }

      footer {
       /* color: white;
        background-color: #003366;
        background-image: url("images/forest-sky-3000x2000.jpg");*/
        font-family: "Roboto Flex", sans-serif;
		  font-size: 1rem;
        margin-top: 150px;
        padding: 2em;
      }

      details summary { 
  cursor: pointer;
}

details summary > * {
  display: inline;
}


        figcaption {
            font-style: italic;
			font-size: 0.8rem;
            padding: 10px 0 20px 0;
        }

		hr {
			margin: 10px 0;
			width: 100%;
			height: 1px;
			color: #33658a;
			background-color: transparent;
		}

		img {
			width: 100%;
		}

        /* Styles for a simple table with  header row, padding and highlighted alternate rows */
 .simple-pretty {
	 width: fit-content;
}
 .simple-pretty th{
	 background-color:#63666a;
	 color: white;
	 font-weight: bold;
	 text-align:left;
	 padding:10px;
}
 .simple-pretty tr td {
	 padding:10px;
	 color:#63666a 
	}
		simple-pretty tr:nth-child(even) {
		 background-color: #f6f6f7; }

/* Responsive Video */
 .video-container {
	 overflow: hidden;
	 position: relative;
	 width:100%;
}