@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&display=swap');

:root {
    --main-text-color: white;
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #07032b, rgb(138, 23, 184));
    color: var(--main-text-color);
    font-family: 'Maven Pro', sans-serif;
    min-height: 100%;
}

#main {
    position: static;
    height: 100%;
    padding: 5%;
}

a {
    color: inherit;
    text-decoration: none;
}


@media only screen and (min-width: 940px) {
#main {
    padding: 0;
}
/* GRID --------------------------------------*/
#main-grid {
    height: 99vh;
    width: 99vw;
    display: grid;
    position: relative;
    margin: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5%;
}

#grid-left {
    grid-column: 1;
    height: 100%;
    position: relative;
}

#grid-left-content {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin-left: 50%;
}

#grid-right {
    grid-column: 2;
    height: 100%;
    position: relative;
}

#grid-right-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

@keyframes popIn {
    0% {
        transform: scale(0) rotate(-360deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

#name-header {
    animation: 0.75s cubic-bezier(.47,1.64,.41,.8) 0s 1 popIn;
    text-align: center;
    margin: 0 auto;
    display: block;
    z-index: 1;
    transform-origin: center;
    transition: all 0.5s cubic-bezier(.47,1.64,.41,.8);
}

#name-header:hover {
    transform: rotate(-45deg) scale(1.25);
}
}/* END MEDIA QUERY*/

/* CONTENT LEFT -----------------------------*/

#name-header {
    font-size: 400%;
    margin: 0 auto;
}

/* CONTENT RIGHT -----------------------------*/
#programming-list {
    padding-left: 3rem;
}

#icons {
    font-size: 150%;
    padding-left: 3rem;
}

#icon-twitter:hover {
    color: #1DA1F2;
}

#icon-github:hover {
    color: #a1a1a1;
}