body {background-color: #feb5da; 
    color:#252525; background-image: linear-gradient(to bottom,#fff,#feb5da);background-repeat:no-repeat;}


#cover {
    width:95%;
    min-height:800px; 
    background-color:#E89EB8;
    box-shadow: 3px 3px 3px #333;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 40px;
}


.intro-text {
    text-align: center;
}


body {
    background-image: url("Zebra.avif");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}




header{ background-color:#99e472;
        color: #fff;
background-repeat:no-repeat; background-size:contain;
line-height:500%;
text-indent: 6em;
border-radius:20px 20px;
text-align:center;}

nav{background-color:#f3c911; line-height:2.5em;
font-weight:bold;
border-radius:20px 20px;
text-align:center;
font-weight:bolder;}

ul{list-style: square;}

footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
}


h1 {
    color: white;
    -webkit-text-stroke: 2px black;
}


h2{ color: #6db6ff; text-shadow:2px 2px 2px #fff;}

dt{color:#311545;}


#homeimg {
    display: flex;
    justify-content: center; 
    margin-top: 10px;         
}

#homeimg img {
    width: 200px;
}

#hobbyimg{background-image:url(hobbies.layout.JPG);
    height:auto;
    margin:0 auto;
    max-width:100%;
    background-repeat:no-repeat;
    background-size:60%;
    background-position:right;}

    #growthimg{background-image:url(personalgrowth.jpg);
    height:auto;
    max-width:100%;
    background-repeat:no-repeat;
    background-size:60%;
    background-position:center;}

  #collegeimg {
    text-align: center;
    margin: 20px 0;
}

.college-pic {
    width: 250px;
    border-radius: 10px;
}

ul {
    display: inline-block;
    text-align: left;
}

.blog-pic {
    width: 320px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: block;
    margin: 20px auto;
}


  #about-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
}

.about-pic {
    width: 200px;
    height: auto;
    border-radius: 10px;
}

.about-text {
    flex: 1;
}

ul {
    padding-left: 20px;
}
#media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.card {
    background: #fff;
    border: 2px solid #f4a7c1;  
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    text-align: center;
}


.card img {
    width: 200px;
    border-radius: 10px;
}

.card iframe {
    border-radius: 10px;
}


.growth-pic {
    width: 180px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: block;
    margin: 20px auto;
}



table{
border: 2px solid #6633ff;border-collapse:collapse;
    margin: 20px auto;
}

td,th{border: 2px solid #79e96a;
   padding: 0.5em;
   text-align: center;}

tr:nth-of-type(odd){
   background-color: #f56932;
}

th{background-color: #eaf551;}

caption{ font-weight: bolder; text-align: center; color: #6633ff;font-family: Georgia, 'Times New Roman', Times, serif;}

nav a {
    display: inline-block;
    padding: 8px 12px;
    margin: 5px;
    background: #f4a7c1;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}
nav a:link{color: #fc13dd;}
nav a:hover{color: #0aaffc;transform: scale(1.2);background:#A627F5;transition: 0.3s;}




form {
    max-width: 400px;
    margin: 0 auto;
}

input, textarea {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
input[type="submit"]{grid-column:2/3;width:10em;}

table tr {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

table tr:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.main-section {
  background-color: pink;
  height: auto;
  padding-bottom: 40px;
}


.name{color:#42f9f9; font-weight:bolder;}

