*{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    background: linear-gradient(0deg, #5d5fef,#ba33b5) fixed;
    /* height: 100vh; */
    font-family: "Russo One", sans-serif;
    overflow: hidden;
}
main{
    width: 90%;
    height: 720px;
    margin: 0 auto;
    padding-top: 30px;
    position: relative;
    font-size: 24px;
}
nav.nav{
    width: 1290px;
    margin: 4px auto;
}
nav.nav ul{
    display: flex;
    justify-content: space-between;
    gap: 25px;
    list-style-type: none;
    padding: 0;
    margin: 0;

}
nav.nav ul li a{
 text-decoration: none;
 text-transform: uppercase;
 font-size: 32px;
 font-weight: 600;
 color: #7800928a;
 text-shadow: 0 0 15px #eee;
}


header.header{
    width: 1290px;
    height: 600px;
    margin: 0 auto;
    padding: 25px;
    background: linear-gradient(0deg, #850099aa, #ffffff22 350px), linear-gradient(63deg, #9623239c, #7d00b5d6), url(../img/002.jpg) 0 0 / 105% no-repeat;
    border-radius: 20px;
    display:flex;
    align-items: flex-end;
    /* justify-content: center ; */
    flex-direction: row;
    /* flex-wrap: wrap; */
    /* gap: 100px; */

}
img{
    position: relative;
    display: block;
    width: 200px;
    order: -1;
}
h1{
    color: #ffffffa6;
    font-size: 50px;
    position: relative;
    text-shadow: 0 0 25px #eda528aa, 
    0 0 75px #900541ff,
    0 0 3px #5d5fef
    ;
    stroke: #00f 5px;
}
h1 span{
    font-size: 100px;
}
.topic{
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: 0 0 50px 5px #ba33b5,
                inset -20px 50px 50px 25px #ed7ee9ff
    ;
}
.topic:nth-of-type(1){
    width: 500px;
    height:500px;
    background: linear-gradient(45deg, #7d00b5, #c57c7c);
    top: 37%;
    left: -9%;
    z-index: -1;
}
.topic:nth-of-type(2){
    width: 400px;
    height:400px;
    background: linear-gradient(45deg, #7d00b5, #c57c7c);
    bottom: -3%;
    right: 5%;
    z-index: -1;

}
.topic:nth-of-type(3){
    width: 270px;
    height:270px;
    background: linear-gradient(45deg, #7d00b5, #c57c7c);
    bottom: -40%;
    right: 59%;

}
.topic:nth-of-type(4){
    width: 350px;
    height:350px;
    background: linear-gradient(45deg, #257144ee, #3eba7000);
    bottom: 3%;
    right: 40%;


}
.topic:nth-of-type(5){
    width: 250px;
    height:250px;
    background: linear-gradient(45deg, #7d00b5, #c57c7c);
    bottom: -14%;
    right: -4%;

}
.topic:nth-of-type(6){
    width: 170px;
    height:170px;
    background: linear-gradient(45deg, #7d00b5, #c57c7c);
    bottom: 32%;
    right: 27%;

}
.topic:nth-of-type(7) {
width: 110px;
height: 110px;
background: linear-gradient(45deg, #7d00b5, #c57c7c);
bottom: -16%;
right: 36%;
}

/* Vertical text in Header */

.v-txt{
    position: absolute;
    left: 0;
    top: 20px;
    margin-right: auto;
    margin-left: -30px;
    width: 20px;
    height: 700px;
    color: #fff;
}
.v-txt *:nth-child(1),
.v-txt *:nth-child(3),
.v-txt *:nth-child(5){
    color: #212121;
    transform: rotate(-90deg);
    position: absolute;
    font-size: 26px;
    font-weight: 600;
}
.v-txt *:nth-child(1){
    color: #e980f596;
    /* color: #c000e0;
    text-shadow: 1px 2px 17px #e9afff,
                   0 0 3px #edb5ff  ; */
    top: 38px;
    left: -19px;
}
.v-txt *:nth-child(3){
    color: #f6a6ff;
    top: 329px;
    left: -30px;
    font-size: 1.5em;
    text-shadow: 1px 2px 17px #e9afff,
                   0 0 3px #edb5ff  ;
}
.v-txt *:nth-child(5){
    color: #ba9c9a78;
    top: 634px;
    left: -19px;
}


.v-txt--sep-top{
    position: absolute;
    width: 3px;
    height: 200px;
    top: 100px;
    left: calc(50% - 2px);
    background: #9e507aab;
}
.v-txt--sep-btm{
    position: absolute;
    width: 3px;
    height: 200px;
    top: 400px;
    left: calc(50% - 2px);
    background: #9e507aab;
}
.v-txt--date{
}