.app-tabs{
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
}
.content-tabs{
    display: flex;
    height: 70vh;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.tab-content1{
    width: 100%;
    height: 100%;
}
.tab-content2{
    width: 100%;
    height: 100%;
}
.tab-content3{
    width: 100%;
    height: 100%;
}
.tabs{
    display: flex;
    width: 90%;
    height: 70vh;
    align-items: center;
    justify-content: center;
}
.tab{
    display: flex;
    height: 400px;
    width: 400px;
    background-color: rgba(97, 97, 223, 0.22);
    margin-left: 30px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    transition-timing-function: ease;
    transition-duration: 1s;
    opacity: 0.8;
    position: relative;
    overflow: hidden;
}
.tab:hover{
    opacity: 1;
    background-color: rgb(28, 48, 48);
    height: 406px;
    width: 406px;
    transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
    transform: skewX(0.5deg) skewY(-0.5deg);
}
.tab3{
    display: flex;
    height: 400px;
    width: 400px;
    background-color: rgba(97, 97, 223, 0.22);
    margin-left: 30px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    transition-timing-function: ease;
    transition-duration: 1s;
    opacity: 0.8;
    position: relative;
    overflow: hidden;
}
.tab3:hover{
    opacity: 1;
    background-color: rgb(28, 48, 48);
    height: 406px;
    width: 406px;
    transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
    transform: skewX(-0.5deg) skewY(0.5deg);
}
.title-tabs{
    display: flex;
    height: 80px;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: none;
}
.title-tabs2{
    display: flex;
    height: 80px;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: none;
}
.title-tabs3{
    display: flex;
    height: 80px;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: none;
}
.title-tabs h3{
    color: indianred;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 30px;
    display: none;
}
.title-tabs2 h3{
    color: indianred;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 30px;
    display: none;
}
.title-tabs3 h3{
    color: indianred;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 30px;
    display: none;
}
.writing{
    display: flex;
    height: 160px;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    display: none;
}
.writing2{
    display: flex;
    height: 160px;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    display: none;
}
.writing3{
    display: flex;
    height: 160px;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    display: none;
}
.links-tabs{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
}
.links-tabs2{
    display: flex;
    height: 100px;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.links-tabs3{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
}
.tab-content1 .links-tabs a{
    color: red;
    text-decoration: none;
    border: 0.5px solid crimson;
    padding: 10px;
    margin-left: 6px;
    transition-timing-function: ease-in-out;
    transition-duration: 0.8s;
    display: none;
}
.tab-content2 .links-tabs2 a{
    color: red;
    text-decoration: none;
    border: 0.5px solid crimson;
    padding: 10px;
    margin-left: 6px;
    transition-timing-function: ease-in-out;
    transition-duration: 0.8s;
    display: none;
    margin-top: 60px;
}
.tab-content3 .links-tabs3 a{
    color: red;
    text-decoration: none;
    border: 0.5px solid crimson;
    padding: 10px;
    margin-left: 6px;
    transition-timing-function: ease-in-out;
    transition-duration: 0.8s;
    display: none;
}
.tab-content1 .links-tabs a:hover{
    background-color: crimson;
    color: white;
}
.tab-content2 .links-tabs2 a:hover{
    background-color: crimson;
    color: white;
}
.tab-content3 .links-tabs3 a:hover{
    background-color: crimson;
    color: white;
}
.title-big{
    display: flex;
    height: 30px;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 120px;
    animation: animate-titlebig 6s linear infinite;
}
.title-big2{
    display: flex;
    height: 30px;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 120px;
    animation: animate-titlebig 6s linear infinite;
}
.title-big3{
    display: flex;
    height: 30px;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 120px;
    animation: animate-titlebig 6s linear infinite;
}
.title-big h2{
    color: rgb(103, 255, 90);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 38px;
}
.title-big2 h2{
    color: rgb(103, 255, 90);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 38px;
}
.title-big3 h2{
    color: rgb(103, 255, 90);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 38px;
}
@keyframes animate-titlebig{
    0%
    {
        margin-top: 120px;
    }
    50%
    {
        margin-top: 140px;
    }
    100%
    {
        margin-top: 120px;
    }
}
@keyframes animate-ripple {
    0%
    {
        width: 0px;
        height: 0px;
    }
    100%
    {
        width: 800px;
        height: 800px;
    }
}
@keyframes animate-titlebig-res{
    0%
    {
        margin-top: 25px;
    }
    50%
    {
        margin-top: 35px;
    }
    100%
    {
        margin-top: 25px;
    }
}
@media (max-width: 1020px) {
    .title-big h2{
        font-size: 28px;
    }
    .title-big2 h2{
        font-size: 28px;
    }
    .title-big3 h2{
        font-size: 28px;
    }
}
@media (max-width: 800px) {
    .content-tabs{
        align-items: center;
        justify-content: center;
    }
    .tabs{
        display: block;
        align-items: center;
        justify-content: center;
        margin-top: 25px;
        width: 80vh;
    }
    .tab{
        height: 100px;
        margin-top: 10px;
        width: 400px;
        margin-left: 60px;
    }
    .tab3{
        height: 100px;
        margin-top: 10px;
        width: 400px;
        margin-left: 60px;
    }
    .title-big{
        margin-top: 25px;
        animation: animate-titlebig-res 6s linear infinite;
    }
    .title-big2{
        margin-top: 25px;
        animation: animate-titlebig-res 6s linear infinite;
    }
    .title-big3{
        margin-top: 25px;
        animation: animate-titlebig-res 6s linear infinite;
    }
}
@media (max-width: 490px) {
    .tab-content1{
        width: 300px;
    }
    .tab-content2{
        width: 300px;
    }
    .tab-content3{
        width: 300px;
    }
    .tab{
        width: 300px;
        margin-left: 60px;
    }
    .tab3{
        width: 300px;
        margin-left: 60px;
    }
    .title-tabs{
        width: 300px;
    }
    .title-tabs2{
        width: 300px;
    }
    .title-tabs3{
        width: 300px;
    }
    .writing{
        width: 300px;
    }
    .writing2{
        width: 300px;
    }
    .writing3{
        width: 300px;
    }
    .links-tabs{
        width: 300px;
    }
    .links-tabs2{
        width: 300px;
    }
    .links-tabs3{
        width: 300px;
    }
}
@media (max-width: 420px) {
    .tab{
        width: 300px;
        margin-left: 60px;
    }
    .tab3{
        width: 300px;
        margin-left: 60px;
    }
}
@media (max-width: 390px) {
    .tab{
        width: 300px;
        margin-left: 40px;
    }
    .tab3{
        width: 300px;
        margin-left: 40px;
    }
}
@media (max-width: 360px) {
    .tab{
        width: 300px;
        margin-left: 20px;
    }
    .tab3{
        width: 300px;
        margin-left: 20px;
    }
}