*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 @font-face { font-family: postnobill; src: url('fonts/post-no-bills-colombo/postnobillscolombo-regular.ttf'); } 
 @font-face { font-family: limelight; src: url('fonts/limelight/Limelight-Regular.ttf');}
 @font-face { font-family: gunplay; src: url('fonts/gunplay/gunplay\ rg.otf'); } 
 @font-face { font-family: gundimensional; src: url('fonts/gunplay/gunplay\ 3d.otf');}
 @font-face { font-family: bigshoulders; src: url('fonts/big-shoulders-display/BigShouldersDisplay-Regular.ttf');}
 @font-face { font-family: clip; src: url('fonts/clip/Clip.ttf');}

body {
    overflow-x: hidden;
    overflow-y: auto;
    color: #cac7cf;
    background-color: #d1c5da;
    font-family: 'bigshoulders';
}

/* -------COLORS
Sweater green= #a0bfbd
skin= #a0bfbd
iris= #7fa1a5
hair brown= #423124
#314025.  dark green
*/


#nav{
    list-style: none;
    padding: 0;
    margin: 0;
}

#about #nav{
    grid-row: 1;
    grid-column: 3;
}

#nav a{
    color: #51c5e0;
    text-decoration: none;
    font-size: calc(10% + 3rem);
    position: relative;
    border-radius: 5px;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    padding: 0 5%;
}

#nav a::after{
    content: '';
    width: 0;
    height: 3px;
    background: #51c5e0;
    position: absolute; 
    left: 0;
    bottom: -6px;
    transition: 0.5s;
}

#nav a:hover::after{
    width: 100%;
}

/*------------ABOUT */

#about {
    padding: 3%;
    color: #d9dae2;
    background-color: #3405052c;
    height: 90vh;
    width: 90vw;
    margin: 1vh auto;
    display: grid;                            
    grid-template-columns: 10vw, 70vw, 10vw;   
    grid-template-rows: 5vh, 70vh, 10vh;                     
    grid-gap: 3%;
}

#about > div:not(:last-child) {
    background-color: #340505;
    border-radius: 5%;
    align-content: center;
}

.bio {
    position: relative;
    overflow: hidden;
    grid-row: 2;
    grid-column: 1;
    background-color: #0a0b0c;
    border-radius: 5%;
}

.bio img{
    transition: transform 0.5s;
    max-width: 100%;
    border-radius: 50%;
    align-items: center;
}

.info{
    width: 100%;
    height: 100%;
    opacity: 0;
    color: #d9dae2;
    border-radius: 50%;
    Position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    transition: opacity 1s;
}

.info p{
    font-size: large;
    font-weight: 200;
    padding: 1% 8%;
}

.bio:hover .info{
    opacity: 100%;
}

.sub-title {
    font-size: calc(2.2rem + 15%);
    text-align: center;
    color: #d9dae2;
    grid-row: 1;
    grid-column: 2;
}

.social-icons{
    align-items: center;
    justify-content: space-around;
    padding: 0 5%;
    display: flex;
    gap: 15%;
    grid-row: 1;
    grid-column: 1;
}

.social-icons a{
    text-decoration: none;
    font-size: calc(3.3rem + 18%);
    color: #d9dae2;
    transform: scale(1.25) .5s;
}

.social-icons a:hover{
    color: #d8e9c5;
    transform: scale(1.25);
}

.btn.btn2{
    grid-column: 1;
    grid-row: 3;
    cursor: pointer;
    background-color: #364719;
    align-content: center;
}

.btn.btn2 a{
    color: #d8e9c5;
    text-decoration: none;    
}

.btn.btn2:hover{
    color: #82d1f8;
}

#tabs{
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    width: 100%;
    height: 100%;
    align-content:start;
}

.tab-titles {
    display: flex;
    padding: 3% 0;
}

.tab-titles p{
    font-size: calc(1.5rem + 80%);
}

.tab-links {
    cursor: pointer;
    position: relative;   
    margin: auto;
}

.tab-links::after {
    content: '';
    width: 0;
    height: 3px;
    background: #d8e9c5;
    position: absolute;
    left: 0;
    bottom: -8px;
    transition: .5s;
}

.tab-links.active-link::after {
    width: 100%;
}

.tab-contents ul li {
    list-style: none;
    font-size: calc(1.2rem + 15%);
    padding: 2% 5%;
    margin: 2% 0;
}

.tab-contents ul li span {
    color: #d8e9c5;
    font-size: calc(1.4rem + 33%);
    font-weight: 100;
}

.tab-contents {
    width: 44vw;
    display: none;
}

.tab-contents.active-tab {
    display: block;
}

/*--------- SERVICES */

#services{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.services-list{
    display: grid;
    grid-template-columns: auto-fit, minmax(20rem, 1fr);
    grid-gap: 5%;
}

