/*
ORIGINAL RED
255, 0, 43

DARK RED
150, 26, 45
*/
*{ 
    box-sizing: border-box;
 }

body {
    font-family: 'Lexend Zetta', monospace;
    font-weight: 200;
    color: rgb(255, 0, 43);
    margin: 0;
    padding: 0;
    background-color: black;
}

/*Font Styling*/
.barcode {
    font-family: 'Libre Barcode 39', monospace;
    font-weight: 100;
    margin: 0;
}

.wordmarklogo {
    font-family: 'Stalinist One', monospace;
    padding-left: 1rem;
}

/*MAIN HEADING FOR EACH SECTION*/
h1 {
    font-size: 5vw;
    font-weight: 300;
}

/*USED FOR NAVBAR AND FOOTER AND BARCODES*/
h2 {
    font-size: 2vw;
    font-weight: 300;
}

/*Skill title for each*/
h3 {
    font-size: 2vw;
    font-weight: 500;
}

/*USED FOR NAVBAR AND FOOTER*/
h4 {
    font-size: 2vw;
}

p {
    font-size: 2vw;
}

/*NAVIGATION BAR*/
nav {
    background-image: linear-gradient(to right, black, rgb(255, 0, 43));
    height: 10%;
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

ul {
    display: flex;
    list-style-type: none;
    align-items: center;
}

li {
    padding: 0 1rem;
    font-weight: 500;
}

a {
    text-decoration: none;
    color: white;
    font-size: 1.5vw;
}

/*WELCOME HERO*/
.hero {
    color: white;
    align-items: center;
    justify-content: center;
    margin: 3vw;
    text-align: center;
}

.herobox {
    background-image: linear-gradient(rgb(150, 26, 45),black);
    border-image: linear-gradient(rgb(150, 26, 45),rgb(255,0,43)) 30;
    border-width: 3px;
    border-style: solid;
    width: 100%;
    padding: 15vw 5vw;
}

/*ABOUT ME*/
.about {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10vw;
    margin-bottom: 7vw;
}

/*Groups the left part of the about section together*/
.aboutboxbento1 {
    margin-right: 2vw;
}

.aboutboxsmall {
    background-image: linear-gradient(rgb(150, 26, 45),black);
    border-color: rgb(255,0,43);
    border-width: 3px;
    border-style: solid;
    width: 3vw;
    height: 3vw;
    margin-bottom: 2vw;
}

.aboutboxlong {
    background-image: linear-gradient(rgb(150, 26, 45),black);
    border-image: linear-gradient(rgb(255,0,43),black) 10;
    border-width: 3px;
    border-style: solid;
    width: 3vw;
    height: 50vw;
}

/*Main About box*/
.aboutboxlarge {
    background-image: linear-gradient(rgb(150, 26, 45),black);
    border-image: linear-gradient(rgb(255,0,43),black) 10;
    border-width: 3px;
    border-style: solid;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 76%,
        85% 100%,
        0 100%);
    width: 100%;
    height: 55vw;
    padding: 3rem;
}

/*SKILLS*/
.skills {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.column {
    flex: 25%;
    max-width: 50%;
    height: 100%;
    margin: 1rem;
}

.column div {
    width: 100%;
}

/*Main skills containter*/
.container {
    color: white;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(rgb(150, 26, 45),black);
    border-image: linear-gradient(rgb(150, 26, 45),rgb(255,0,43)) 30;
    border-width: 3px;
    border-style: solid;
    padding: 3rem;
    clip-path: polygon(
        0 0, 100% 0, 100% 76%, 73% 100%, 0 100%);
        zoom: 1;
    margin-bottom: 1rem;
    height: 40vw;
}

/*Main Skills container color*/
#skills {
    background-image: linear-gradient(white,black);
    border-image: linear-gradient(black,white) 30;
    margin: 0 15vw;
    margin-bottom: 5vw;
    text-align: center;
    align-content: center;
}

/*Skills container colours*/
#illustrator {
    background-image: linear-gradient(rgb(255, 162, 1),black);
    border-image: linear-gradient(black,rgb(255,162,1)) 30;
}

#photoshop {
    background-image: linear-gradient(rgb(1, 162, 255),black);
    border-image: linear-gradient(black,rgb(1, 162, 255)) 30;
}

#indesign {
    background-image: linear-gradient(rgb(255, 1, 103),black);
    border-image: linear-gradient(black,rgb(255, 1, 103)) 30;
}

#aftereffects {
    background-image: linear-gradient(rgb(107, 1, 255),black);
    border-image: linear-gradient(black,rgb(107, 1, 255)) 30;
}

#htmlcss {
    background-image: linear-gradient(rgb(0, 255, 251),black);
    border-color: rgb(0, 255, 251);
    border-image: none;
}

#illustration {
    background-image: linear-gradient(rgb(4, 189, 78),black);
    border-color: rgb(4, 189, 78);
    border-image: none;
}

