@font-face {
    font-family: "raleway-thin";
    src: url("font1.woff2") format("woff2");
    font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@media (max-width: 768px) {
    .menu-bar {
        flex-direction: column;  /* Stack the menu and social links vertically */
        align-items: stretch;    /* Stretch the items to fit the container */
    }

    .menu-bar .menu-links,
    .menu-bar .social-links {
        width: 100%;  /* Ensure both the menu and social links take up full width */
        justify-content: center !important;  /* Center align items on small screens */
    }

    .menu-bar .social-links {
        margin-top: 10px;
    }
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh; display: flex; flex-direction: column;
}
p, ul {
    font-family: raleway-thin, sans-serif;
    line-height: 1.8em;
    letter-spacing: 1px;
}
h2 {
    text-align: center;
    color: rgb(63, 203, 238);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size: 60px;
    margin: 10px auto;
    letter-spacing: 2px;
}
h3 {
    color: darkslategray;
    font-size: 46px;
    font-family: raleway-thin, sans-serif;
    margin-bottom: 15px;
}
.header {
    background: linear-gradient(to bottom, white, #434343);
}
.header-image {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
.menu-bar {
    background-color: #434343;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 50px;
    flex-wrap: wrap;
}
.menu-bar .menu-links {
    display: flex;
    flex: 1;
}
.menu-bar .menu-links a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: "raleway-thin";
    src: url("font1.woff2") format("woff2");
}
.menu-bar .menu-links a:hover {
    background-color: #575757;
}
.menu-bar .social-links {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}
.menu-bar .social-links a {
    display: flex;
    align-items: center;
    padding: 14px;
    text-decoration: none;
}
.menu-bar .social-links a img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
}
.menu-bar .social-links a:hover {
    background-color: #575757;
}






.footer {
    margin-top: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #434343;
}
.name, .email, .copyright {
    text-align: center;
    color: white;
    font-family: raleway-thin, sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
}
.name {
    font-size: 24px;
}