.services-list a{
    background: radial-gradient(#511017, #51101776);
    color:#d9dae2;
    padding: 3rem;
    font-size: clamp(1.2rem, calc(5% + 1.2rem), 2rem);
    font-weight: 300;
    border-radius: 10px;
    transition: background .5s, transform .5s;
}

.services-list a i{
    font-size: calc(1rem + 4vw);
    margin-bottom: .5rem;
    align-content: center;
}

.services-list a h2{
    font-size: calc(15% + 2vw);
    font-weight: 800;
    padding-bottom: 3%;
    margin: 1rem, .8rem, 2.5rem, .8rem;
    color:#d9dae2;
}

.services-list a{
    text-decoration: none;
    font-size: clamp(1.2rem, calc(5% + 1.2rem), 2rem);
    }

.services-list a:hover{
    background: #d9dae2;
    transform: translateY(-10px);
    color: #083259;

}
.services-list a:hover h2{
    color: #083259;

}

#services .sub-title{
    font-size: calc(5vw + 25%);
    font-weight: 900;
    color:#d9dae2;
    padding: 5% 5rem;
    text-align: center;
}

#services .sub-title p{
    font-size: calc(2vw + 5%);
    font-weight: 300;
    color:#d9dae2;
}

/*--------- PORTFOLIO */

#portfolio {
    text-align: center;
    background-image: url(images/blue_bg-01.jpg);
    background-size: cover;
    background-attachment: fixed;
}

#portfolio .sub-title{
    font-size: calc(5.2rem + 15%);
}

.work-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    margin: 5rem;
}

.work {
    border-radius: 10%;
    background: radial-gradient(#b5c0c9bd, #b5c0c9c0);
    position: relative;
    overflow: hidden;
}

.work img{
    width: 100%;
    display: block;
    transition: transform 0.5s;
}

.layer{
    width: 100%;
    height: 0;
    color: #d9dae2;
    background: radial-gradient(#e06412d9, #b55b1fd0);
    border-radius: 10%;
    Position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    transition: height 1s;
}

.layer h3{
    font-size: calc(88% + 4rem);
    font-weight: 1000;
}

.layer p{
    font-size: calc(10% + 2rem);
    font-weight: 500;
    margin: 3% 0 8% 0;
}

.layer a{
    color: #364719;
    text-decoration: none;
    font-size: calc(12px + 3vw);
    text-align: center;
}

.layer a:hover{
    color:#b0c3de;
}

.work:hover img{
    transform: scale(1.25);
}

.work:hover .layer{
    height: 100%;
}

.btn{
    display: block;
    border: 1px solid #d9dae2;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    color: #d9dae2;
    background: #3e580d;
    transition: background .5s;
    font-size: calc(10% + 1.8rem);
    color: #d9dae2;
}

.btn:hover {
    background: #340505;
    color: #456778;
}

.copyright{
    width: 100vw;
    height: 5vh;
    text-align: center;
    background: #340505;
    font-weight: 200;
    font-size: 1.2rem;
    position: fixed;
    bottom: 0;
    padding: 1.5vh 0 3vh 0;}

.copyright i{
    color:#d9dae2;
}

/*---------------SMALL SCREENS------------*/

nav .fa-solid{
    display: none;
}

@media only screen and (max-width: 600px){

    /*
    nav .fas{
        display: block;
        font-size: 25px;
    }

    nav ul{
        background:#3E2723;
        position: fixed;
        top: 0;
        right: -200px;
        width: 200px;
        height: 100vh;
        z-index: 2;
        transition: right .5s;
    }

    nav ul li{
        display: block;
        margin: 25px;
    }

    nav ul .fas{
        position: absolute;
        top: 25px;
        left: 25px;
        cursor: pointer;
    }

    nav i:hover{
        cursor:pointer;
    }
        */
#services{
    display: grid;
    grid-template-rows: auto-fit, minmax(10rem, 1fr);
}


#services .sub-title{
    font-size: calc(10% + 6vw);
    padding: 0;
    margin: 0;
}

#services .sub-title p{
    font-size: calc(5% + 3vw);
    padding: 0;
    margin: 0;
}

.services-list a h2{
    font-size: calc(10% + 4vw);

}

.services-list a p{
    font-size: calc(10% + 3vw);
}

    #about{
        padding: 0;
        margin: 0%;   
        display: inline-block;
        position: static;
     }

   /* {
        max-width: 100%;
        padding: 5rem 2rem 0 2rem;
        text-align: center;
    }*/

    img{
        border-radius: 25%;
        margin-bottom: 5%;
    }

    .about-col-2 {
        flex-basis: 100%;
        max-width: 100%;
        margin: 0 0 8rem 0;
        padding: 5rem 2rem 0 2rem;
    }

    .tab-links{
        font-size: 2.2rem;
    }

    .work-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        margin-top: 25px;
    }

    .layer{
        text-align: center;
        padding: 0 15%;
    }

    .layer h3{
        margin-top: 10%;
        font-size: 2rem;
    }

    .layer a{
        font-size: calc(12px + 3vw);
        padding-top: 5%;
    }

    .contact-left, .contact-right{
        flex-basis: 100%;
    }

    .copyright{
        font-size: 14px;
    }

}