@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
:root {
    --bg-color-1: rgb(43, 1, 1); 
    --bg-color-1-lower: rgba(20, 20, 20, 0.87);
    --bg-color-2: rgb(42, 136, 42); 
    --bg-color-2-lower: rgba(42, 136, 42, 0.829); 
    --bg-color-3: black;
    --txt-color-1: white;
    --txt-color-2: black; 
    --txt-color-3: rgb(199, 194, 194); 
    --color-1: green;
    --color-2: lightblue; 
    --color-3: rgb(190, 143, 13); 
    --color-4: pink; 
    --color-5: rgb(180, 11, 180); 
}

a {
    color: var(--color-4);
}
a:visited {
    color: var(--color-5)
}

.border {
    border: solid;
    border-color: white; 
}

/*---------------START OF NAVBAR----------------------------*/
#navbar {
    overflow: hidden; /*prevents scroll bars from appearing even when necessary*/
    background-color: var(--bg-color-3); 
    border-top: solid;
    border-color: var(--color-4);
    z-index: 100;
}

#navbar a {
    float: left; 
    display: block; 
    color: var(--color-4);
    text-align: center;
    padding: 14px;
    text-decoration: none; /* gets rid of the underline in the links*/
}
#navbar a:hover {
    color: var(--color-5);
}

/* use JS to add this class onto the navbar when it reaches scroll position*/
.sticky {
    position: fixed;
    top: 0;
    width: 100%; 
}

.sticky + .content {
    padding-top: 60px; 
}

/*-----------------END OF NAVBAR-------------------------*/

.hero {
    color: var(--txt-color-3);
    background: linear-gradient(to bottom right, rgb(206, 2, 2), var(--color-3));
    
    width: 100%;
    overflow: hidden; 
}

.display-clock {
    padding: 15px; 
}

body {
    color: var(--txt-color-1);
    background: var(--bg-color-1);
    font-family: 'Space Mono', monospace;
    margin-left: 0; 
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    overflow-x: hidden;
    width: 100%;
}

main {
    padding: 5%;
    margin: 5%; 
    padding-top: 2rem;
    margin-top: 2rem; 
}

article { 
    padding-top: 2rem;
    margin-top: 2rem; 
}

footer {
    padding: 16px; 
    background-color: var(--bg-color-1-lower);
    width: 100%;
    height: auto; 
}

.single-block {
    font-size: 2rem; 
    width: 100%-10px; 
    padding:10px;
}

.wrapper {
    display: flex; 
    flex-direction: row;
}

.card-container {
    width: 50%;
    padding-top: 0;
    margin-top: 0; 
}

.top-card {
    font-size: 1.5rem;
    width: 100%-10px;
    padding-top: 0;
}

.txt-card {
    font-size: 1rem;
    width: 100%-10px;
    /* padding: 10px; */
    margin-top: 2rem; 
    margin-left: 2rem;
    margin-right: 2rem'
}

.title-block {
    font-size: 2rem;
    width: 35%;
    padding: 10px;
}
.txt-block {
    font-size: 1rem; 
    width: 65%;
    padding: 10px;
}


/*-------------------fa icons-----------------------------------------*/
.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%; 
    color: white;   
}

/* Adds a hover effect */
.fa:hover {
    opacity: 0.7;
}

/* stylizing the icons */
.fa-envelope {
    background: #dd4b39;
}
.fa-linkedin {
    background: #007bb5;
}


.fa-github {
    background: black;
}

.fa-twitter {
    background: rgb(50, 136, 235); 
}
  

/* ------------------FADE IN ANIMATION---------------------------*/

.fade-in {
    animation: fadeInAnimation ease 5s; 
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

}

@keyframes fadeInAnimation {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1; 
    }
}

/*--------------CAN BE APPLIED TO MULTPLE THINGS-------------------------*/
.center {
    text-align: center;
}

.shadow {
    text-shadow: 2px 2px var(--color-3);
}

/*-----------------RESPONSIVENESS-------------------------------------*/
@media only screen and (max-width: 1100px) {
    article { 
        padding: 0;
        margin: 0; 
    }
    .wrapper {
        flex-direction: column;
    }
    .title-block {
        width: 100%;
    }
    .txt-block {
        width: 100%;
        margin-top: 0;
    }

    .card-container {
        width: 100%;
    }
    .top-card {
        width: 100%-10px;
    }
    .txt-card {
        width: 100%-10px;    
    }
    .single-block {
        width: 100%; 
    }

}