html, body {
  margin:0;
  min-height:100%;
}

body {
  font-family:arial;
  background: linear-gradient(#000,#330000);
  background-attachment: fixed;
  background-repeat:no-repeat;
  min-height:100vh;
}

.layout {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:center;
  height:100vh;
    z-index: 10;
    position: relative;
}

.left, .right {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:70px;
}

.middle {
  flex:1.5;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  overflow-y: auto;
}

.topbar {
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(18px, 2.4vw, 48px);
  font-weight:bold;
  background: #000;
  border: 2px solid #ff0000;
  padding: 20px;
}

.maincontainer {
  display: flex;
  gap: 20px;
  min-width: 0;
  align-items: stretch;
}

.mainleft {
  flex:2;
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width: 0;
}

.mainright {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  height: auto;
}

.maincontent {
  display:flex;
  flex-direction:column;
  flex:5;
  min-width: 0;
  align-items:center;
}

.mainpagi {
  flex:0.1;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center; 
  justify-content:center;
  background: linear-gradient(#000,#330000);
  border: 2px solid #ff0000;
  padding: 20px;
}

.rightone, .righttwo {
  flex: 1;
  min-height: 25vh;
  overflow: hidden;
}
  
.sun {
  width: clamp(100px, 10vw, 180px);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  overflow: hidden;
}

.sunimg {
  width: 100%;
  height: 100%;
  cursor:pointer;
  object-fit: cover;
  display: block;
  border-radius:50%;
  transform: scale(1.4);
}



.maincontent,

.rightone,
.righttwo {
  background: #000;
  border: 2px solid #ff0000;
  padding: 20px;
}
     
.left > div,
.right > div {
  background: #000;
  padding: 5px; 
  
}
  
.toptitle { 
  white-space: nowrap;
  line-height:1;
  margin:0;
}
 
 
 
#last5days,
#activeregions,
#flares {
  font-size: clamp(12px, 1.2vw, 18px);
} 
 
#flares {
 color:white;
}
 
#last5days {
 color:white;
 font-weight:bold;
 margin-top:0px;
 white-space: nowrap;
 padding:0;
}
 
#activeregions {
  color:white;
 font-weight:bold;
 margin-top:0px;
 white-space: nowrap;
}

#solarimg {
  width: 90%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.righttwo #activeregions {
  flex-shrink: 0;
}

.righttwo #solarimg {
  flex: 1 1 0;
  min-height: 0;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}
 
.rightone {
  display:flex;
  flex-direction:column;
  align-items:center; 
}
.righttwo {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  justify-content: flex-start;
}
 
.red {
  color:red;
}
 
 
#fluxchart {
 width:100%; 
}
 
.xrayfluxtitle {
 display:flex;
 align-items:center;
 flex-shrink:0;
}
 
 .chartwrap {
   flex:1 1 auto;
  width: 100%;
  position: relative;
}
 
.l1 {
 box-shadow: 0 0 5px #DA3B02, 0 0 10px #DA3B02, 0 0 20px #DA3B02; 
 border: 2px solid #DA3B02;
}
 
.l2 {
 box-shadow: 0 0 5px #E9A202, 0 0 10px #E9A202, 0 0 20px #E9A202; 
 border: 2px solid #E9A202;
}
 
.l3 {
 box-shadow: 0 0 5px #0AB4B5, 0 0 10px #0AB4B5, 0 0 20px #0AB4B5; 
 border: 2px solid #0AB4B5;
}
 
.l4 {
 box-shadow: 0 0 5px #C29658, 0 0 10px #C29658, 0 0 20px #C29658; 
 border: 2px solid #C29658;
}
 
.l5 {
 box-shadow: 0 0 5px #7EB003, 0 0 10px #7EB003, 0 0 20px #7EB003; 
 border: 2px solid #7EB003;
}
 
.l6 {
 box-shadow: 0 0 5px #BC8F99, 0 0 10px #BC8F99, 0 0 20px #BC8F99; 
 border: 2px solid #BC8F99;
}
 
.joinus {
 margin: 0;
 color:white;
 font-weight:bold;
 font-size: clamp(8px, 1vw, 18px);
 white-space: nowrap;
 cursor:pointer;
}

.joinus:hover {
  color:red;
}
 
.bottom-image {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.bottom-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top;
    z-index: 0;
    position: fixed;
}
 
 
.maincontent2a {
  display:flex;
  flex-direction:column;
  flex:5;
  min-width: 0;
  align-items:center;
  border: 2px solid #ff0000;
  padding: 20px;
  background-image:url("cme.gif"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
 
 .maincontent2b {
  display:flex;
  flex-direction:column;
  flex:5;
  min-width: 0;
  align-items:center;
  border: 2px solid #ff0000;
  padding: 20px;
  background-image:url("blackout.gif"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
 
.mainpagi2 {
  
  flex:0.1;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center; 
  justify-content:center;
  background: linear-gradient(#000,#330000);
  border: 2px solid #ff0000;
  padding: 20px;
}

.rightone2 {
  display:flex;
  flex-direction:column;
  align-items:center; 
  background: #000;
  border: 2px solid #ff0000;
  padding: 20px;
  flex: 1;
  min-height: 25vh;
  overflow: hidden;
   background-image:url("magnetic.gif"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.righttwo2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  justify-content: flex-start;
  background: #000;
  border: 2px solid #ff0000;
  padding: 20px;
  flex: 1;
  min-height: 25vh;
   background-image:url("balls.gif"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
 
.sun-edit {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sun-edit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
 
.bottom-image2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none; /* stops it interfering with clicks */
}

.bottom-image2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
 
 .topbar2 {
  color:red;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(18px, 2.4vw, 48px);
  font-weight:bold;
  background: #000;
  border: 2px solid #ff0000;
  padding: 20px;
  -webkit-text-stroke:2px black;
  background-image:url("scale.gif"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat
}
 
 
 
 
 
 
  
  @media (max-width: 768px) {

  
   .maincontainer {
    gap: 12px;
  }

  .mainleft,
  .mainright {
    gap: 12px;
  }

   .rightone,
  .righttwo, .rightone2, .righttwo2 {
    height: 14vh;
    min-height: 80px;
    flex-shrink: 0;
    flex:1;
  }
  
  .righttwo, .righttwo2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
  
  .layout {
    flex-direction: column;
    height: auto;
    gap: 20px;
    top:20px;
  }

  .middle {
    order: 1;
    width: 100%;
  }

  .left,
  .right {
    order: 2;
    
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 12px;
    width: 100%;
  }

#solarimg {
  width: 90%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  min-width:0;
}

#activeregions {
  color:white;
 font-weight:bold;
 margin-top:5px;
 flex-shrink:0;
}

.joinus {
 margin: 0;
 color:white;
 font-weight:bold;
 font-size: clamp(10px, 1vw, 18px);
 white-space: nowrap;
}

.topbar {
  font-size: clamp(20px, 4vw, 48px);
}





}