body {
    background-color: rgb(0, 39, 39);
    overflow: hidden;
    display: flex;
    background-repeat: no-repeat;
    background-size: cover;
}

audio {
    display: none;
}

.bodyNfm {
    background-image: url("slike/nfm.jpg");
}

.bodyMonster {
    background-image: url("slike/monhun/monhun.png");
}

#home {
    background-color: #faebd7;
    position: absolute;
    height: 10vh;
    width: 10vh;
    top: 4vh;
    left: 4vh;
    background-image: url("slike/home.png");
    background-size: contain;
    border-radius: 10%;
    border: rgb(0, 87, 87) solid 0.5vh;
}

a {
    margin-top: 21%;
}

#nfm {
    position: absolute;
    background-color: #faebd7;
    height: 15vh;
    width: 40vh;
    border-radius: 10%/25%;
    border:  5px rgb(0, 194, 194) solid;
    box-shadow: 0px 0px 20px rgb(0, 105, 97),
    inset 0px 0px 20px rgb(0, 104, 95),
    0px 0px 60px rgb(0, 138, 126),
    inset 0px 0px 60px rgb(0, 124, 114);
    font-size: 4em;
    color:rgb(0, 49, 49);
    left: 22%;
}

#nfm:hover{
    background-color: #c9780e;
    border:  5px rgb(255, 251, 0) solid;
    box-shadow: 0px 0px 20px rgb(255, 187, 0),
    inset 0px 0px 20px rgb(255, 196, 0),
    0px 0px 60px rgb(255, 196, 0),
    inset 0px 0px 60px rgb(255, 208, 0);
    color: rgb(255, 251, 0);
}

#monhun {
    position: absolute;
    background-color: #faebd7;
    height: 15vh;
    width: 40vh;
    border-radius: 8%/20%;
    border:  5px rgb(0, 194, 194) solid;
    box-shadow: 0px 0px 20px rgb(0, 105, 97),
    inset 0px 0px 20px rgb(0, 104, 95),
    0px 0px 60px rgb(0, 138, 126),
    inset 0px 0px 60px rgb(0, 124, 114);
    font-size: 4em;
    color:rgb(0, 49, 49);
    left: 58%;
}

#monhun:hover {
    background-color: #333333;
    border:  5px rgb(22, 159, 212) solid;
    box-shadow: 0px 0px 20px rgb(51, 133, 153),
    inset 0px 0px 20px rgb(47, 128, 148),
    0px 0px 60px rgb(59, 137, 158),
    inset 0px 0px 60px rgb(56, 122, 148);
    color: rgb(19, 186, 228);
}

.blank {
    display: none;
}

.container {
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 80px;
}

.verticalLine {
    height: 100vh;
    position: absolute;
    left: 50%;
    top: -1%;
    border-radius: 50px;
    border:  5px rgb(176, 255, 255) solid;
    box-shadow: 0px 0px 20px rgb(0, 136, 125),
    inset 0px 0px 20px rgb(0, 136, 125),
    0px 0px 60px rgb(0, 255, 234),
    inset 0px 0px 60px rgb(0, 255, 234);
    filter: brightness(1.5) contrast(2);
}

.mainCircle {
    z-index: -1;
    height: 60vh;
    width: 60vh;
    position: absolute;
    border-radius: 100%;
    border:  5px rgb(0, 124, 124) solid;
    background-color: rgb(0, 73, 70);
    box-shadow: 0px 0px 20px rgb(0, 136, 125),
    inset 0px 0px 20px rgb(0, 136, 125),
    0px 0px 60px rgb(0, 185, 170),
    inset 0px 0px 60px rgb(0, 158, 145);
    filter: brightness(1.5) contrast(2);
}

.circle {
    z-index: -2;
    position: absolute;
    border-radius: 100%;
    border:  5px rgb(0, 194, 194) solid;
    box-shadow: 0px 0px 20px rgb(0, 105, 97),
    inset 0px 0px 20px rgb(0, 104, 95),
    0px 0px 60px rgb(0, 138, 126),
    inset 0px 0px 60px rgb(0, 124, 114);
    filter: brightness(1.5) contrast(2);
    animation: breathing 10s ease-out infinite;
}

.circle:nth-child(3) {
    transform: translateZ(0px);
    opacity: 1.00;
}

.circle:nth-child(4) {
    transform: translateZ(-10px);
    opacity: 0.8;
    animation-delay: 0.6s;
}

.circle:nth-child(5) {
    transform: translateZ(-20px);
    opacity: 0.6;
    animation-delay: 1.2s;
}

.colorNfm {
    background-color: #c9780e;
    border:  5px rgb(255, 251, 0) solid;
    box-shadow: 0px 0px 20px rgb(172, 126, 0),
    inset 0px 0px 20px rgb(143, 105, 0),
    0px 0px 60px rgb(134, 103, 0),
    inset 0px 0px 60px rgb(114, 93, 0);
}

.colorMonster {
    background-color: #3a3a3a;
    border:  5px rgb(28, 158, 190) solid;
    box-shadow: 0px 0px 20px rgb(44, 115, 119),
    inset 0px 0px 20px rgb(42, 116, 128),
    0px 0px 60px rgb(55, 143, 158),
    inset 0px 0px 60px rgb(55, 114, 138);
}





@keyframes breathing {
    0% {filter: brightness(1) contrast(3) opacity(100); width: 50vh; height: 50vh;}
    100% {filter: brightness(1) contrast(1) opacity(0); width: 200vh; height: 200vh;}
}