html{
  scroll-behavior: smooth;
  
}
.main{
  overflow: auto;
}
body {
  background-color:black;
  overflow-x: hidden;
}
.para{
  color: linen;
  font-size: 1.34rem;
  text-align: center;
  font-family: 'PT Sans', sans-serif;;
}
.splitc {
  height: 50%;
  width: 100%;
  position: fixed;
}
.top {
  top: 0;
  background-color: transparent;
}
.bottom {
  bottom: 0;
  background-color: transparent;
}

.frontpage1{
  color: rgb(255, 255, 255);
  font-size: 3.0rem;
  text-align: center;
  font-family: 'Rubik', sans-serif;
}
.frontpage1a{
  color: rgb(255, 255, 255);
  font-size: 2.33rem;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
.frontpage2{
  color: rgb(200, 245, 0);
  font-size: 1.67rem;
  text-align: center;
}


.icons {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-direction: row;
  font-size: 2.4rem;
  gap: 0.67rem;
  justify-content: center;
  color: whitesmoke;
}

.icons a:hover {
  color: rgb(189, 189, 189);
  transition: ease-in 170ms;
  cursor: pointer;
}


.containermain {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;

}
.container {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-direction: row;
  gap: 0.65rem;
  justify-content: center;
  overflow-x: hidden;}
.container2 {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  bottom: 0;
  flex-direction: row;
  gap: 1.34rem;
  justify-content: center;
  overflow-x: hidden; 
}

.lol{
  height: 40vh;
  width: 20vw;
  border-radius: 50%;
}

#time{
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;  
}

.container button{
  background-color:black;
  color: white;
  border: none;
  font-family: 'Roboto Mono', monospace;
  font-size: 1rem;
  border-radius: 1rem;
  width: 5rem;
  white-space: nowrap;
}
.container button:hover{
  background-color:gray;
  color: black;
  transition: ease-in 170ms;
  cursor: pointer;
  border: none;
  font-family: 'Roboto Mono', monospace;
  border-radius: 1rem;
}

*{
  margin: 0.5vh;
  padding: 0;
}

.xyz{
  height: 100%;
  width: 35%;
}



@media only screen and (max-width: 750px)
{ 
  .container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: row;
    gap: 0rem;
    align-items: center;
    overflow-x: hidden;}
  .container2 {
    display: flex;
    bottom: 0;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    overflow-x: hidden; 
  }
  .icons {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 2.4rem;
    color: whitesmoke;
    word-spacing: 0.6rem;
    align-items:center;
    overflow-x: hidden;

  }
  .lol{
    height: 15vh;
    width: 20vw;
    border-radius: 50%;
  }
  #time{
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:80%;  
}
}