body {
    font-family: simplex;
    /* background-color: rgb(151, 250, 250); */
    color: #333333;
    font: weight 9px;
    font-weight: bold;
    line-height: 1.6;
    margin: 1.25rem;
    background-color: tan;
    /* background-image: url(../images/bgimage.jpg); */
}

/*Headings */
h1 {
    color: silver;
    text-align: center;
    /* background-color: #0041BA; */
    /* blueprint color */
    text-wrap: inherit;
    
   
}

hr {
border: double darkred;

}

/* Styles all level 2 headings */
h2 {
    color: darkgreen;
    border-bottom: 2px solid darkgreen;
    
}

#slide{
    width: 20rem;
    height: 3rem;
    background-color: #0041BA;
    text-align: center;
    animation-name: slideleft;
    animation-duration: 3s;
}

#timegreet{
    width: 12rem;
    height: 4rem;
    border-style: double;
    text-align: center;
  background-color:transparent ;
  animation-name: myAnimation;
  animation-duration: 4s;
  /* this makes the animation loop forever */
  /* animation-iteration-count: infinite; */
}
#about{
    border:none;
}

@keyframes myAnimation {
  from {background-color: darkred;}
  to {background-color: transparent;}
}


@keyframes slideleft{
    from{transform: translatex(100%)}
}

/* Styles all level 3 headings */
h3 {
    color: darkred;
}

/* Header */
header {
    text-align: center;
}

header img {
    width: 100%;        /* Makes image fill available width */
    max-width: 800px;   /* Prevents image from becoming too large. */
}

/* Navigation and Links */
nav {
    margin-bottom: 20px;
}

/* Make links horizontal */
nav ul{
    display: flex;
    gap: 1rem;
    justify-content: center;
    list-style: none;
    background-color: transparent;
    
    padding: 0;
    margin: 0;
    /* only removed checks from menu and not other lists */
    /* flex box only sizes horizontally */
}

a {
    color: #0041BA;
    text-decoration:none;
     width: 300px;
    height: 30px;
    background-color:white;
    border-radius: 15px;
    padding: 5px;
    transition: background-color .5s;
    white-space: nowrap;
    /* very helpful for multi-word links */
}
 

a:hover {
    color: black;
    text-decoration: underline;
    background-color: green;
    font-weight: bolder;
}

/* Lists */
/* Styles unordered lists */
ul {
    background-color:transparent ;
    padding: 60px;
    list-style-image: url(../images/bolt.png);
}

/* Styles ordered lists */
ol {
    background-color: transparent;}
    .steps li:nth-child(2) {
        color: red;
    }

/* Styles blockquotes */
blockquote {
    background-color: bisque;
    border-left: 5px solid rgb(97, 72, 4);
    padding: 10px;
    font-style: italic;
}

/* Style section elements */
section {
    padding: 15px;
    margin: 1rem 0;
    border: 1px solid #0041BA;
}

.articles {
    border: 5px solid;
    border-radius: 15px;
}

.content-area{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile{
    display: flex; 
    gap: 1rem;
    align-items: flex-start;
}

.intro{
    display: flex; 
    gap: 1rem;
    align-items: flex-start;
    border:none;
}

.profile img{
    width: 300px;
    Height: auto;
    border-radius: 30px;
    border: 10px solid #0041BA;
}

.tables img{
    width: 600px;
    Height: auto;
    border-radius: 3px;
    border: 5px solid #0041BA;
}


.gallery {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 1rem;
    /* parentheses get commas, nothing else does */

}
/* 768 px is phone width, this width makes phone yellow and desktop blue */

@media(max-width:768px){
    body{background-color: khaki}
}

/* changes link layout for mobile vs desktop */
@media (max-width: 768px){
    nav ul{
        flex-direction: column;
        align-items: center;
    }
}
/* resizes images without distorting */

@media (max-width: 768px) {
    .content-area {
        flex-direction:column;
    }
}

/* will adjust images to fit */
img {
    max-width: 100%;
    height: auto;
}

/* Footer */
footer {
    text-align: right;
    background-color: #0041BA;
    color: white;
    padding: 7px;
    margin-top: 15px;
   
}