@import url(https://fonts.bunny.net/css?family=assistant:500);

/* main styles for ALL body elements */
body {
    display: grid; /* centering vertically using css grid */
    place-items: center; /* centering vertically using css grid */
    background: linear-gradient(to bottom, #377cd0, #21252a); /* gradient */
    background-size: 100vh 150vh; /* needed for extending background size to cover up all devices */
    font-family: 'Assistant', sans-serif; /* use Helvetica font */
    max-width: 800px; /* avoid the text taking up the entire width */
    margin: 0 auto; /* center the body */
    color: #ffffff; /* text color */
    overflow: hidden; /* stop scrolling */
    user-select: none; /* stop selection */
}

/* articles */
article h1 {
    font-size: 30px; /* font size for all headers */
}

/* sections */
section {
    padding: 20px; /* spacing */
    margin-bottom: 20px; /* spacing */
}

/* classes */
/* borders */
.bordered {
    border: 1px solid #FFFFFF; /* create the border */
    border-radius: 25px; /* rounded rectangle */
}

/* center in middle of screen */
.centered {
    margin-top: calc(50vh - 50%); /* center vertically */
}

/* specific styles for index.html */
.main {
    text-align: center; /* everything should be centered */
    line-height: 1.5em;
}

.main h1 {
    margin-bottom: 0.5em; /* small margin */
    font-size: 45px; /* large font size because it's the main heading */
}

.main p {
    margin: 0.5em;
}

/* profile picture display */
.profile-picture {
    filter: drop-shadow(2px 2px 5px black); /* drop-shadow for blurred shadow effect */
    border-radius: 50%; /* crop the picture into a circle */
    width: 15%; /* resize the image to smaller dimensions */
}