@import "../css/font.css";
@import "../css/nav.css";
@import"../css/social.css";

h1{
    font-size: 30px;
    font-weight: bolder;
    color:black;
}

h2{
    font-size:20px;
    letter-spacing: 1.0px;
    font-weight: normal;
}

blockquote{
    font-size: 17px;
}

p{
    font-size: 17px;
}

h3{
    font-size:15px;
    letter-spacing: 1.0px;
}

a{
    text-decoration: underline;
    font-size: 15px;
    font-weight: bolder;
    color: black;
}

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

.part1{
  display:grid;
  grid-template-columns: repeat(4fr, 1fr);
 
}

.teagarden{
    background-image:url("../images/blogbackground.jpg");
    background-size: cover;
    height: 80vh;
    background-repeat: no-repeat;
    background-position: center;
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 4;
}



.part1 .intromessage{
    background-color: white;
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 4;
    z-index: 4;
    border-style: double;
}

.blogpostintro{
    font:black;
    text-align: left;
}

.part2{
    display: grid;
}


.blogpost1{
    background-image: url("../images/highway.jpg");
    background-size: cover;
    opacity: 0.95;
    border-radius: 25px;
    height: 80vh;
    background-repeat: no-repeat;
    background-position: center;
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 4;
    border-style: double;

}

.cameron{
    font:black;
    text-align: left;
}

.part3{
    display: grid;
}


.blogpost2{
    background-image: url("../images/teagarden.jpg");
    background-size: cover;
    opacity:0.95;
    border-radius: 25px;
    height: 80vh;
    background-repeat: no-repeat;
    background-position: center;
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 1;
    color:black;
    font-style: normal;
    border-style: double;

}

.part4{
    display: grid;
}

.blogpost3{
    background-image: url("../images/towers.jpg");
    background-size: cover;
    opacity: 0.9;
    border-radius: 25px;
    height: 80vh;
    background-repeat:repeat;
    background-position: center;
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 4;
    font-style: normal;
    border-style: double;

}

label{
    color:#630802;
    font-weight: bold;
}
    
button{
        display: inline-flex;
}

.part5{
    background-color:white;
    color: black;

}


footer{
    background:lightgray;
}

.blacklink{
    color: red;
    font-weight: bolder;
    font-size:25px;
}
     
 .redlink{
     color: red;
     font-weight: bolder;
     font-size:25px;
}
      
  .bluelink{
     color: red;
     font-weight: bolder;
     font-size:25px;
}

  span{
      text-decoration: underline;
}

.caption3{
    text-align: right;
    font-size: 12px;
}
    

    

  @media only screen and (max-width: 600px) {
        .blogpost2{
            background-image: url("../images/teagarden.jpg");
            background-size: cover;
            border-radius: 5px;
            height: 80vh;
            background-repeat: no-repeat;
            background-position: center;
            grid-row-start: 1;
            grid-row-end: 4;
            grid-column-start: 1;
            grid-column-end: 4;
            color: black;
            font-style: italic;
    }
  
        .logo{
            white-space:nowrap;
    }
      
      
        h1{
            font-size: 18px;
            font-weight: bolder;
            color:black;
    }
      
        h2{
            font-size:13px;
    }

        blockquote{
            font-size: 12px;
    }

        p{
            font-size:12px;
        }

        nav{
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            
    }

        .menu{
            font-weight: bold;
            color: red;
            display:in-line;
            text-align: right;
    }
        a{
            font-size:13px;
            
    }
 
        .blogpost1{
            background-image: url("../images/highway.jpg");
            background-size: cover;
            border-radius: 5px;
            height: 80vh;
            background-repeat: no-repeat;
            background-position: center;
            grid-row-start: 1;
            grid-row-end: 4;
            grid-column-start: 1;
            grid-column-end: 4;
            color:black;
            font-style: italic;
    
    }
      
      .blogpost3{
            background-image: url("../images/towers.jpg");
            background-size: cover;
            opacity: 0.9;
            border-radius: 5px;
            height: 80vh;
            background-repeat:repeat;
            background-position: center;
            grid-row-start: 1;
            grid-row-end: 4;
            grid-column-start: 1;
            grid-column-end: 4;
            color:black;
            font-style: italic;

}
        .blogpostintro{
            color: black;
    }

        .blacklink{
            font-size: 15px;
            color: red;
    }
     
        .redlink{
            font-size: 15px;
            color: red;
    }
      
        .bluelink{
            font-size: 15px;
            color: red;
          
   }
        span{
            font-weight: bolder;
            text-decoration: underline;
    }

}