@keyframes slidein {
    from{
        opacity: 0;
        transform: translateY(-15%);
    }
    to{
        opacity: 1;
        transform: translateY(0%);
    }
}

*{
    box-sizing: border-box;
}

body{
    background-color: rgb(0,0,0);
    color:rgb(255,255,255);
    font-family: 'Source Code Pro', monospace;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

a:any-link{
    color: rgb(130,130,130);
}

a:visited{
    color: rgb(130,130,130);
}

a:any-link:hover{
    color: rgb(200,200,200);
}

#anim{
    z-index: -1;
}

.t1A{
    color: greenyellow;
}

.t2A{
    color: orange;
}

.t3A{
    color: green;
}

.t4A{
    color: rgb(80,69,245);
}

.t1A:hover{
    border: 2px solid greenyellow;
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
    transition: border, 0.2s linear;
}

.t2A:hover{
    border: 2px solid orange;
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
    transition: border, 0.2s linear;
}

.t3A:hover{
    border: 2px solid green;
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
    transition: border, 0.2s linear;
}

.t4A:hover{
    border: 2px solid rgb(80,69,245);
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
    transition: border, 0.2s linear;
}

.t1A.selected{
    color: greenyellow;
    border: 2px solid greenyellow;
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
}

.t2A.selected{
    color: orange;
    border: 2px solid orange;
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
}

.t3A.selected{
    color: green;
    border: 2px solid green;
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
}

.t4A.selected{
    color: rgb(80,69,245);
    border: 2px solid rgb(80,69,245);
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
}

.t1{
    display: none;
    border-color: greenyellow;
    color: white;
}

.t2{
    display: none;
    border-color: orange;
}

.t3{
    display: none;
    border-color: green;
}

.t4{
    display: none;
    border-color: rgb(80,69,245);
}


.show{
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;

    margin-left: 5%;
    margin-right: 5%;
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 3%;
    
    border-width: 2px;
    border-style: solid;
    border-radius: 3px;

    animation: slidein 1s ease-out;
}

.inner-box{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.t1 .inner-box > a{
    border: 2px solid greenyellow;
}

.t2 .inner-box > a{
    border: 2px solid orange;
}

.t3 .inner-box > a{
    border: 2px solid green;
}

.t4 .inner-box > a{
    border: 2px solid rgb(80,69,245);
}


.inner-box > a{
    margin-left: 5%;
    margin-right: 5%;
    padding: 15%;
    border-radius: 3px;

    font-weight: bolder;
    text-decoration: none;
}

.inner-box > a:any-link{
    color: inherit;
}

.inner-box > a:visited{
    color: inherit;
}

.inner-box > a:hover{
    transform: scale(105%);
    border-width: 5px;

    transition: transform 0.5s ease-out;
    transition: border-width 0.3s ease;
}

.dissapear{
    display: none;
}

.dsbot{
    background-image: url(../images/dsbot.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.cctw{
    background-image: url(../images/cctw.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.pp3{
    background-image: url(../images/pp3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.portfolio{
    background-image: url(../images/portfolio.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.pps2{
    background-image: url(../images/pps2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.breakout{
    background-image: url(../images/breakout.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bigi{
    background-image: url(../images/bigi.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.compeye{
    background-image: url(../images/compeye.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.asfdc{
    background-image: url(../images/asfdc.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.cpzle{
    background-image: url(../images/cpzle.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.minim{
    background-image: url(../images/minim.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}