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

body {
    margin: 0;
    /* Allows divs to extend full height of screen */
    background-repeat: no-repeat;
    /* Prevents background gradient from repeating due to extneded height */
    background-attachment: fixed;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-color: #191970 !important;
}

h2{
    font-family: "Montserrat";
    font-weight: bold;
    font-size: 2em;
}

h3{
    font-family: "Montserrat";
    font-weight: normal;
    font-size: 2em;
}

.sourcesanspro-text{
    font-family: "Source Sans Pro";
    color: #efefef !important;
    font-size: 1rem; 
}

.montserrat-text{
    font-family: "Montserrat";
    color: #efefef !important;
    font-size: 1rem; 
}

/* Animated circuit icons CSS */
.symbols {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.symbols li {
	position: absolute;
	display: block;
	list-style: none;
	width: 20px;
	height: 20px;
	animation: animate 25s linear infinite;
	bottom: calc(-40px - 1vh);
}

.symbols li:nth-child(1) {
	left: 25%;
	width: 30px;
	height: 30px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
}

.symbols li:nth-child(2) {
	left: 10%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 50%;
}

.symbols li:nth-child(3) {
	left: 70%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
}

.symbols li:nth-child(4) {
	left: 40%;
	width: 35px;
	height: 35px;
	animation-delay: 0s;
	animation-duration: 15s;
	border-radius: 50%;
}

.symbols li:nth-child(5) {
	left: 65%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
}

.symbols li:nth-child(6) {
	left: 75%;
	width: 40px;
	height: 40px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 50%;
}

.symbols li:nth-child(7) {
	left: 35%;
	width: 30px;
	height: 30px;
	animation-delay: 0s;
	animation-duration: 30s;
	border-radius: 50%;
}

.symbols li:nth-child(8) {
	left: 50%;
	width: 25px;
	height: 25px;
	animation-delay: 0s;
	animation-duration: 35s;
	border-radius: 50%;
}

.symbols li:nth-child(9) {
	left: 20%;
	width: 25px;
	height: 25px;
	animation-delay: 0s;
	animation-duration: 40s;
	border-radius: 50%;
}

.symbols li:nth-child(10) {
	left: 85%;
	width: 50px;
	height: 50px;
	animation-delay: 0s;
	animation-duration: 45s;
	border-radius: 50%;
}

@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 0;
	}
	50% {
		transform: translateY(-50vh) rotate(360deg);
		opacity: 0.5;
	}
	100% {
		transform: translateY(-100vh) rotate(720deg);
		opacity: 0;
	}
}


/* ========== Section Padding ========== */
/* Padding allows you to directly focus on the section when you click on the navbar links*/
#intro {
    padding: 60px 0;
    /* Ensure that the intro section fills up the entire viewport so other sections do not leak into the viewport */
    min-height: 100vh;
    display: flex;
    align-items: center;
}

#about {
    padding: 60px 0;
}

#projects {
    padding: 60px 0;
    background-color: #3C6E71;
}

#experience {
    padding: 60px 0;
}

#education {
    padding: 60px 0;
    background-color: #3C6E71;
}

#skills {
    padding: 60px 0;
}

#projects-divider {
    background-color: #3C6E71;
}

/* ========== Nav bar ========== */
.nav-link {
    font-family: "Montserrat";
    color: #efefef!important;
    font-size: 125%;
    position: relative;
}

/* Animating Link Underlines */
.nav-link::before {
    /* Create a line underneath with a transformation of zero so no line is visible */
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #efefef;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-link:hover::before {
    /*Transform the line so it becomes visible*/
    color: #efefef !important;
    transform: scaleX(1);
}

.navbar-nav li {
    padding: 0rem 1rem;
}

