/* init fonts */
@font-face {
	font-family: "Convection";
	src:
		url("Convc.woff") format("woff"); }

/* handles the image and the text at the top */
.logo {
    display: flex;                  /* Keeps the image centered */
    flex-direction: column;         /* Keeps the image centered */
    align-items: center;            /* Keeps the image centered */
    position: relative;             /* Keeps the image centered */
    margin-bottom: 10px;            /* Adds spacing between the logo and nav */
}

.logo img {
    border: 3px solid #333;         /* black border */
    max-width: 150px;               /* Adjust the logo size */
    height: auto;                   /* Adjust height automatically */
}


/* handles navigation bar below the logo */
.header-box {
    background-color: #333;         /* Dark background */
    padding: 10px;                  /* Adds some spacing */
    color: black;                   /* Make sure dividers are black */
    text-align: center;             /* Centers the links */
}

.header-box a {
    color: white;                   /* White text */
    text-decoration: none;          /* Removes underline */
    font-weight: bold;              /* Makes text bold */
    padding: 0 15px;                /* Adds space around links */
}

.header-box a:hover {
    color: #f77eeb;                 /* Changes color on hover */
}


/* Bullet Points List */
.research-list {
    background-color: #333;         /* Dark background */
    padding: 10px;                  /* Adds some spacing */
    color: black;                   /* Make sure dividers are black */
    text-align: center;             /* Centers the links */
    display: inline-block;          /* Make box width fit content */
}

.research-list a, li {
    color: white;                   /* White text */
    text-decoration: none;          /* Removes underline */
    font-weight: bold;              /* Makes text bold */
    padding: 0 15px;                /* Adds space around links */
    display: block;                 /* make sure all entries are on new lines*/
    margin-top: 15px;               /* makes space above the text */
    margin-bottom: 15px;            /* makes space below the text */
}

.research-list a:hover {
    color: #f77eeb;                 /* Changes color on hover */
}

/* handles the socials bar */
.socials-box {
    background-color: #333;         /* Dark background */
    padding: 10px;                  /* Adds some spacing */
    color: black;                   /* Make sure dividers are black */
    text-align: center;             /* Centers the links */
    display: inline-block;          /* Make box width fit content */
}

.socials-box a {
    color: white;                   /* White text */
    text-decoration: none;          /* Removes underline */
    font-weight: bold;              /* Makes text bold */
    padding: 0 15px;                /* Adds space around links */
}

.socials-box a:hover {
    color: #f77eeb;                 /* Changes color on hover */
}

/* universal stuff */
body {
    text-align: center;             /* Centers the links */
    color: #333;                    /* White text */
    font-family: Convection;        /* change font */
    background-color: #f77eeb;      /* pink bg */
}

/*Code blocks*/
code {
    background-color: white;       /* use white bg */
    font-family: "monospace";      /* use monospace font */
    border: 2px solid #333;        /* black border */
    padding-left: 5px;             /* leave some gaps between text and border */
    padding-right: 5px;            /* leave some gaps between text and border */
    margin-top: 10px;              /* Adjust gap above */
    margin-bottom: 10px;           /* Adjust gap below */
    display: inline-block;         /* Ensures margin applies correctly */
}


/* universal blog stuff */
.blog {
    text-align: center;             /* Centers the links */
    color: #333;                    /* White text */
    font-family: Convection;        /* change font */
    background-color: #f77eeb;      /* pink bg */
}

.blog li{
    text-align: center;             /* Centers the links */
    color: #333;                    /* White text */
    list-style-type: decimal;       /* Ensures numbered bullets show */
    max-width: 600px;               /* restrict width of text */
    margin: 0 auto;                 /* center the text */
}


.blog h2, h3{
    color: #333;                    /* White text */
    font-weight: bold;              /* Makes text bold */
    text-decoration:underline;      /* Makes links underlined */
    max-width: 600px;               /* restrict width of text */
    margin: 0 auto;                 /* center the text */
}

.blog p{
    color: #333;                    /* White text */
    max-width: 600px;               /*restrict width of text */
    margin: 0 auto;                 /*center the text */
    margin-bottom: 10px;            /* Adjust gap below */
}

.blog a{
    color: #333;                    /* White text */
    font-weight: bold;              /* Makes text bold */
    text-decoration:underline;      /* Makes links underlined */
    text-decoration-style: dotted;  /* Makes the underline dotted */
}
.blog a:hover {
    color: #ffffffff;               /* Changes color on hover */
}

.blog img{
    border: 3px solid #333;         /* black border */
    max-width: 800px;               /* Adjust the img width */
    height: auto;                   /* adjust img height according to whats set by max-width*/
    display: block;                 /* make sure its on a new line */
    margin-left: auto;              /* make it isnt off to the left */
    margin-right: auto;             /* make it isnt off to the right */
    margin-top: 20px;               /* Adds space above the image */
}