:root{
  --base:#f7f5f5;
  --bgimg: url(bg.webp);
  --textcolor:#532635;
  --bordercolor:#571d64;
}

.darkmode{
  --base:#281e37;
  --bgimg: url(darkbg.webp);
  --textcolor: #e3d3d8;
  --bordercolor:#801578;
}

@font-face {
      font-family: "pixel";
      src: url("https://files.catbox.moe/i1y2x0.woff");
    }

@font-face {
    font-family: 'PIXEL Arial 14';
    font-style: normal;
    font-weight: 400;
    src: local('PIXEL Arial 14'), url('https://fonts.cdnfonts.com/s/122367/pixel-arial-14.woff') format('woff');
}

.nunito {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

.pixel {
  font-family: "pixel";
}

.grid-container {
  display: grid;
  grid-template-areas:
    "col1"
    "col2";
}

#g1 {
  grid-area: col1;
}

#g2 {
  grid-area: col2;
  height: 200px;
}

#navbox{
  width: 60%;
  margin: auto;
  margin-bottom: 30px;
  background-image: linear-gradient(to bottom, #a73fa4,#a73fa4,#551a53);
  border-radius: 10px;
  border: 2px outset #6e756a;
  }
 
#navbox ul{
margin: 0;
padding: 10px;
text-align: center;
}
 
#navbox li{
list-style-type: none;
display: inline;
font-size: 25px;
margin: 10px;
}

#navbox a{
color:#fffffe;
 transition: 0.22s ease;
}


*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body{
background-image: var(--bgimg); 
background-repeat: repeat-y;
background-size: cover;
font-family: "pixel";
font-size: 21px;
color: var(--textcolor);
margin: 0%;
position:relative;
}

.container{
display: flex;
flex-direction: row;
gap: 1rem;
max-width: 850px;
margin: 0 auto;

}

.imgwrapper{
display: flex;
flex-grow: 1;
flex-basis: 0;
}

.img{
align-self: center;
width: 100%;
min-width: 200px;
}

.memberimg{
  width: 200px;
  height: 200px;
}

.main{
display: flex;
flex-direction: column;
flex-grow: 3;
flex-basis: 0;
justify-content: space-between;
gap: 1rem;
}

.box{
display: flex;
gap: 0.5rem;
padding-bottom: 10px;
}

.boxinside{
display: grid;
grid-template-columns: auto auto;
padding: 5px;
column-gap: 18px;
}

.boxinside4{
display: grid;
grid-template-columns: auto auto auto auto;
}

.boximg{
align-self: center;
width: 200px;
position: relative; right: 67px; top: 40px;
}

.boximgright{
align-self: center;
width: 200px;
position: relative; right: -50px;
}

.logoimg{
align-self: center;
width: 200px;
position: relative;
right: -330px; bottom: -40px;
filter: drop-shadow(2px 0px 0px var(--base)) 
          drop-shadow(-2px 0px 0px var(--base)) 
          drop-shadow(0px 2px 0px var(--base)) 
          drop-shadow(0px -2px 0px var(--base));
}


@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-7deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

.logoimg:hover {
  animation: wiggle 0.3s ease-in-out;
  display: inline-block; 
}

.content{
flex-grow: 6;
flex-basis: 0;
min-width: 240px;
background: var(--base);
border: 3.7px outset var(--bordercolor) ;
justify-content: center;
padding: 1rem;
text-align: justify;
text-justify: inter-word;
line-height: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
box-shadow: 0px 0px 7px 2px #0000004d;
border-radius: 10px;
image-rendering: pixelated;
}

li.content{
margin-left:100px; 
}

.headers{
font-size: 35px;
text-align: right;
font-weight: bold;
font-family: 'PIXEL Arial 14', sans-serif;
letter-spacing: 1.9px;
border-bottom: 2px dotted var(--textcolor);
}

a{
text-decoration: none;
color:var(--textcolor);
}

a:visited{
color: #903643;
}

a:hover{
font-style: bold;
}

a.biglink{
  display: inline-block;
  text-decoration: none;
  transition: 0.22s ease;
  background-color: #551a53;
  border: outset 2px;  
  padding: 3.2px;
  border-radius: 3px;
}

.biglink:hover {
  transform: scale(1.1); 
  text-shadow: 0 5px 10px #00000026;
}

a.downloadlink{
  display: inline-block;
  font-size: 34px;
  transition: 0.22s ease;
  color:#fffffe;
  background-color: #551a53;
  border: outset 2px;  
  padding: 3.2px;
  border-radius: 3px;
}

.downloadlink:hover {
  transform: scale(1.1); 
  text-shadow: 0 5px 10px #00000026;
}

.floatinglink {
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  transition: 0.22s ease;
}

.floatinglink:hover {

  transform: translateY(-2.6px); 
  text-shadow: 0 5px 10px #00000026; 
}

a:active{
font-weight: bold;
}

::-webkit-scrollbar{
width: 4px; 
}
    
::-webkit-scrollbar-track{
background-color: var(--base);
}

::-webkit-scrollbar-thumb{
background-color: #A8E22A;
}

#credit{
font-size: 13px;
position: fixed;
bottom: 0px;
right: 0;
}

@media(max-width:730px){  
.box img{
display: none;
}
}

@media(max-width:515px){
.container{
flex-direction: column;
}

.img{
width: 40%;
min-width: 40%;
margin: 0 auto;
box-shadow: 0px 0px 7px 2px #0000004d;
}

}
  
#themeswitch{
  height:40px;
  width: 40px;
  padding: 0;
  border: none;
  outline: none; 
  background: transparent;
  margin-left: 0px;
  display: flex;
   transition: transform 0.2s ease;
   cursor: pointer;
   position:absolute;
   top:133px; right:330px;
}

#themeswitch svg{
  fill: #f4eeee;
}

#themeswitch:hover {
  transform: scale(1.1); 
  filter:drop-shadow(0px 0px 3.5px #ffffffd5);
}

#themeswitch svg:last-child{
  display:none;
}

.darkmode #themeswitch svg:first-child{
  display: none;
}

.darkmode #themeswitch svg:last-child{
  display:block;
}