* {
  box-sizing: border-box;
}

@media screen and (max-width:600px) {
  div.grid-container {
    flex-direction: column
  }
  ul.topnav li.right, 
  ul.topnav li {float: none;}
}   

:root {
    --link:#542179;
}

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--background);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

header {
  background-color: #eed4ff;
  background-size: cover;
  border: 2px solid #a36dc9; 
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 25px;
  max-width: 900px;
}

a {
  color: rgb(95, 63, 121);
  font-weight: bold;
}

li {
text-align: left;  
}


header li{
margin: 10px;
text-decoration: none;
text-align: left;
}


header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: small;
}

header ul li {
  float: left;
  margin: 0px;
}

header ul li a{
  display: block;
  color: #8041ac;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

header ul li a:hover {
  color: #572c76;
  background-color: #c5acff;
  border-radius: 10px;
}



/*DROPDOWN*/

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: #8041ac;
  padding: 14px 16px;
  background-color: inherit;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: small;
  font-weight: bold;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  color: #572c76;
background-color: #c5acff;
border-radius: 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #e3d6ff;
  border-radius: 10px;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #8041ac;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #c5acff;
  border-radius: 10px;
}

.show {
  display: block;
}

/*end dropdown*/


details {
background-color: #ccc4e7;  
max-width: 500px; 
border-radius: 10px 10px 10px 10px;
display: flexbox; 
justify-content: center;
margin: auto;
margin-top: 5px;
}

.wall {
background-color: #ccc4e7;  
max-width: 1000px; 
border-radius: 10px 10px 10px 10px;
border-style: double;
display: flexbox; 
justify-content: center;
margin: auto;
margin-top: 5px;  
}

.ids {
background-color: #ccc4e7;  
max-width: 200px; 
border-radius: 10px 10px 10px 10px;
display: flexbox; 
justify-content: center;
margin: auto;
margin-top: 5px;
}

summary {
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

hr {
border-style: dashed;
border-color: #1a0739;
width: 500px;  
}


footer p {
margin: 10px;  
}

body{
  background-image: url(../images/background2.gif);
background-color: #c5acff;
color: #542179;
font-family: Arial;

}

.box {
  background-color: #eed4ff;
  border: 2px solid #542179;
  border-style:solid;
  border-radius: 10px;
  padding: 5px;
  margin: 1px;
  height: fit-content;
  text-align: center;
  ;
}

.box2 {
  background-color: #ffffff;
  border: 2px solid rgb(84, 33, 121);
  border-style:solid;
  border-radius: 10px;
  position: relative;
  padding: 5px;
  margin: 1px;
  height: fit-content;
  width: 900px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  ;
}

.boxwide {
  background-color: #ffffff;
  border: 2px solid rgb(84, 33, 121);
  border-style:solid;
  border-radius: 10px;
  position: relative;
  padding: 5px;
  margin: 1px;
  height: fit-content;
  width: 1200px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  ;
}



.footer {
  background-color: #ffffff;
  border: 2px solid rgb(84, 33, 121);
  border-style:solid;
  border-radius: 10px;
  padding: 0px;
  margin: 1px;
  margin-top: 10px;
  height: fit-content;
  width: 900px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  ;
}

.cover {
margin: auto;
max-height: 750px;  
position: absolute;
left: 180px;
top: 110px;
pointer-events: none;
}

.grid-container {
  display: grid;
  flex-direction: row;
  grid-template-areas: "col1 col2 col3"; 
   grid-template-columns: 250px 400px 250px;
 justify-content: center;
 display: flexbox;
}

.status {
background-color:#dbccff;  
}



#g1 {
  grid-area: col1;
  text-align: left;
  height: 450px;
}

#g2 {
  grid-area: col2;
  overflow-y: scroll;
  text-align: left;
  height: 450px;
}

#g3 {
  grid-area: col3;
  overflow-y: scroll;
  height: 450px;
}

#g4 {
  overflow-y: scroll;
  height: 200px;
  grid-area: col1;
}

#g5 {
  overflow-y: scroll;
  height: 200px;
}

#g6 {
  overflow-y: scroll;
  height: 200px;
}

.grid-containerabout {
  display: grid;
  grid-template-areas: "col1 col2 col3"; 
   grid-template-columns: 250px 400px 250px;
   justify-content: center; 
   display: flexbox;
}

#profilepic {
  grid-area: col1;
  margin-top: 150px;
  border-radius: 70px;
}


#about {
  grid-area: col2;
  height: 350px;
  overflow-y: scroll;
}

