/*pseudo-elements*/
nav {
    text-align: center;
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
    color: rgb(98, 43, 36);
      }

nav p {
  text-align: center;
}

nav a {
color:cornflowerblue; background-color:aliceblue;
text-decoration:none; text-align: center; 
display:block;
border-radius: 4px;
padding: 6px;
width: 100%;
/*css3 transition*/
transition: background-color 0.3s ease, transform 0.3s ease;
}

nav a:hover {
color:aliceblue; background-color:cornflowerblue;
/*works with transition to give a little responsiveness to the buttons*/
transform: scale(1.1);
}

nav ul{
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
}

nav li.selected a {
  color: aliceblue;
  background-color: coral;
}

nav li {
  display:inline; padding:7px 7px;
  list-style:none;
  width: 60%;
}

nav li a{
  color: coral;
  background-color: aliceblue;
}

main {
  text-align: center;
  /*this is for the css3 animation*/
  animation-delay: 0.2s;
}

/*description list styles*/
dt {
  font-size: 16pt;
  font-weight: bold;
  text-decoration: underline;
  color: rgb(98, 43, 36);
  padding: 4px;
}

dd {
  font-size:12pt;
  text-decoration: none;
  color:dimgray;
  padding: 4px;
}
p a{
  color:cornflowerblue; text-decoration: none;
}

p a:hover{
  color:coral;
}

/* all of my style selectors */
p {
    font-size: 18px; 
    font-family:'Times New Roman', Times, serif;
    color: rgb(98, 43, 36);
    background-color: aliceblue;
    padding: 5px;
    border-radius: 4px;
      }

blockquote {
  text-align:center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

blockquote::first-letter{
  font-size:1.4em; font-weight: bold;
}

address{
  font-size: 16px;
  font-family: 'Times New Roman', Times, serif;
  color: rgb(102, 102, 102);
  background-color: aliceblue;
  padding: 5px;
  border-radius: 4px;
      }

header { 
    height: 85px; 
    width:auto; 
    background-image:url(images/banner.jpeg); 
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 40px;
    font-weight: bold;
    display: flex; justify-content: center; align-items: center;
    color:aliceblue;
    padding: 5px;
    /* outline to make header text pop out */
    -webkit-text-stroke: 0.5px #000000;
    text-shadow: 2px 2px 0px #000000;
       }

body {
    max-width: 1200px;
    margin:auto;
    padding: 20px;
    display: flex; flex-direction: column;
    align-items: center;
    background-image:url(images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
      }

figure {
  width:480px;
  display:inline-block;
  margin:15px; text-align: center;
}

figcaption {
  font-size: 18px;
  text-align: center;
  color:rgb(98, 43, 36);
}

section {
  text-align: center;
  background-color: aliceblue;
  border-radius: 8px;
  border: 4px cornflowerblue;
  padding: 5px; margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}


/* here i use em to change the font-size */
ul {
  color: rgb(98, 43, 36);
  font-size: 1.5em;
  line-height: 2;
  list-style:none;
}

ul.code-bullets {
  list-style: none;
  padding-left: 0;
}

ul.code-bullets li {
  padding-left: 1.5em;
  background: url(images/codebullet.svg) no-repeat left center;
  background-size: 1em 1em;
  margin-bottom: 0.4em;
}

ol {
  color: rgb(98, 43, 36);
  font-size: 1.5em;
  line-height: 1.5;
}

h1 {
    color:coral;
    background-color:aliceblue;
    font-family: 'Times New Roman', Times, serif;
    font-size: 34px;
    text-align: center;
    border-radius: 4px;
    text-shadow: 1px 1px 0px #000000;
      }

h2 {
    color:cornflowerblue;
    background-color: aliceblue;
    font-family: 'Times New Roman', Times, serif;
    font-size: 32px;
    border-radius: 4px;
    -webkit-text-stroke: 0.5px #000000;
    text-shadow: 1px 1x 0px #000000;
      }

footer {
    color:cornflowerblue;
    background-color: aliceblue;
    font-size: 24px;
    font-family: 'Times New Roman', Times, serif;
    border-radius: 8px;
    padding: 5px;
    margin: auto;
    text-align: center;
      }

    /* i gave the images a little border */
img {
    max-width: 100%;
    height: auto;
    border: 4px rgb(143, 143, 255) solid;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
      }


small {
  color: rgb(102, 102, 102);
  font-size: 12px;
  font-weight: bold;
  padding: 3px;
}

    /* below are 3 id selectors */
#headwrapper {
    background-color: aliceblue;
    border: 4px rgb(143, 143, 255) solid;
    margin-bottom: 20px; padding: 5px;
      }

#socials {
    background-color:aliceblue;
    text-align: center;
    margin-bottom: 20px;
      }

