@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght@400;600;700&family=Ultra&display=swap");

/*Default*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

.bold {
    font-weight: bold;
}

html {
    scroll-behavior: smooth;
}

p {
    font-size: 1.25rem;
}

section {
    padding-top: 65px;
}

.tools-logo > img {
    width: 80px;
}

#home {
    /*height: calc(100vh + 63px);*/
    padding: 0;
    min-height: 700px;
}

a {
    text-decoration: none;
}

.dark-bg {
    background-color: #011b28;
}

.yllw-text {
    color: #ffb703;
}

.wht-text {
    color: #fefcfd;
}

/*Navbar*/
.navbar-brand > img {
    width: 60px;
}

a.nav-link {
    font-size: 1.25rem;
    text-align: right;
    color: #ffb703 !important;
}

a.nav-link:hover {
    color: #ffd160 !important;
}

/*Hero Banner*/
p.greeting {
    font-weight: 600;
    font-size: 1.5rem;
}

h1.name {
    font-family: "Ultra", serif;
    font-size: 3.25rem;
}

.job {
    font-weight: 700;
    font-size: 2.5rem;
}

/*home-tags*/
span.home-tag {
    font-weight: 700;
    display: none;
}

div.id-picture {
    border: 7.5px solid #ffb703;
    padding: 5px;
    border-radius: 50%;
}

img.id-picture {
    border-radius: 50%;
}

/*About Me*/
div.image-container {
    display: none;
}

h2.h1 {
    font-family: "Archivo Black", sans-serif;
    font-size: 3rem;
}

h3.h2 {
    font-weight: 700;
    font-size: 2.5rem;
}

/*Education*/
div.column-1 {
    display: none;
}

.col-1 > .line {
    height: 100%;
    width: 7.5px;
    background-color: #ffb703;
}

.col-lg-4 {
    padding: 20px;
}

.school-container {
    border: 3px solid #ffb703;
    padding: 15px;
}

h4.h3 {
    font-weight: bold;
}

/*Skills*/
#skills {
    min-height: 350px;
}

/*Project*/
#project .col-lg-2 {
    min-width: 350px !important;
}

h5.card-title > a {
    font-weight: 700;
    color: #011b28;
    text-decoration: none;
}

h5.card-title > span.tags {
    font-weight: 700;
    color: #011b28;
    visibility: hidden;
}

div.card:hover span.tags {
    visibility: visible;
}

/*Form*/
.btn {
    font-weight: bold;
    color: #011b28;
    background-color: #ffb703;
}

.btn:hover {
    background-color: #e5ab19;
}

/*Footer*/
footer h5 {
    font-size: 1.25rem;
    font-weight: 600;
}

footer .icon {
    font-size: 1.5rem;
}

footer .bottom div {
    font-size: 0.75rem;
}

/*Responsiveness*/
@media (min-width: 768px) {
    section {
        padding-top: 110px;
    }

    .navbar {
        height: 100px;
    }

    .navbar-brand > img {
        width: 100px;
    }

    ul.navbar-nav {
        display: flex;
        justify-content: space-evenly;
    }

    /*Hero Banner*/
    #home {
        height: 100vh;
        /*max-height: 800px;*/
        min-height: 700px;
    }
}

@media (min-width: 992px) {
    ul.navbar-nav {
        justify-content: flex-end;
        padding-right: 50px;
    }

    div.id-picture {
        min-width: 350px;
        width: 50%;
    }

    /*Home tags*/
    span.home-tag {
        display: inline;
        visibility: hidden;
    }

    h2.job:hover span.home-tag {
        visibility: visible;
    }

    /*About Me*/
    div.image-container {
        display: block;
    }

    /*School*/
    #zuitt > div.column-1,
    #slsu > div.column-1,
    #bpahs > div.column-1 {
        display: block;
    }

    #slsu > div.column-2 > .school-container {
        display: none;
    }
}