/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* CSS Variables */
:root{
    --heading-font:'Cormorant-Garamond', sans-serif;
    --primary-font:'Lato', cursive;
    --primary-color:#d1d1d1; 
    --secondary-color:#416a8e;
    --third-color:#7a9fc2;
    --fourth-color:lime;
}
/* Asterisk wildcard selector to overide default styles add by the browser */
* {
    padding: 0;
    margin:0;
    box-sizing: border-box;
}


/* Global styles */
 body{
    font-family:var(--primary-font);
    min-height:100vh;
    display: flex;
    flex-direction:column;
    color:var(--primary-color);
    width:100%;
}

/* Heading */
 h1{
    font-family:'Playfair-Display',san-serif;
 }

 h1,h2,h3,h4,h5{
    text-transform:uppercase;
    letter-spacing: 5px;
    color:var(--secondary-color)
 }


 h2,h3,h4,h5{
    font-family:var(--heading-font);
 }

 .sharp-corners{
    border-radius: 0%;
 }

 

 /* Header */
 header{
    background-color: var(--secondary-color);
    width:100%;
    padding: 0%;
    margin: 0%;   
}

 header div{
    background-color: var(--secondary-color);
    margin: 0%;
    padding:0%;
    width:100%;
 }

 /* Navigation */
 .navbar {
    padding:0%;
 }

 .navbar a{
    color: var(--primary-color);
 }

 /* Hero section */
 #hero {
    background:
         /*Added a linear gradient to make the colour of text stand out but still having same image of the code in background  */
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)),
        url(../images/hero-background-image.png);
    background-size:cover;
    font-weight: 800;
    line-height: 40px;
    color:var(--fourth-color)
 }

#hero h1,h2{
    color:var(--fourth-color)
}

 #hero p {
    font-size: 30px;
 }

 /* About Section */
 #about {
    color:var(--secondary-color)
 }

 /* Education section */
#education {
    background-color: var(--third-color);
}

 .card{
    min-height: 90vh;
    padding: 10px;
    font-size: 18px;
 }

#running{
    text-align: left;
}

#boardwalk{
    text-align: right;
}

/* contact section */
#contact{
    background-color: var(--third-color);
}

 /* Default (Desktop) */
textarea {
    width: 60%;
    height: 200px;
}

/* For mobile devices */
@media screen and (max-width: 768px) {
   .navbar-toggler{
      margin-right:1rem;
   }
   textarea {
    width: 95%; /* Wider on small screens */
    height: 150px; /* Adjust height */
    padding: 10px;
   }
}