/* ========== Intro Section ========== */
.name {
    font-family: "Montserrat";
    color: #efefef !important;
    font-size: 4em;
    font-weight: 800;
    transition: ease-in-out 0.2s;
    filter: drop-shadow(2px 2px 1px #978249);
}

/* This intro text has the typewriter animation*/
.typewriter-title {
    font-family: "Source Sans Pro";
    color: #efefef !important;
    font-size: 1.5em;
    display: inline;
}

/* Cursor */
.typed-cursor {
    height:100%; 
    color: #d9c084 !important; 
    font-size: 150%;
}

.intro-image {   
    width: 30vw; 
    border-radius: 50%;
    background-color: #45F0DF;
}

/*===== Background design wires =====*/
/* ======================================== Media queries for different size screens ========================================*/
/* X-Small devices (portrait phones, less than 576px) */
@media (min-width: 575.98px) {
 
    .btn-projects {
        font-family: "Montserrat";
        background-color: #1434A4;
        color: #efefef !important;
        font-size: 1.5rem !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 5px;
    }

    .btn-icon {
        font-size: 3rem !important;
    }

    .flip-card:hover .flip-card-inner {
        transform: rotateY(0deg)!important;
    }

    .flip-card-front, .flip-card-back {
        grid-area: 1/1!important;
        min-height: 22rem;
        box-shadow: inset 200px 0 20em 3em #212122!important;
    }

    .flip-card-back{
        display: initial!important;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (min-width: 767.98px) {
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg)!important;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 991.98px) {
}

/* Large devices (desktops, less than 1200px) */
@media (min-width: 1199.98px) {

}

/* X-Large devices (large desktops, less than 1400px) */
@media (min-width: 1399.98px) {

}

/* XX-Large devices (larger desktops) */
@media (min-width: 2559.98px) {
}


.chevron-down {
    /*-- name animation --*/
    animation-name: floating;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Animate bouncing chevron */
@keyframes floating {
    0% {
        transform: translate(0, 0px);
    }

    50% {
        transform: translate(0, 1vw);
    }

    100% {
        transform: translate(0, 0);
    }
}

/*===== Linkedin & Github header buttons =====*/
.social-buttons {
    margin-top: 1rem;
    padding: 1rem;
    border: none !important;
    background-color: transparent !important;
    border-radius: 10%;
    transition: 0.2s ease-in-out
}

/*Animate the buttons on hover*/
.social-buttons:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
    transform: scale(0.90);
}


/* ========== About section ========== */
.section-title {
    font-family: "Montserrat";
    color: #efefef;
    font-size: 3rem;
    font-weight: bold;   
}

.section-subtitle {
    font-family: "Montserrat";
    color: #efefef;
    font-size: 2.5rem;
    font-weight: bold;   
}

.about-text {
    font-family: "Source Sans Pro";
    color: #efefef !important;
    font-size: 1.25rem;
    line-height: normal;
    margin-top: 1rem;
}

.parent-about-image{
    position: relative;
}

.svg-background {
    position: relative;
    height: auto !important;
    transition: ease-in-out;
    transition-duration: 0.5s;
    margin-top: auto;
    filter: invert(47%) sepia(0%) saturate(1%) hue-rotate(79deg) brightness(91%) contrast(96%) drop-shadow(3px 3px);
}

.svg-background:hover{
    filter: invert(56%) sepia(9%) saturate(1845%) hue-rotate(6deg) brightness(89%) contrast(88%) drop-shadow(3px 3px);
}

.about-image {
    width: 70%;
    border-radius: 50%;
    /*Center the image*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}
  
/* ----- Buttons ----- */
.intrest-image {
    /*Ensure the button images span the entire width of the button*/
    width: 100%;
}

/* ========== Project section ========== */
.line-break {
    width: 40px;
    height: 5px;
    margin: 0 0;
}

/* Radiobutton sections */
input[name="btnradioprojects"]:checked+label {
    background-color: #5D3FD3;
}

.btn-projects {
    font-family: "Montserrat";
    background-color: #1434A4;
    color: #efefef !important;
    font-size: 4vw;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 5px;
}    

.btn-projects:hover {
    background-color: #5D3FD3;
}

/* ---------- Large Cards ---------- */
.projects-large-cards {
    align-items: center;
    border-radius: 5px;
    overflow: auto;
    background-color: #212121;
    height: 100%;
    transition: 0.2s ease-in-out;
    border: none;
}

/* Show the card */
.card-container.active {
    display: block;
}

/* Hide the card */
.card-container.hide {
    display: none;
}

.projects-large-cards:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
    /*filter: drop-shadow(5px 5px 3px #000000);*/
    transform: translateY(-5px);

}

.card-body {
    text-align: start;
    width: 100%;
    padding: 2rem;
    /* Aligns footer text to the bottom */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card-body h2 {
    color: #efefef !important;
}

.card-text {
    font-family: "Montserrat";
    color: #efefef !important;
}

.card-img-projects {
    position: relative;
    width: 100%;
    height: 100%;
    filter: brightness(75%);
    transition: 0.5s ease-in-out;
    object-fit: cover;
}

.projects-large-cards:hover .card-img-projects {
    filter: brightness(100%);
    transition: 0.5s ease-in-out;

}

/* ---------- Smaller Cards ----------*/
.projects-small-cards {
    background-color: #efefef;
    align-items: center;
    border-radius: 5px;
    overflow: auto;
    height: 100%;
    transition: 0.2s ease-in-out;
    border: none;
}

.projects-small-cards:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
    /*filter: drop-shadow(5px 5px 3px #383838);*/
    transform: translateY(-5px);
}
.small-cards-img {
    width: 8rem;
    padding-top: 2rem;
}
#landscape-img{
    width: 20rem!important;
}

/* -- Badges --*/
.badges-group-large {
    text-align: start;
    padding-left: 2rem;
    padding-right: 2rem;
}

.badges-group-small {
    text-align: center;
    padding-bottom: 2rem;
}

.projects-badge {
    padding: 10px;
    border-radius: 5px;
    background-color: #D00000;
}

.projects-link-badge {
    padding: 10px;
    border-radius: 50%;
    background-color: #D00000;
    transition: 0.3s ease-in-out;
}

.projects-link-badge:hover {
    transform: scale(0.90);
}

.projects-badge-icons {
    width: 2rem;
}

/* =============== Experience =============== */
.timeline-icon {
    /*Ensure the button images span the entire width of the button*/
    width: 100%;
    /* Center the image */
    display: inline-block
}

/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    margin: 0 0;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #D00000;
    top: 0;
    bottom: 0;
    left: 0%;
    margin-left: -3px;
}