#interests{
  grid-area: col3;
  overflow-y: scroll;
  max-height: 700px;
}

#website{
  grid-area: col2;
  overflow-y: scroll;
  max-height: 350px;
  margin-top: 350px;
}

 #none{
  grid-area: col1;
  max-height: 350px;
  margin-top: 0;
  display: none;
}

.float{
float: left;  
}

.grid-containerpage {
  display: grid;
  grid-template-areas: "col1"; 
   grid-template-columns: 900px;
   justify-content: center; 
   display: flexbox;
}

.grid-containerlinks {
  display: grid;
  grid-template-areas: "col1 col2"; 
   grid-template-columns: 450px 450px;
   justify-content: center; 
}
.grid-containerlinks2 {
  display: grid;
  grid-template-areas: "col1 col2"; 
   grid-template-columns: 900px;
   justify-content: center; 
   display: flexbox;
}

.welcome {
max-width: 900px;
margin: auto;  
margin-top: 50px;
align-items: center;
}

.welcomeimg {
position:absolute;
left: 80px;
top: 70px;
}
.enter {
font-size: x-large;
border-radius: 10px;  
border-color: #1a0739;
border-style: dotted;
color: #1a0739;
background-color: #a594d8;
text-decoration: none;
}

#g11 {
  grid-area: col1;
  height: 300px;
 overflow-y: scroll;
}

#g12 {
  grid-area: col2;
  height: 300px;
 overflow-y: scroll;
}

@media screen and (max-width: 1200px){
 .welcomeimg {
 display: none;
}    
}

@media screen and (max-width: 1200px) {
.cover {
max-height: 750px;  
position: absolute;
left: -10px;
top: 110px;
}
}

@media screen and (max-width: 900px) {
.cover {
max-height: 750px;  
position: absolute;
left: -150px;
top: 110px;
}}

@media only screen and (max-width: 600px){

.grid-container{
    size: 100%;
    size-adjust: 100%;
    display: flex;
    flex-direction: column;
  }

  .grid-containerabout{
    size: 100%;
    size-adjust: 100%;
    display: flex;
    flex-direction: column;
  }

  .grid-containerlinks{
    size: 100%;
    size-adjust: 100%;
    display: flex;
    flex-direction: column;
  }
  .grid-containerlinks2{
    size: 100%;
    size-adjust: 100%;
    display: flex;
    flex-direction: column;
  }

  .grid-containerpage{
    size: 100%;
    size-adjust: 100%;
    display: flex;
    flex-direction: column;
  }

  .cover {
  display: none;  
  }

  .gallery{
    size: 100%;
    size-adjust: 100%;
    display: flex;
    flex-direction: column;
  }

  #profilepic {
  margin-top: 0px;
  border-radius: 10px;
}

 #about {
  grid-area: col2;
  height: 350px;
  overflow-y: scroll;
}

 #interests{
  grid-area: col3;
  overflow-y: scroll;
  max-height: 350px;
}

 #website{
  grid-area: col2;
  overflow-y: scroll;
  max-height: 350px;
  margin-top: 0px;
}

 #g3 {
 height: fit-content; 
 }

  
   .box {
  width: 100%;  
  }

  .box2{
  width: 100%;  
  }

  .boxwide {
  width: 100%;  
  }

  .footer {
  width: 100%;
  }
   
  .grid-container{
  width: 100%;  
  }
}

/*tabs/
/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
  height: fit-content;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: #d2bdff;
  color: #1a0739;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 33%;
}

.tablink:hover {
  background-color: #a594d8;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: #1a0739;
  display: none;
  padding: 100px 20px;
  height: 100%;
}


/*Hover Zoom*/

.zoom{
  transition: transform .2s;
   /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

}
.zoom:hover {
  transform: scale(1.5);
 
}

/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ezgallery.montage img {
  flex: auto;
  margin: 10px ;
  object-fit: contain;
  object-position: bottom;
}

.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  object-position: bottom;
}

.thumb {
max-width: 300px;  
max-height: 300px;
}

figcaption {
max-width: 300px;  
margin: 5px;
padding: 5px;
text-align: center;
margin: auto;
}

#image {
border: #270e38;
margin: 10px;
border-style: solid; 
border-radius: 10px;
}

#image:hover {
border: #270e38;
margin: 10px;
border-style: dashed;  
}

/*FILTERING*/

.filter {
display: none;    
}


/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  color: #1a0739;
  text-decoration: none;
  font-weight: bold;
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #eec3ff00;
  cursor: pointer;
  border-radius: 10px;
  margin-bottom: 10px;
  font-family: monospace;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #c092ec;
}