/*Mentally challenged hacky code that somehow made me include Nammur over just having Omega*/
/*Also, credits to Emma Essex for the sauce code for the main area border stuff as I liked her effects on her back-catalog page*/
mascot{ /*Controls the very top of the main content on index.html only. Encompasses tab-border and tab.*/
  margin:40px auto -145px;
  padding:5px;
  width:75%;
  min-height:400px;
  display:flex;
  justify-content:right;
}
.popout{
  width:350px;
  height:350px;
  z-index:5;
}
Omega{
  position:absolute;
  left:240px;
  top:183px;
  z-index:5;
  width:350px;
}
Omega img{
  position:absolute;
  top:0;
  left:0;
}
.OmegaCover{
  animation: OmegaCover 15s linear infinite;
}
@keyframes OmegaCover{
  0%{filter:opacity(0);}
  50%{filter:opacity(.33);}
  100%{filter:opacity(0);}
}
Nammur{
  position:absolute;
  right:190px;
}
.icons{
  height:50px;
  vertical-align:middle;
  margin:0 7px;
}

tab-border, tab{ /*Tab-border and tab essentially do the same thing as main-border and main, but are meant for the index page only. Mini versions for the little thumbbox of info at the top of index.*/
  border-radius:20px 20px 0 0;
}
tab-border{
  position:absolute;
  left:520px;
  height:290px;
  width:calc(100% - 1000px);
  border-radius:20px 20px 0 0;
  z-index:-1;
  background: white;
  padding:5px;
  box-shadow: 5px 5px 10px 0 #221133;
}
tab{
  position:absolute;
  left:520px;
  z-index:0;
  height:300px;
  width:calc(100% - 1000px);
  border-radius:20px 20px 0 0;
  margin:5px;
  background-color:#222222;
  text-align:justify;
  overflow:hidden;
}
tabinfo{
  position:absolute;
  top:220px;
  left:510px;
  z-index:5;
  width:calc(100% - 1000px);
}
tabinfo ul{
  padding-left:60px;
  text-align:left;
}

contacts{
  display:flex;
  flex-direction:row;
  min-height:75px;
  align-items:center;
  justify-content:center;
  margin:-10px 5px 5px;
}
contacts * img{
  width:auto;
  height:50px;
  margin:4px 5px 5px;
  border-radius:12px;
  transition-timing-function:ease;
  transition-duration: 0.3s;
}
contacts a:hover{
  cursor:pointer;
}
contacts a:hover > img{
  height:60px;
}
contacts span{
  font-size:32px;
  font-weight:900;
  margin:8px;
}
.maininfo{
  margin-top:60px;
}
sonas{
  min-height:200px;
  width:75%;
  display:flex;
  margin:0 auto;
  position:relative;
  justify-content: center;
}
sonas-border-left, sonas-border-mask-l, sonas-border-right, sonas-border-mask-r{
  position:absolute;
  min-height:inherit;
  width:100px;
}
sonas-border-left, sonas-border-right{
  border-top:5px solid white;
  border-bottom:5px solid white;
  z-index:8;
}
sonas-border-left{
  left:0px;
  border-right:5px solid white;
  border-radius:0 20px 20px 0;
  margin:-5px -5px -5px 10px;
}
sonas-border-right{
  right:0px;
  border-left:5px solid white;
  border-radius:20px 0 0 20px;
  margin:-5px 10px -5px -5px;
}
sonas-border-mask-l, sonas-border-mask-r{
  border-top:5px solid #222222;
  border-bottom:5px solid #222222;
  z-index:7;
}
sonas-border-mask-l{
  left:0px;
  border-right:20px solid #222222;
  border-radius:0 20px 20px 0;
  margin:-5px -5px -5px 10px;
}
sonas-border-mask-r{
  right:0px;
  border-left:20px solid #222222;
  border-radius:20px 0 0 20px;
  margin:-5px 10px -5px -5px;
}
sonas-bg{
  position:absolute;
  min-height:210px;
  width:calc(100% - 220px);
  background-color:#222222;
  z-index:7;
  margin-top:-5px;
}
.footer{
  min-height:40px;
  padding:5px;
  width:140px;
  min-width:100px;
  position:relative;
  z-index:10;
}
main-border.footer{
  margin-top:-60px;
  box-shadow: 0 0 20px 0 #221133;
}
main.footer{
  display:flex;
  justify-content: center;
  align-items:center;
}
.my8831{
  border-radius:10px;
}
main-border.my8831{
  animation: my8831-gradient-border 5s ease infinite;
  transition-timing-function: ease;
  transition-duration: 0.3s;
}
@keyframes my8831-gradient-border {
  0% {background-color:#6f3}
  25% {background-color:#bbb}
  50% {background-color:#ee4}
  75% {background-color:#bbb}
  100% {background-color:#6f3}
}
main.my8831{
  flex-direction:column;
}
#txta:checked + textarea{
  display:block;
}
textarea{
  display:none;
  width:130px;
  max-width:130px;
  max-height:200px;
}
main-border.marq8831{
  margin-top:20px;
  width:60%;
}
main.marq8831{
  width:100%;
}
marq{ /*chatgpt was consulted for this*/
  width: auto;
  overflow: visible;
  white-space: nowrap;
  animation: marquee 15s linear infinite;
  display:inline-flex;
  vertical-align:middle;
  justify-content:center;
}
marq:hover{
  animation-play-state:paused;
}
@keyframes marquee {
  0%   { transform: translate(100%); }
  100% { transform: translate(-100%); }
}
marq span{
  font-size:12px;
  transform:scaleY(calc(31 / 14));
  position:relative;
  top:23px;
}
marq *{
  margin-right:3px;
}

.t1{
  width:200px;
  height:450px;
  position:absolute;
  top:-220px;
  left:0px;
  z-index:12;
}
.t2{
  width:200px;
  height:450px;
  position:absolute;
  top:-220px;
  right:0px;
  z-index:12;
}