/* Timeline circle */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    left: -13px;
    background-color: #3C6E71;
    border: 4px solid white;
    top: 45%;
    border-radius: 50%;
    z-index: 1;
}

/* =========== Flip Cards ========== */
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 80%;
    height: auto;
    border: none;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    margin-left: auto;
    margin-right: auto;
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    display: grid; /* here */
    width: 100%;
    height: fit-content;
    text-align: left;
    transition: transform 1s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(0deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    grid-area: revert;
    min-height: none;
    width: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: inset 100px 0 4em 2em #212122;
    filter: drop-shadow(5px 5px 3px #212122);
    padding: 1% 5% 0;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    display: none;
    background-color: #212121;
    color: white;
    transform: rotateY(180deg);
  }

/* =============== Skills =============== */
.btn-skills {
    background-color: #efefef;
    border-radius: 15%;
    margin: 1rem;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
    transition: 0.2s ease-in-out;
}

.btn-skills:hover {
    filter: drop-shadow(3px 3px 1px #383838);
    transform: scale(0.90);
}

.triggerAnimation {
    animation: slide-in 2s;
    animation-iteration-count: 1;
}

/* Animate tools buttons */
@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translate(5%, 0px)
    }

    100% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

/* ========== Form ========== */
.form-control {
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
    font-family: "Montserrat";
    font-size: 1rem;
}

.btn-contact {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
    border-radius: 5px;
    color: #efefef;
    font-family: 'Montserrat'; 
    font-size: 1rem; 
    background-color: #D00000;
    vertical-align: bottom;
    transition: 0.2s ease-in-out;
}

.btn-contact:hover {
    color: #efefef;
    transform: scale(0.90);
}