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

:root {
    --sig: rgb(232, 106, 2);
    --reflect:rgba(232, 106, 2, 0.429);
    
    --b_glow: 0 0 10px rgb(68, 32, 4),
    0 0 20px rgb(112, 57, 11),
    0 0 40px rgb(155, 85, 27),
    0 0 80px rgb(164, 89, 28);
    
    --a_glow: 0 0 20px rgb(251, 114, 10),
    0 0 40px rgb(230, 125, 39),
    0 0 80px rgb(227, 132, 54),
    0 0 160px rgb(227, 169, 121);
    
    --bl: rgb(143, 0, 255);
    -blsb: 0 0 10px rgba(144, 0, 255, 0.487),
        0 0 20px rgba(144, 0, 255, 0.514),
        0 0 40px rgba(144, 0, 255, 0.732),
        0 0 80px rgb(143, 0, 255);

    -blsa: 0 0 10px rgb(144, 0, 255),
        0 0 20px rgba(144, 0, 255, 0.994),
        0 0 40px rgba(179, 99, 240, 0.732),
        0 0 80px rgb(190, 118, 245);

    --pm:rgb(201, 5, 250);

    -pmsb:0 0 10px rgba(201, 5, 250, 0.233),
          0 0 20px rgba(201, 5, 250, 0.509),
          0 0 40px rgba(201, 5, 250, 0.772),
          0 0 80px rgb(201, 5, 250);   

    -pmsa:0 0 10px rgb(201, 5, 250),
          0 0 20px rgb(206, 58, 243),
          0 0 40px rgb(215, 101, 244),
          0 0 80px rgb(222, 112, 250);      
    
}

* {
    margin: 0;
    padding: 0;
}

.container {
    color: white;
    background: black;
    height: 100vh;
    width: 100vw;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; 
    scroll-padding: 0;
}

section {
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}

section:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    background-color: black;
}

section:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    background-color: black;
    justify-content: center;
    align-items: center;
}

section:nth-of-type(3) {
    display: flex;
    flex-direction: column;
    background-color: black;
}


nav {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    
}

.heading {
    position: relative;
    margin: 0px 30px;
    font-size: 55px;
    font-family: 'Nova Flat', cursive;
    
}
.power{
    position: relative;
    display: flex;
    margin: 10px;
    top: 10px;
}
#val{
    position: relative;
    left: 10px;
    cursor: pointer;
}
.indicator {
    position: relative;
    display: flex;
}

.indicator p {
    position: relative;
    margin: 10px 0px;
    top: 10px;
}

.drop-down {
    position: relative;
    margin: 10px 1px;
    top: 10px;
    border-radius: 2px;
    width: 270px;
    height: 25px;
    text-align: center;
    transition: 0.6s ease;
    font-size: 22px;
    cursor: pointer;
}

#i1 {
    color: var(--sig);
    -webkit-box-reflect: below 1px linear-gradient(transparent, var(--reflect));
}

.text-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 800px;
    height: 400px;
    top: 200px;
    margin: 0px 67px;
    
}

.text-box {
    display: inline;
    font-size: 70px;
    font-family: Nova Flat, cursive;
    -webkit-box-reflect: below 1px linear-gradient(transparent, var(--reflect));
}

.text-content p {
    font-size: 22px;
    position: relative;
    top: 110px;
    font-family: Nova Flat, cursive;
}

.panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.reactor {
    position: relative;
    background-color: var(--sig);
    box-shadow: var(--b_glow);
    border-radius: 20px;
    transition: 0.6s ease;
    animation: rotateAnimate 2s infinite linear;
    
}

.reactor:hover {
    box-shadow: var(--a_glow) !important;
    background-color: white !important;
}

.contact_head{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.contact_head p{
    position: relative;
    top: 10px;
    font-size: 55px;
}
.contact_content{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 20px auto;
    font-size: 25px !important;
    line-height: 50px;
}
.contact_content p{
    text-align: center;
    font-size: 25px;
    line-height: 50px;
}

.links{
    display: flex;
    justify-content: center;
}
.links ul li a img{
    height: 60px;
    padding: 10px 30px;
}
.links ul li{
    display: inline;
    height: 100px;
}
.links ul{
    margin: 20px auto;
}

.contact_outro{
    display: flex;
    justify-content: center;
    margin: 10px 50px;
}
.contact_outro p{
    text-align: center;
    font-size: 25px;
    line-height: 50px;
}

.contact_outro a{
    color: var(--sig);
    cursor: pointer;
}
.clock{
    display: flex;
    flex-direction: column;
}
#time_id{
    font-size: 80px !important;
    margin: 40px auto;
}
#date_id{
    font-size: 40px !important;
    align-self: center;
}