/*PORTFOLIO SECTION*/
.portfoliohero {
    color: white;
    background-image: url('../Images/Portfolio_Hero.jpg');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40%;
    flex-direction: column;
}

/*Portfolio gallery*/
.gallery {
    display: flex;
    flex-direction: row;
    margin: 0.5rem;
}

.grow {
    display: flex;
    flex-wrap: wrap;
}

.gcolumn {
    float: left;
    flex: 25%;
    max-width: 50%;
    padding: 0.5rem;
}

.gcolumn img {
    width: 100%;
}

/*Project container*/
.project {
    position:relative;
    width:auto;
    margin-bottom: 1rem;
}

.image {
    display: block;
    width:100%;
}

/*Project overlay animation*/
.imageoverlay {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6) ;
    color: white;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}

.imageoverlay--blur {
    backdrop-filter: blur(5px);
}

.imageoverlay > * {
    transform:translateY(20px);
    transition: transform 0.25s;
}

.imageoverlay:hover{
    opacity: 1;
}

.imageoverlay:hover > *{
    transform: translateY(0);
}

/*Project details*/
.projecttitle {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

.projectdescription {
    font-size: 1.25em;
    margin: 0.25em 2em 0 2em;
}

/*Contact Section*/
.contactsection {
    display: flex;
    justify-content: center;
    align-content: left;
    margin: 5vw 0;
}

/*Contact box animation*/
.contacttitle {
    padding-bottom: 1rem;
}

.contact {
  --border-width: 3px;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  width: 70vw;
  height: 75vw;
  font-size: 2vw;
  text-transform: uppercase;
  color: white;
  background-image: linear-gradient(rgb(150, 26, 45),black);
  border-radius: var(--border-width);
  flex-direction: column;

  &::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(347, 100%, 50%),
      hsl(0, 0%, 0%),
      hsl(347, 100%, 50%),
      hsl(0, 0%, 0%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    animation: moveGradient 1.75s alternate infinite;
  }
}

@keyframes moveGradient {
    50% {
      background-position: 100% 50%;
    }
}

/*Contact Form*/
form {
    font-size: 2vw;
}

input {
    width: 60vw;
    height: 3vw;
    margin-bottom: 3vw;
}

/*Contact Form assets*/
#fname {
    font-family: 'Lexend Exa', monospace;
    font-weight: 500;
}

#lname {
    font-family: 'Lexend Exa', monospace;
    font-weight: 500;
}

#email {
    font-family: 'Lexend Exa', monospace;
    font-weight: 500;
}

#message {
    font-family: 'Lexend Exa', monospace;
    font-weight: 500;
}

#submitbutton {
    background-color: white;
    color: black;
    font-size: 4vw;
    font-weight: 500;
    padding: 0.5rem 2rem;
    margin-bottom: 3rem;
}

#contactbutton {
    background-color: white;
    color: black;
    font-size: 2vw;
    font-weight: 600;
    padding: 0.25rem 1rem;
}

/*FOOTER*/
footer {
    background-image: linear-gradient(to left, black, rgb(255, 0, 43));
    width: 100%;
    height: 10%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}

.socials {
    width: 100%;
    height: 100%;
}

/*MEDIA QUERIES*/
/*TABLET MEDIA QUERIE*/
@media screen and (max-width: 768px) {
        /*MAIN HEADING FOR EACH SECTION*/
        h1 {
            font-size: 6vw;
            font-weight: 300;
        }
    
        /*USED FOR NAVBAR AND FOOTER AND BARCODES*/
        h2 {
            font-size: 5vw;
            font-weight: 500;
        }
    
        /*Skill title for each*/
        h3 {
            font-size: 2.5vw;
            font-weight: 500;
        }
    
        /*USED FOR NAVBAR AND FOOTER*/
        h4 {
            font-size: 1.5vw;
        }
    
        p {
            font-size: 3vw;
        }
    
        /*NAVBAR*/
        nav {
            height: 5%;
            padding: 0 0.5rem;
        }
        
        li {
            padding: 0.5rem;
            font-weight: 500;
            font-size: 5vw;
        }
    
        /*ABOUT ME SECTION*/
        .about {
            margin: 10vw;
            margin-bottom: 7vw;
        }
    
        .aboutboxlong {
            border-image: linear-gradient(rgb(255,0,43),black) 5;
            height: 70vw;
        }
    
        /*Main About box*/
        .aboutboxlarge {
            background-image: linear-gradient(rgb(150, 26, 45),black);
            border-image: linear-gradient(rgb(255,0,43),black) 10;
            border-width: 3px;
            border-style: solid;
            clip-path: polygon(
                /*top left*/
                0 0,
                /*top right*/
                100% 0,
                /*bottom right top*/
                100% 80%,
                /*bottom right*/
                85% 100%,
                /*bottom left*/
                0 100%);
            width: 100%;
            height: 75vw;
            padding: 3rem;
        }
    
        /*Main skills containter*/
        #skills {
            margin: 10vw 15vw;
            margin-bottom: 5vw;
        }
    
        /*Skills containter*/


        .container {
            clip-path: polygon(
                /*top left*/
                0 0,
                /*top right*/
                100% 0,
                /*bottom right top*/
                100% 76%,
                /*bottom right*/
                75% 100%,
                /*bottom left*/
                0 100%);
            margin-bottom: 1rem;
            padding-top: 2rem;
            height: 45vw;
        }
        
        /*Skills column*/
        .column {
            flex: 40%;
            max-width: 50%;
            margin-bottom: 0;
        }
    
        /*Portfolio gallery*/
        .grow {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 0;
            padding-bottom: 0;
        }
    
        .gcolumn {
            flex: 100%;
            max-width: 100%;
            margin-bottom: 0;
            padding-bottom: 0;
        }
    
        /*Project details*/
        .projecttitle {
            font-size: 2em;
        }
    
        .projectdescription {
            font-size: 1.25em;
        }
    
        /*Contact section*/
        .contact {
            padding: 5rem 3rem;
            width: 75vw;
            height: 95vw;
        }

        .contacttitle {
            font-size: 2.5rem;
            text-align: center;
        }
        
        /*Contact Form*/
        form {
            font-size: 3vw;
        }
    
        input {
            height: 4vw;
            margin-bottom: 3vw;
        }
    
        /*Button styling*/
        #submitbutton {
            font-size: 4vw;
            font-weight: 500;
            padding: 0.25rem 1rem;
            margin-bottom: 4rem;
        }
    
        #contactbutton {
            font-size: 2vw;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
        }
    
        /*FOOTER*/
        footer {
            padding: 0 0.5rem;
        }
    
        .socials {
            width: 80%;
            height: 80%;
        }
}

