* {
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

html {
scroll-behavior: smooth;
width: 100%;
overflow-x: hidden;
}

body {
    font-size: 22px;
    font-family: Jua;
    color: rgb(255, 255, 255);
    line-height: 44px;
    background-color: #B42A2A;
    
}

header {
width: 100%;
height: 125px;
background-color: #3192CB;
padding: 20px;
position: fixed;
}
#logo{display: inline-block;
position:relative;top:-100px;
left:247px;}
#aboutme{/* About Me */
    position: relative;
    font-family: 'Irish Grover';
    font-style: normal;
    font-weight: 400;
    font-size: 50px;
    line-height: 60px;
    position: relative;
    top: -30px;
    left: 1000px;
    color: #FFFFFF;
    margin:0 auto;
    
    }
#aboutmetext {position: relative;
    color: #FFF;
    font-family: 'Irish Grover';
    font-style: normal;
    font-weight: 400;
    font-size: 50px;
    line-height: 60px;
    position: relative;
    color: #FFFFFF;
    margin:0 auto; 
    width: 100%;
    text-align: center;
/*  margin:0 auto; puts text in the middle} */
}
    #interestscss {
        position: relative;
        color: #FFF;
        font-family: 'Irish Grover';
        font-style: normal;
        font-weight: 400;
        font-size: 50px;
        line-height: 60px;
        position: relative;
        margin:0 auto;
        color: #FFFFFF;
        margin:0 auto;
        width: 100%;
        text-align: center;
    }
#maintext {position: relative;
    font-size: 30px;
    color: #FFFFFF;
    background-color: #3192CB;
    border-radius: 20px;
    padding: 30px;
    margin:0 auto;
    text-align: center;
}
    #InImg {position: relative;
        font-size: 30px;
        color: #FFFFFF;
        background-color: #3192CB;
        border-radius: 20px;
        padding: 30px;
        margin:0 auto;
        text-align:center;
        display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    }
    #contactimg {
        width: 70px;
        display: inline-block;
        margin-right: 20px;
        position: relative;
        text-align: center;
    }
    #border {
        position: relative;
        margin:0 auto;
    }
nav {
    position: absolute;
    right: 0px;
    top: 30px
}
header div {
width: 200px;
}
main{
    text-shadow: black 2px 2px 2px;
 
padding: 20px;
padding-top:20px;

/* Padding 4 positions: top, right, bottom, left */
/* padding: 160px 20px 20px 20px; */


/* combined left & right = 3 positions */
/* padding: 160px 20px 20px 20px; */
}
main article p {
    max-width: 65ch;
}

nav ul li {
    display: inline-block;
    margin-right: 30px;
}
footer {
    padding: 20px;
    text-align: center;
}
.fancy-button {
    background-color: red;
    padding: 20px 15px;
    border-radius: 10px;
    border: 2px dotted green;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.404);
    font-weight: bold;
    color: blue;
    


}
.fancy-button:hover
{ background-color: bisque;
color: black;}


/* Styling The Form */
/* this makes the box width */
input [type=text],
input[type=password],
input[type=submit],
textarea {
    display: block;
margin-bottom: 20px;
width: 260px;
/* border-radius makes the box circular */
border-radius: 5px;
border: 1px solid black;

}#banner{
    background-image: url(../img/banner.png);
    background-size: cover;
width: 100%;
height: 450px;
}
@media  screen and (max-width:719px){
    #InImg{
        grid-template-columns: 1fr;
    }
}   

@media  screen and (max-width:719px){
    #top{
        grid-template-columns: 1fr;
    }
}