@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');
/*
font-family: 'Lato', sans-serif;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
*/

/* Main stuff */
.cursor{
    position: fixed;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(245, 245, 245, 0.8);
    border-radius: 100%;
    background:rgba(245, 245, 245, 0.1);
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 999;

    transition: transform 0.2s;
}
html,
*{
cursor: none;
}
html {
    scroll-behavior:smooth;
}
body {
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 29, 39, 1);
    color: whitesmoke;
}
nav{
    position:fixed;
    z-index:1;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}
footer {
    margin-top:auto;
    padding-top:5%;
    padding-bottom:1%;
}
.header {
    padding: 7% 20% 3%;
}
.main {
    padding:5% 20%;
}
.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-center {
    align-items: center;
    align-content: center;
    justify-content: center;
}
.flex-start {
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
}
.flex-end {
    align-items: flex-end;
    align-content: flex-end;
    justify-content: flex-end;
}
.flex-between {
    justify-content: space-between;
}
.flex-around {
    justify-content: space-around;
}
.flex-evenly {
    justify-content: space-evenly;
}
.flex-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
}
.cross-center {
    align-items: center;
    align-content: center;
}
.main-center {
    justify-content: center;
}
.text-center {
    text-align: center;
}
.text-main {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size:100px;
    margin:0;
    letter-spacing:-5px;
    line-height:90px;
}
.text-xlarge {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 50px;
    margin: 0;
}
.text-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 40px;
    margin: 0;
}
.text-large {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 30px;
    margin: 0;
}
.text-medium {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    margin: 0;
}
.text-small {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    margin: 0;
}
.text-light {
    color: rgba(245, 245, 245, 0.7);
}
.text-bold {
    font-weight:bold;
}
.section-header {
    margin-bottom: 30px;
}
.spacer {
    margin: 0.5vw;
}
.spacer-large {
    margin: 1.5vw;
}
p a {
    overflow:hidden;
    transition: all 0.5s ease;
}
p a:link {
    color:whitesmoke;
}
p a:visited {
    color:whitesmoke;
}
p a:hover {
    color:rgb(0, 191, 255);
    text-decoration:underline;
}
.hidden {
    display:none;
}

/* Navbar */
a.nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight:600;
    padding:10px;
    color:whitesmoke;
    text-decoration:none;
    transition: all 0.5s ease;
}
a.nav-link:link {
    color:whitesmoke;
    text-decoration:none;
}
a.nav-link:hover {
    color:rgba(0, 191, 255, 1);
    text-decoration:underline;
}
.flex-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
}
.flex-navlinks {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 50%;
}
svg.nav-logo {
    width:50px;
    height:50px;
    margin:5px 10px;
}
.nav-current {
    color:rgba(0, 191, 255, 1);
}

/* Footer */
.footer-text {
    color:rgb(180, 180, 180);
}
.footer-div {
    margin-top: 1vw;
}
.footer-link {
    margin: 0;
    text-decoration:none;
    transition: all 0.5s ease;
    color:rgb(180, 180, 180);
}
.footer-link:visited {
    color:rgb(180, 180, 180);
}
.footer-link:hover {
    color:rgb(0, 191, 255);
}
.footer-icon {
    width:25px;
    height:25px;
    margin: 5px 15px;
    color:rgb(180, 180, 180);
    transition: all 0.5s ease;
}
.footer-icon:hover {
    color:rgb(0, 191, 255);
}

