.red {
    color: var(--light-red);
}

h1 {
    color: var(--black);
    font-family: var(--font-2);
    font-size: 96px;
    margin: 0;
}

h2 {
    color: var(--black);
    font-family: var(--font-3);
    font-size: 64px;
    margin: 0;
}

.basic-flex {
    display: flex;
}

.LO1{
    color: var(--black);
    font-family: var(--font-2);
    font-size: 48px;
    position: absolute;
    top: 25%;
    left: 45%;
    transform: translate(-50%, -50%);
    transform: rotate(55deg);
}

.lo1{
    width: 200px;
    color: var(--black);
    font-family: var(--font-3);
    font-size: 16px;
    position: absolute;
    top: 42%;
    left: -10%;
    transform: translate(-50%, -50%);
    transform: rotate(55deg);
    text-align: center;
}

.LO2{
    color: var(--black);
    font-family: var(--font-2);
    font-size: 48px;
    position: absolute;
    top: 25%;
    left: 30%;
    transform: translate(-50%, -50%);
    transform: rotate(0deg);
}

.lo2{
    min-width: 200px;
    color: var(--black);
    font-family: var(--font-3);
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    transform: rotate(0deg);
}

.o1 {
    position: absolute;
    top: 25%;
    left: 0%;
    transform: translate(-50%, -50%);
    transform: rotate(50deg);
}

.o2-5 {
    position: absolute;
    top: 30%;
    left: 20%;
    transform: translate(-50%, -50%);
    transform: rotate(-8deg);
}

.o3 {
    position: absolute;
    top: 30%;
    left: 25%;
    transform: translate(-50%, -50%);
    transform: rotate(-70deg);
}

.o4 {
    position: absolute;
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%);
    transform: rotate(50deg);
}

.oP {
    position: absolute;
    top: 30%;
    left: 10%;
    transform: translate(-50%, -50%);
    transform: rotate(-73deg);
}

.center {
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction: column;
}

.L {
    font-family: var(--font-2);
    font-size: 48px;
}

.l {
    font-family: var(--font-3);
    font-size: 16px;
    text-align: center;
}

.black-txt {
    color: var(--black);
    transition: color 0.3s ease;
}

.white-txt {
    color: var(--white);
}

.tab-text {
    font-size: 20px;
    color: var(--white);
}

.font2 {
    font-family: var(--font-2);
}

.font3 {
    font-family: var(--font-3);
}

.cutie-txt {
    font-size: 24px;
    color: var(--white);
}

.huge {
    font-size: 150px;
    color: var(--black);
    font-family: var(--font-2);
    font-weight: bold;
}

.title {
    font-size: 36px;
    color: var(--black);
    font-family: var(--font-1);
    font-weight: bold;
}

.subtitle {
    font-size: 24px;
    color: var(--black);
    font-family: var(--font-1);
    font-weight: bold;
}

.normal {
    font-size: 18px;
    color: var(--black);
    font-family: var(--font-1);
    text-align: justify;
}
.signature1 {
    font-size: 100px;
    color: var(--white);
    font-family: var(--font-1);
    text-align: justify;
}
.signature2 {
    font-size: 100px;
    color: var(--white);
    font-family: var(--font-1);
    text-align: justify;
}

.proj-wrap {
    transform: rotate(-15deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 10px;
}

.porjsubtxt {
    font-size: 40px;
    color: var(--black);
    font-family: var(--font-3);
}

.projtxt {
    font-size: 50px;
    color: var(--black);
    font-family: var(--font-2);
    transition: color 0.3s ease, cursor 0.3s ease;
    border: 5px solid var(--black); 
    border-radius: 50%;
    padding: 10px 5px 10px 5px;
}

.projtxt:hover {
    color: red;
    cursor: pointer; 
}