/* making our html file 100% high and 100% wide */
html{
    height: 100%;
    width: 100%;
}
/* removing all margins in the file */
*{
    margin: 0;
}
body{
    /* ensuring the body covers the whole html file */
    height: 100%;
    width: 100%;
    /* add a ackground color for contrast and styling */
    background-color: #c6c6c6;
    /* hide any overflow horizantally or in the x-axis */
    overflow-x: hidden;
}
/* styling the header */
.header{
    /* add a dark or black background color */
    background-color: #00a19c;
    /* add a light color for the text for visibility */
    color: #111;
    /* add a slight padding for spacing  */
    padding: 7%;
    /* add a marging from the bottom to make the section stand out */
    margin-bottom: 2%;
    /* align the text at the centre of the section */
    text-align: center;
    /* have a large font size for cotrast */
    font-size: xx-large;
    /* add a different font family to distinguish from the rest of the text in the page */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* styling the biography paragraph */
.biography{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: xx-large;
    padding-left: 5%;
    padding-bottom: 3%;
    text-indent: 15px;
    color: #80142b;
}
/* styling our block containers */
.block{
    /* set the height and width of the container in pixels */
    height: 550px;
    width: 500px;
    display: inline-table;
    padding-left: 6%;
    /* animation: scrollDown 5s linear initial; */
}
/*using keyframes to enable the animation to take place*/
/* @keyframes scrollDown {
    0%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(-700%);
    }
} */
 /* styling the images in the block containers */
.block img{
    /* making the image almost as high and wide as the parent container */
    height: 400px;
    width: 400px;
    /* avoid distortion of the images by using the object fit cover style */
    object-fit: cover;
    border-radius: 25%;
    border-style: ridge;
    box-shadow: 15cm;
}
/* styling our mini headings of the block containers */
.block h3{
    /* underline the text to stand out as titles */
    text-decoration: underline;
    text-decoration-color: #111;
    /* add color for contrast */
    color: #111;
    /* making the font size as large as possible but not too large for visiility */
    font-size: x-large;
    font-weight: 700;
}
/* styling the paragraphs of the block containers */
.block p{
    /* indent the first line */
    text-indent: 10px;
    /* add a different font family for specifity of the paragraphs */
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    /* space the text from the left by padding */
    padding-left: 7px;
    /* add color  */
    color: #80142b;
    /* increse font size for easy readabilty */
    font-size: larger;
}
/* styling our submit form */
.feedback{
    background-color: #00a19c;
    border-radius: 10px;
    /* margin: 30px; */
    padding-left: 20px;
    border: 2px solid #444;
}
/* styling our textarea */
.feedback textarea{
    width: 550px;
    height: 150px;
    border: 1px solid #80142b;
    background-color: #c6c6c6;
    border-radius: 10px;
}
/* styling the submit button */
.feedback button{
    background-color: aquamarine;
}