/*MOBILE MEDIA QUERIE*/
@media screen and (max-width: 540px) {
    /*MAIN HEADING FOR EACH SECTION*/
    h1 {
        font-size: 5vw;
        font-weight: 300;
    }

    /*USED FOR NAVBAR AND FOOTER AND BARCODES*/
    h2 {
        font-size: 5vw;
        font-weight: 500;
    }

    /*Skill title for each*/
    h3 {
        font-size: 2.5vw;
        font-weight: 500;
    }

    /*USED FOR NAVBAR AND FOOTER*/
    h4 {
        font-size: 1.5vw;
    }

    p {
        font-size: 2.5vw;
    }

    /*NAVBAR*/
    nav {
        height: 5%;
        padding: 0 0.5rem;
    }
    
    li {
        padding: 0.5rem;
        font-weight: 400;
        font-size: 5vw;
    }

    /*ABOUT ME SECTION*/
    .about {
        margin: 10vw;
        margin-bottom: 7vw;
    }

    .aboutboxlong {
        border-image: linear-gradient(rgb(255,0,43),black) 5;
        height: 70vw;
    }

    /*Main About box*/
    .aboutboxlarge {
        background-image: linear-gradient(rgb(150, 26, 45),black);
        border-image: linear-gradient(rgb(255,0,43),black) 10;
        border-width: 3px;
        border-style: solid;
        clip-path: polygon(
            /*top left*/
            0 0,
            /*top right*/
            100% 0,
            /*bottom right top*/
            100% 80%,
            /*bottom right*/
            85% 100%,
            /*bottom left*/
            0 100%);
        width: 100%;
        height: 75vw;
        padding: 3rem;
    }

    /*Main skills containter*/
    #skills {
        margin: 10vw 15vw;
        margin-bottom: 5vw;
    }

    /*Skills containter*/
    .container {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 76%,
            /*bottom right*/
            85% 100%,
            /*bottom left*/
            0 100%);
        margin-bottom: 1rem;
        height: 45vw;
    }
    
    /*Skills column*/
    .column {
        flex: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }

    /*Portfolio gallery*/
    .grow {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .gcolumn {
        flex: 100%;
        max-width: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /*Project details*/
    .projecttitle {
        font-size: 2em;
    }

    .projectdescription {
        font-size: 1.25em;
    }

    /*Contact Form*/
    .contact {
        padding: 5rem 3rem;
        width: 75vw;
        height: 95vw;
    }

    .contacttitle {
        padding-top: 2rem;
        font-size: 5vw;
        text-align: center;
        padding-bottom: 0;
    }

    form {
        font-size: 3vw;
    }

    input {
        height: 5vw;
        margin-bottom: 3vw;
    }

    /*Button styling*/
    #submitbutton {
        font-size: 4vw;
        font-weight: 500;
        padding: 0.25rem 1rem;
        margin-bottom: 4rem;
    }

    #contactbutton {
        font-size: 2vw;
        font-weight: 600;
        padding: 0.25rem 0.5rem;
    }

    /*FOOTER*/
    footer {
        padding: 0 0.5rem;
    }

    .socials {
        width: 80%;
        height: 80%;
    }
}