/* VARIABLES */
:root {
    --main-background: #EDF2F4;
    --light-grey: #8D99AE;
    --dark-grey: #2B2D42;
    --light-red: #EF233C;
    --dark-red: #D90429;
}





/* SMOOTH SCROLLING - wip */
html {
    scroll-behavior: smooth;
}





/* CURSOR SELECTION */
::selection {
    background: var(--light-red); /* WebKit/Blink Browsers */
    color: var(--main-background);
}

::-moz-selection {
    background: var(--light-red); /* Gecko Browsers */
    color: var(--main-background);
}




/* ELEMENTS */
p, a {
    font-family: 'Lato', sans-serif;
    color: black;
}

p {
    margin-bottom: 0;
}

a {
    color: inherit;
    transition: 200ms;
    text-decoration: none;
}

h1 {
    font-family: 'Source Serif Pro', serif;
    color: var(--dark-red);
}

h2 {
    font-family: 'Source Serif Pro', serif;
}

a:hover {
    color: var(--dark-red);
}

.small-text {
    font-size: 18px;
}

.bold-text {
    font-weight: 700;
}

.align-right {
    text-align: right;
}

img {
    object-fit: cover;
    border-radius: 8px;
    filter: drop-shadow(5px 5px 12px #cad4bd);
}

.link {
    text-decoration: underline;
    color: var(--light-red);
}





/* BACKGROUND */
body {
    background-color: var(--main-background);
}





/* NAVBAR */
.bg-transparent {
    background-color: var(--main-background) !important;
}

.nav-logo {
    height: 7rem;
}

.navbar-nav {
    text-align: center;
    padding-top: 2rem;
}

.navbar-icon {
    border: none;
    color: black !important;
    background-color: transparent;
    font-size: 2rem;
    border-radius: 0.1rem;
}

.nav-link {
    color: black !important;
}

.nav-link.active {
    color: var(--main-background) !important;
    background-color: var(--dark-red) !important;
}









/* home */
#home {
    padding-top: 20rem;
    height: 100vh;
}

.triangle{
    width: 0; 
    height: 0; 
    border-top: 20vw solid transparent;
    border-bottom: 20vw solid transparent;
    border-left: 30vw solid var(--light-red);

    z-index: -1;
    position: absolute;
    left: 30px;
    top: 250px;
    filter: drop-shadow(5px 5px 12px #cad4bd);
}

.home-nametitle {
    filter: drop-shadow(5px 5px 12px #bdbdd4);
    /* text-align: left;  */
    position: relative;
    right: 70px;
    width: 70%;
}

.slogan, .job-name {
    position: relative;
    top: -35px;
    right: -65px;
    font-weight: bold;

}

.slogan {
    font-size: 1.3rem;
}

.job-name {
    /* text-align: end; */
    color: black;
    font-weight: normal;
    top: -30px;;
    font-size: 3rem;
}

.home-name {
    color: black;
    font-size: 6rem;
}

.home-socials .row .col a {
    color: var(--dark-red);
}

.home-socials .row .col a:hover {
    color: #700013;
}

.home-btn, .home-socials {
    width: 300px;
    justify-content: end;
    float: right;
}


/* home: learn btn */
.learn-btn {
    border: 2px solid var(--dark-red);
    border-radius: 4px;
    color: var(--dark-red);
    transition: 200ms;
    padding: 15px;
}

.learn-btn a {
    text-decoration: none !important;
    transition: 0;
}

.learn-btn a:hover {
    color: var(--main-background);
}

.learn-btn:hover {
    background-color: var(--dark-red);
    color: var(--main-background);
}





/* footer */
.footer {
    height: 200px;
    margin-top: 500px;
    font-size: 12px;
}

.footer div {
    padding: 20px;
    text-align: right;
}

.footer-socials a {
    margin: 0 10px 0 10px;
}










/* about */
#about {
    padding-top: 15rem;
    text-align: center;
}

.slogan-sect {
    background-color: var(--dark-red);
}

.slogan-sect h1, .slogan-sect p {
    color: var(--main-background);
}

.slogan-sect p {
    margin-bottom: 90px;
    text-align: center;
}

.triangle2{
    width: 0; 
    height: 0; 
    border-top: 150px solid transparent;
    border-bottom: 150px solid transparent;
    border-left: 200px solid var(--light-red);

    /* z-index: -1; */
    /* position: absolute; */
    /* left: 400px; */
    /* top: 800px; */
    float: right;
    /* filter: drop-shadow(5px 5px 12px #cad4bd); */
    transform:rotate(180deg);
    transform-origin: 50% 40%;
}

.about-desc p {
    text-align: justify;
}










/* projects */
#proj {
    padding-top: 15rem;
    text-align: center;
}

div .proj-content {
    border: 2px solid black;
    border-radius: 8px;
    padding: 25px 80px 25px 80px;
    background-color: var(--main-background);
    filter: drop-shadow(8px 8px 0px black);
    margin-top: 100px;
    transition: 200ms;
}

.proj-img {
    height: 200px;
    border: 2px solid black;
    border-radius: 8px;
}

.proj-btn {
    background-color: transparent;
    border: 2px solid var(--dark-red);
    border-radius: 4px;
    color: var(--dark-red);
    transition: 200ms;
    padding: 5px;
    filter: none;
    width: 150px;
}

.proj-btn a {
    text-decoration: none !important;
}

.proj-btn a:hover {
    color: var(--main-background);
}

.proj-btn:hover {
    background-color: var(--dark-red);
    color: var(--main-background);
}

/* project 1: litg */
#proj-litg {
    padding-top: 15rem;
    text-align: center;
}

.carousel-control-prev {
    left: -90px;
}

.carousel-control-next {
    right: -90px;
}

.litg-fixsize {
    height: 40vw;
}


/* project 2: cup */
#proj-cup, #proj-sketchup, #proj-bankacc {
    padding-top: 15rem;
    text-align: center;
}

.cup-content {
    margin-top: 100px;
}

.cup-btn {
    background-color: transparent;
    border: 2px solid var(--dark-red);
    border-radius: 4px;
    color: var(--dark-red);
    transition: 200ms;
    padding: 5px;
    filter: none;
    width: 150px;
}

.cup-btn a {
    text-decoration: none !important;
}

.cup-btn a:hover {
    color: var(--main-background);
}

.cup-btn:hover {
    background-color: var(--dark-red);
    color: var(--main-background);
}

/* project 3: house */

.sketchup-content {
    margin-top: 100px;
}

.sketchup-btn {
    background-color: transparent;
    border: 2px solid var(--dark-red);
    border-radius: 4px;
    color: var(--dark-red);
    transition: 200ms;
    padding: 5px;
    filter: none;
    width: 150px;
    height: 100px;
}

.sketchup-btn a {
    text-decoration: none !important;
}

.sketchup-btn a:hover {
    color: var(--main-background);
}

.sketchup-btn:hover {
    background-color: var(--dark-red);
    color: var(--main-background);
}

.sketchup-img {
    transform: rotate(-90deg);
}

/* project 7: neuinvest */

.neuinvest-hero {
    height: 30rem;
}










/* education */
#edu, #ach {
    padding-top: 15rem;
    text-align: center;
}

.edu-rp, .edu-jwss {
    border: 2px solid black;
    border-radius: 4px;
    padding: 25px;
    background-color: var(--main-background);
    filter: drop-shadow(8px 8px 0px black);
}










/* experience */
#exp {
    padding-top: 15rem;
    text-align: center;   
}

.remove-paddingtop {
    padding-top: 0 !important;
}