@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

body{
    background-color: #1e2021;
    place-items: center;
    aspect-ratio: 16/9;
    overflow: hidden;
    user-select: none;
}

.container-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 70%;
    width: 50%;
}

.text-center{
    background-color: #1e2021;
    height: 100%;
    width: 100%;
    text-align: center;
    color: antiquewhite;
}

.top-left-box{
    position: absolute;
    height: 30%;
    width: 30%;
    border-radius: 15px;
    transition: 2s;
}

.bot-right-box{
    position: absolute;
    height: 30%;
    width: 30%;
    top: 100%;
    left: 100%;
    border-radius: 15px;
    transform: translate(-100%,-100%);
    transition: 2s;
}

.hide-top-left{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #1e2021;
    top: 20px;
    left: 20px;
}

.hide-bot-right{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #1e2021;
    top: -20px;
    left: -20px;
}

.bot-left-div{
    position: absolute;
    top: 55%;
    left: 8%;
    height: 30%;
    width: 55%;
}

.border-bot-left{
    border-radius: 25px;
    position: absolute;
    height: 100%;
    width: 0.5%;
    transition: 0.5s;
}

.bot-left-text{
    margin-top: -8%;
    height: 93%;
    font-family: 'Orbitron', sans-serif;
    color: #d4d4d4;
    padding-left: 5%;
    font-size: 150%;
    overflow:hidden;
    user-select: none;
}

.subtitle{
    width: 100%;
    overflow: hidden;
    font-family: 'Orbitron', sans-serif;
    font-size: 300%;
    top: -30%;
    padding-bottom: 1%;
    transition: 0.5s;
}

#links-bar{
    justify-content: center;
    position: absolute;
    height: 25%;
    user-select: none;
    width: 100%;
    overflow: hidden;
    transition: 0.4s;
}

.linksBot{
    display: inline-block;
    height: 80%;
    aspect-ratio: 1/1;
    margin-left: 5%;
    margin-top: 1%;
    background-size: contain;
    background-repeat: no-repeat;
    user-select: none;
}

.projectsLinks{
    font-family: 'Orbitron', sans-serif;
    text-align: justify;
    color: #d4d4d4;
    font-size: 200%;
    height: 10%;
    user-select: none;
    text-decoration: none;
    padding: 6%;
    transition: 0.2ms;
}

.projectsLinks:hover{
    cursor: pointer;
    transform: rotate(-1deg) scale(1.2);
}

.top-right-container{
    position: absolute;
    height: 35%;
    width: 20%;
    right: 10%;
    top:15%;
}

.top-left-box2{
    border-radius: 3%;
    position: absolute;
    height: 30%;
    width: 30%;
    transition: 2s;
}

.bot-right-box2{
    border-radius: 3%;
    position: absolute;
    height: 30%;
    width: 30%;
    bottom: 0%;
    right: 0%;
    transition: 2s;
}

.hide-top-left2{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #1e2021;
    top: 3px;
    left: 3px;
}

.hide-bot-right2{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #1e2021;
    right: 3px;
    bottom: 3px;
}

.top-right-text-container{
    position: absolute;
    height: 80%;
    width: 80%;
    margin: 13%;
    color: #d4d4d4;
}

.subtitleTop{
    text-align: left;
    font-family: 'Orbitron', sans-serif;
    font-size: 250%;
    color: #d4d4d4;
    position: absolute;
    top: -40%;
}

.linksBot:hover{
    transform: rotate(5deg) scale(1.2);
}


.copyright{
    position: absolute;
    color: #d4d4d4;
    right: 1%;
    bottom: 1%;
}

#text{
    transition: 0.5s;
}

#subtitle{
    transition: 0.5s;
}

.hide-triangle-top-left-right{
    aspect-ratio: 1/1;
    right: -12%;
    top: 0%;
    transform: rotate(-45deg);
    position: absolute;
    height: 30%;
    background-color: #1e2021;
}

.hide-triangle-top-left-left{
    aspect-ratio: 1/1;
    left: 0%;
    bottom: -15%;
    transform: rotate(-45deg);
    position: absolute;
    height: 30%;
    background-color: #1e2021;
}

.hide-triangle-bot-right-right{
    aspect-ratio: 1/1;
    right: 0%;
    top: -15%;
    transform: rotate(-45deg);
    position: absolute;
    height: 30%;
    background-color: #1e2021;
}

.hide-triangle-bot-right-left{
    aspect-ratio: 1/1;
    left: -10%;
    bottom: 0%;
    transform: rotate(-45deg);
    position: absolute;
    height: 30%;
    background-color: #1e2021;
}