body {
    background-color:black;
    color:rgb(238, 238, 238);
    font-family: "Rubik", sans-serif;
}

/* main container */


/* banner */
.banner {
    padding: 0;
}

.face-pic {
    height: 10vh;
}

.bg-container {
    display: grid;
    align-items: center;
    width: 100%;
}

#matrix-canvas {
    order: 0;
    grid-area: 1 / 1;
    height: 10vh;
    width: 100%;
}

.text {
    order: 1;
    grid-area: 1 / 1;
    font-size: 1.5vh;
    font-family: Arial, Helvetica, sans-serif;
    
}

/* home button */
.nav-buttons-row {
    justify-content: center;
}

.nav-buttons {
    background-color: black;
    border: 0;
}

.nav-icons {

    background-color: black;
    height: 5vh;
}


/* menu */
.menu {
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu > li {
    width: 33%;
}

.menu_btn {
    background: linear-gradient(to left bottom, rgb(249, 195, 35), rgb(124, 63, 35));

    border: none;

    padding: 10px 20px; /* top left */

    border-radius: 5px;

    margin: 2px;

    font-size: 1.3rem;

    cursor: pointer; /* When we put our cursor on the button it changes to an index finger hand sign */

    width: 100%;

    color:black;
}

/* home page text */
.name {
    font-size: 3rem;
    font-weight: 1000;
    margin-bottom: 1%;
}

.student-info {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 1.5rem;
}

.greeting {
    font-weight: 600;
    font-size: 1.2rem;
}

/* social media links */
.my-links {
    display: flex;
    flex-direction: row;
    align-items:flex-end;
    margin-top: 5%;
}

.my-links > a > img {
    height: 5vh;
    width: 100%;
}

/* hobby page */
.videoFrame {
    justify-content: center;
}

iframe {
    width: 640;
    height: 480;
}

.video {
    padding: 3px 3px; /* top left */

    font-size: 15px;

    background: rgb(124, 63, 35);

    border-color: rgba(252, 182, 70, 0.5);

    margin: 10px;

    color:whitesmoke;
}

.hobby-btn {
    background: linear-gradient(to left bottom, rgb(249, 195, 35), rgb(124, 63, 35));

    border: none;

    padding: 5px 5px; /* top left */

    border-radius: 5px;

    margin: 2px;

    font-size: 15px;

    box-shadow: 1px 1px 1px 1px rgba(244, 174, 120, 0.3); /* left top right */

    cursor: pointer; /* When we put our cursor on the button it changes to an index finger hand sign */

    color:black;
}

/* resume page */
#resume_iframe {
    width: 100%;
    height: 90vh;
    border: none;
    overflow-y: scroll;
}