body {
    background-color: #0a1122;
    overflow: hidden;
}

.light {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(circle at var(--x) var(--y), transparent 10%, rgba(0,0,0,0.3) 20%);
}

.background-effect1 {
    position: relative;
    left: -120px;
    top: -84px;
    height: 268px;
    width: 313px;
    border-radius: 50%;
    background-color: rgba(5, 184, 152, 0.6);
    filter: blur(154px);
}

.background-effect2 {
    position: relative;
    float: right;
    left: 110px;
    top: -43px;
    height: 268px;
    width: 313px;
    border-radius: 50%;
    background-color: #39226b;
    filter: blur(154px);

}

.background-effect3 {
    position: absolute;
    left: 239px;
    bottom: -118px;
    height: 268px;
    width: 313px;
    border-radius: 50%;
    background-color: #39226b;
    filter: blur(74px);
}

.background-effect4 {
    position: absolute;
    right: -168px;
    bottom: -106px;
    height: 268px;
    width: 313px;
    border-radius: 50%;
    background-color: #1405B8;
    filter: blur(191px);
}


.title1 {
    position: absolute;
    letter-spacing: normal;
    text-align: center;
    font-size: 90px;
    color: #8da687;
    font-family: Outfit;

    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 161px;
}

.title2 {
    position: absolute;
    letter-spacing: normal;
    text-align: center;
    font-size: 90px;
    color: #8da687;
    font-family: Outfit;

    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 230px;
    padding-top: 86px;
}

.dimension-gif {
    position: absolute;
    scale: 0.5;
    left: 50%;
    top: 50%;
    transform: translateX(-100%) translateY(-80px);
}

.portals {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 275px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

.portals .portal {
    height: 250px;
    width: 250px;
}

.sw-portal, .musician-portal {
    opacity: 1;
    transition: opacity 0.4s;
}

.sw-portal:hover, .musician-portal:hover {
    opacity: 0;
}

.info {
    color: #fff;
    font-size: 20px;
    font-family: Outfit;
    text-align: center;

    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 25px;
}