#bluewrapper {
  background-color: cornflowerblue;
  border: 4px rgb(143, 143, 255) solid;
  margin-bottom: 20px;
  padding: 7px;
}

#newswrapper {
  background-image: url(images/newspaper.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  border: 4px rgb(143, 143, 255) solid;
  margin-bottom: 20px; padding: 5px;
}
/* here is some styling for the infobar */
.infobar{
  color: aliceblue;
  background-color: cornflowerblue;
  padding: 5px; margin-bottom: 20px;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*this will keep it at the top of the page*/
  position: sticky;
  top: 0;
  z-index: 1000;
}

.infobar a{
  color: aqua;
  text-decoration: underline;
}

.infobar a:hover{
  color: aliceblue;
  text-decoration: none;
}

    /* below are my class selectors */
.important {color:orangered;} /* for emphasis */

.highlight {background-color: aliceblue; border-radius: 2px;} /* for highlighting content without extending to end of page */

/* margins to separate divs */
.stacked-box {
  background-color: aliceblue;
  padding: 10px;
  border-radius: 8px;
  /* this makes a vertical gap between divs */
  margin-bottom: 20px; 
}

/* this div will have a fixed width rather than wrapping to the text */
.fixed-box {
  background-color: aliceblue;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20px;
  width: 75%;
}

/* I renamed all the boxes i used for my resume to reuse their style */
.two-column-box {
  background-color: aliceblue;
  padding: 5px;
  gap: 5px;
  border-radius: 6px;
  margin-bottom: 15px;
  width: 100%; max-width: 1200px; height: auto;
  display: flex;
  align-items: flex-start;
}

.two-column-box img{
  background-color: aliceblue;
  margin-right: 10px;
  border-radius: 3px;
  border: solid 6px rgb(143, 143, 255);
}

/*gives us a left column with a fixed width of 200px, centers the text
for some reason i found this method of column div easier to use/customize than aside/section*/
.column-title {
  flex: 0 0 200px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;

  /* i had to turn the title into a flex container to 
  fully center the text vertically & horizontally */
  display: flex;
  flex-direction: column;      /* title stays stacked above the <small> dates */
  justify-content: center;    
  align-items: center;        
  text-align: center;
  padding: 3px         
}

/*flexes the remaining text to the right*/
.column-text {
  flex: 1;
  background-color: aliceblue;
  border-radius: 4px;
  font-weight: 500;
}
/* USES em here to change font size */
.column-text ul{
  list-style:square;
  font-size: 16pt;
  color:rgb(98, 43, 36);
  line-height: 2.5;
}

.column-text p{
  background-color: aliceblue;
  /*resetting the margins here so i can flex how i want, same for the title
  i also had to do this for address and abbr*/
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  margin-left: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.column-text small{
  background-color: aliceblue;
  font-size: 14px;
}

.column-text address{
  margin: 0;
  line-height: 1.5;
  margin-left: 100px;
  margin-bottom: 10px;
}

.column-text abbr{
  background-color: aliceblue;
  color: rgb(102, 102, 102);
  font-size: 16px;
  font-family: 'Times New Roman', Times, serif;
  padding: 5px;
  line-height: 1.5;
  margin: 0;
}
/* method i found for putting text next to an image */
.media-container {
  display: flex;    
  align-items: center;  
  gap: 10px;
  
  padding: 10px;
  border-radius: 8px;
}

/* works with first flex to take up 'remaining' space */
.media-text {
  flex: 1; 
  background-color: aliceblue;
  border-radius: 4px;
}

/* Removes default margin for heading */
.media-text h1 {
  margin-top: 0;          
  margin-bottom: 10px;  
  border-radius: 8px;  
}

/* gives a default width to images to apply to the media container */
.media-img {
    width: 600px;
    height: auto;
    border-radius: 8px;
}

* {box-sizing: border-box;}

/* animation that fades in my main section */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  animation: fadeSlideIn 0.8s ease-out both;
}

@media only screen and (min-width:720px){
  nav ul {
    flex-direction: row;   
    flex-wrap: wrap;       
    justify-content: center;
  }

  nav li {
    flex: 1;               /* equal-width buttons that fill the row */
    width: auto;
  }
}