/* Home */
svg.main-logo {
    width:300px;
    height:300px;
}
.colour-dev {
    transition: all 0.5s ease;
}
.colour-dev:hover {
    color: rgba(0, 89, 255, 1);
}
.colour-des {
    transition: all 0.5s ease;
}
.colour-des:hover {
    color: rgb(0, 219, 99);
}
.colour-g {
    transition: all 0.5s ease;
}
.colour-g:hover {
    color: rgba(0, 186, 219,1);
}
div.home-about-text {
    width:45%;
    margin-right:10%;
    text-align: justify;
    text-justify: inter-word;
}
div.home-about-img {
    width:45%;
}
img.home-about {
    transition: all 0.5s ease;
    width:90%;
    filter:grayscale(80%);
}
img.home-about:hover {
    filter:grayscale(0%);
}
/* .home-portfolio-item {
    width:270px;
    background-color:rgba(0, 15, 20, 1);
    border-radius: 10px 10px 10px 10px;
}
.home-portfolio-image{
    width:270px;
    height:300px;
    background-color:rgba(0, 191, 255, 0.25);
    border-radius: 10px 10px 0px 0px;
}
.home-portfolio-info {
    padding:5px 10px;
}
article.home-portfolio-item a {
    color:whitesmoke;
    text-decoration:none;
    transition: all 0.5s ease;
}
article.home-portfolio-item a:hover {
    color:rgb(0, 191, 255);
} */
.home-contact-icon {
    width:60px;
    height:60px;
    color:whitesmoke;
    transition: all 0.5s ease;
}
.home-contact-icon:hover {
    color:rgb(0, 191, 255);
}
.triangle {
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background: whitesmoke;
    clip-path: polygon(0% 0%, 50% 50%, 100% 0%);
    transition: all 0.5s ease;
}
.triangle:hover {
    transform: translateY(20%);
    background: rgb(0, 191, 255);
}
.triangle-up {
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background: whitesmoke;
    clip-path: polygon(0% 100%, 50% 50%, 100% 100%);
    transition: all 0.5s ease;
}
.triangle-up:hover {
    transform: translateY(-20%);
    background: rgb(0, 191, 255);
}

/* About */
.about-section {
    height:20%;
}
.about-img {
    width: 45%;
    margin-right:10%;
}
img.about-img {
    width: 100%;
}
.about-text {
    width: 45%;
}
.skills-bar {
    width:100%;
    height:2vw;
    border-radius:50px;
    background:rgba(20, 20, 20, 1);
}
.skills-bar-dev {
    width:67%;
    height:2vw;
    border-radius:50px 0px 0px 50px;
    background-color:rgba(0, 89, 255, 1);
    transition: all 0.5s ease;
}
.skills-bar-des {
    width:33%;
    height:2vw;
    border-radius:0px 50px 50px 0px;
    background-color: rgba(0, 219, 99, 1);
    transition: all 0.5s ease;
}
.skills-bar-dev:hover {
    filter:drop-shadow(0px 0px 5px rgba(0, 89, 255, 1));
}
.skills-bar-des:hover {
    filter:drop-shadow(0px 0px 5px rgba(0, 219, 99, 1));
}
.skills-text-dev {
    text-align:start;
}
.skills-text-des {
    text-align:end;
}
.about-img-block-small {
    width: 33%;
}

/* Contact */
.contact-email {
    width:100%;
    background:rgba(20, 20, 20, 0.7);
}
.email-form {
    margin:2vw 3vw;
}
.input-half {
    width:50%;
    margin-bottom:1vw;
}
.input-full {
    width:100%;
    margin-bottom:1vw;
}
.input-small {
    width:20%;
}
.submit-button {
    background:transparent;
    border: 2px solid whitesmoke;
    color:whitesmoke;
    transition:all 0.5s ease;
}
.submit-button:hover {
    background:rgba(0, 0, 0, 0.9);
    border: 2px solid rgba(0, 191, 255, 1);
    color: rgba(0, 191, 255, 1);
}
.submit-button:active {
    background:rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 168, 224, 1);
    color: rgba(34, 200, 255, 1);
}

