:root {
    --blue: #80bdff;
    --green: #2ab296;
    --dark: #161c23;
    --dark-sec: #333333;
    --white-txt: #dddddd;
    --white-bg: #eeeeee;
    --main-bg: #eeeeee;
    --main-font: #333333;
    --lightThemeBoxShadow: inset 2px 2px 3px #c8c8c8, inset -2px -2px 3px #ffffff;
    --darkThemeBoxShadow: -2px -2px 3px #ffffff ,2px 2px 3px #c8c8c8;
    --buttonBoxShadow: -2px -2px 3px #ffffff ,2px 2px 3px #c8c8c8;
    --buttonBoxShadowBigger: -4px -4px 5px #ffffff ,4px 4px 5px #c8c8c8;
}

.main {
    width: 100%;
    /* height: 162vh; */
    background-image: url(../img/bg-neu.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    transition: background-color ease .3s;
}

.lightBg {
    background-color: var(--main-bg);
}

.themeToggle {
    width: 100%;
    /* text-align: center; */
    padding: 10px;
    display: flex;
    justify-content: center;
}

button:focus {
    outline: none;
    border: none;
}

.leftBtnTheme {
    border: none;
    padding: 5px 15px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    box-shadow: var(--darkThemeBoxShadow);
}

.rightBtnTheme {
    border: none;
    padding: 5px 15px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: var(--lightThemeBoxShadow);
}


.light {
    background-color: var(--main-bg);
    color: var(--green);
}

.head {
    padding: 70px 5%;
    text-align: center;
}

.head h1 {
    font-size: 4rem;
    font-weight: bold;
    color: var(--main-font);
}

.aboutMe {
    margin-top: 1%;
    font-variant: small-caps;
    font-weight: 500;
    color: var(--green);
    font-size: 1.25rem;
}

@media screen and (max-width: 422px){
    .head h1 {
        font-size: 3rem;
    }
}

.logoContainer {
    display: flex;
    justify-content: center;
    
}

.orgLogo {
    background-image: url(../img/tcs_logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100px;
    width: 200px;
    border-radius: 100px;
    background-color: var(--main-bg);
    box-shadow: var(--buttonBoxShadow);
    transition: box-shadow ease .3s,background-color ease .3s;
    cursor: pointer;
}

.orgLogo:hover {
    box-shadow: var(--buttonBoxShadowBigger);
}

.aboutOrg {
    margin-top: 1%;
    color: var(--green);
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
}

.endDiv {
    padding: 40px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.endContainer{
    display: flex;
    flex-wrap: wrap;

}

.oldFolio {
    flex: 1;
    padding: 20px;
}

.oldFolio h3 {
    font-weight: bold;
    color: var(--main-font);
}

.oldFolio p {
    color: var(--main-font);
}

.folioRedirectBtn {
    background-color: var(--main-bg);
    box-shadow: var(--buttonBoxShadow);
    color: var(--green);
    padding: 10px 15px;
    border: none;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 1rem;
    -webkit-transition: box-shadow .3s,background-color .3s;
    transition: box-shadow ease .3s,background-color ease .3s;
}

.folioRedirectBtn:hover {
    box-shadow: var(--buttonBoxShadowBigger);
}

.contactContainer {
    flex: 1;
    padding: 20px;
}

.contactContainer h3 {
    font-weight: bold;
    color: var(--main-font);
    padding-bottom: 10px;
}

.roundBtn {
    background-color: var(--main-bg);
    box-shadow: var(--buttonBoxShadow);
    color: var(--green);
    padding: 10px 15px;
    border: none;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 1rem;
    -webkit-transition: box-shadow .3s,background-color .3s;
    transition: box-shadow ease .3s,background-color ease .3s;
    margin-right: 1%;
}

.roundBtn:hover {
    box-shadow: var(--buttonBoxShadowBigger);
}

.option {
    flex: 1;
    padding: 20px;
}

.option h3 {
    font-weight: bold;
    color: var(--main-font);
    padding-bottom: 10px;
}

.endThemeToggle {
    width: 100%;
    /* text-align: center; */
    /* padding: 10px; */
    display: flex;
    /* justify-content: center; */
}


@media screen and (max-width: 666px){
    .endContainer {
        flex-direction: column;
    }
}

.credits {
    text-align: center;
    color: var(--main-font);
}

.nameTxt {
    color: var(--green);
}