/* Portfolio */
.portfolio-filter {
    padding:0.5vw 1.5vw;
    border-radius:25px;
    background:rgba(0, 0, 0, 0.3);
    transition:all 0.5s ease;
    margin-right:3vw;
}
.portfolio-filter:hover {
    background:rgba(0, 0, 0, 0.7);
}
.portfolio-filter:active {
    background:rgba(0, 0, 0, 0.3);
}
.selected {
    background:rgba(255, 255, 255, 0.1);
    color:rgb(0, 191, 255);
}
.filter-content {
    width: 100%;
}
.portfolio-content {
    width: 30%;
    background:rgba(0, 0, 0, 0.3);
    margin-top:1vw;
    margin-bottom:1vw;
    border-radius:10px;
}
.portfolio-content a {
    color:whitesmoke;
    text-decoration:none;
    transition: all 0.5s ease;
}
.portfolio-content a:hover {
    color:rgb(0, 191, 255);
}
.portfolio-content-image {
    width: 90%;
    border-radius: 10px 10px 0px 0px;
    padding: 5%;
}
.portfolio-text {
    padding: 0 3% 3% 3%;
}
#portfolio-info-main-image {
    width: 100%;
}
.portfolio-info-image {
    width: 100%;
}
.portfolio-info-block {
    width: 48%;
}
.portfolio-info-block-main {
    width: 66%;
}
.portfolio-info-block-logo {
    width: 30%;
}
.portfolio-info-block-small {
    width: 24%;
}
.portfolio-info-block-large {
    width: 72%;
}
/* Responsive */
@media only screen and (max-width: 1200px) {
    .header {
        padding: 10vw 10vw;
    }
    .main {
        padding:5vw 5vw;
    }
    .text-main {
        font-size:12vw;
        margin:1vw 0;
        letter-spacing:-0.5vw;
        line-height:10vw;
    }
    .text-xlarge {
        font-size:6vw;
        margin:1vw 0;
    }
    .text-header {
        font-size:5vw;
        margin: 0;
    }
    .text-large {
        font-size:4vw;
        margin:1vw 0;
    }
    .text-medium {
        font-size:3vw;
        margin:0;
    }
    .text-small {
        font-size:2vw;
        margin:0;
    }
    .section-header {
        margin-bottom: 5vw;
    }
    .nav-link {
        font-size:3vw;
        padding:3vw;
        color:whitesmoke;
        text-decoration:none;
        transition: all 0.5s ease;
    }
    .flex-navlinks {
        width: 80%;
    }
    svg.nav-logo {
        width:8vw;
        height:8vw;
        margin:1vw 2vw;
    }
    svg.main-logo {
        width:30vw;
        height:30vw;
    }
    .responsive {
        flex-direction:column;
        justify-content: space-around;
        align-content: center;
        align-items: center;
        text-align: center;
    }
    .responsive-hide {
        display:none;
    }
    .triangle {
        margin-top: 5vw;
        width: 8vw;
        height: 8vw;
        background: whitesmoke;
        clip-path: polygon(0% 0%, 50% 50%, 100% 0%);
        transition: all 0.5s ease;
    }
    .triangle-up {
        margin-top: 5vw;
        width: 8vw;
        height: 8vw;
        background: whitesmoke;
        clip-path: polygon(0% 100%, 50% 50%, 100% 100%);
        transition: all 0.5s ease;
    }
    div.home-about-text {
        width:90%;
        margin-right: 0%;
    }
    div.home-about-img {
        width:50%;
        margin-top: 5vw;
    }
    /* .home-portfolio-item {
        width:60%;
        background-color:rgba(0, 15, 20, 1);
        border-radius: 10px 10px 10px 10px;
        margin: 10px 0;
    }
    .home-portfolio-image{
        width:100%;
        height:60vw;
    }
    .home-portfolio-info {
        padding:1vw 2vw;
    } */
    .home-contact-icon {
        width:10vw;
        height:10vw;
        color:whitesmoke;
        transition: all 0.5s ease;
        margin: 3vw 5vw;
    }
    .spacer {
        margin: 2vw;
    }
    .spacer-large {
        margin: 3vw;
    }
    .footer-icon {
        width:5vw;
        height:5vw;
        margin: 1vw 3vw;
        color:rgb(180, 180, 180);
        transition: all 0.5s ease;
    }
    .about-img {
        width: 40%;
        margin-right:0%;
        margin-bottom:3%;
    }
    .about-text {
        width: 90%;
    }
    .skills-bar {
        height:3vw;
    }
    .skills-bar-dev {
        height:3vw;
    }
    .skills-bar-des {
        height:3vw;
    }
    .contact-email {
        width:100%;
    }
    .email-form {
        margin:2vw 4vw;
    }
    .input-half {
        margin-bottom:2vw;
    }
    .input-full {
        margin-bottom:2vw;
    }
    .portfolio-content {
        width: 45%;
    }
    .cursor {
        display:none;
    }
    .portfolio-info-block {
        width: 100%;
        text-align: center;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }
    .portfolio-info-block-main {
        width: 100%;
        text-align: center;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }
    .portfolio-info-block-logo {
        width: 100%;
        text-align: center;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }
    .portfolio-info-block-small {
        width: 100%;
        text-align: center;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }
    .portfolio-info-block-large {
        width: 100%;
        text-align: center;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }
}