/*DONT LOOK IN HERE. Im shy... T-T */

.css-text-style {
    text-align: center;
    font-variant: normal;
    text-indent: 10px each-line;
    color: #4f12de; /*text color*/
    text-shadow: #878ef1 2px 2px 1px, #e6939e 2px 2px 3px inset;
    font-family: "Verdana", "Rockwell", sans-serif;
    border: none; /*outline*/
    background-color: #c0b4f3;
    background-image: url(media/bg1.png);
    background-size: auto auto;
    font-size: 15px;
    line-height: 20px;
    padding: 1px; /*space within*/
    margin-left: 1px; /*space outside*/
    margin-right: 1px;
    margin-top: 1px;
    margin-bottom: 1px;
    width: 1500px;
    height: 2000px;
}
.write {
  color: #4f12de;
  text-shadow: #878ef1 1px 1px 1px, #e6939e 1px 1px 1px inset;
  text-align: left;
  text-overflow: ellipsis;
  text-wrap: wrap;
  text-decoration-color: #D1B4F3;
  font-variant: normal;
  text-indent: 25px each-line;
  font-family: "Verdana", "Rockwell", sans-serif;
  border: none;
  font-size: 15px;
  line-height: 20px;
  font-weight: 450;
  padding: 25px;
  margin: 1px;
}
.right {
  text-align: right;
  text-overflow: ellipsis;
  text-wrap: wrap;
  font-variant: normal;
  line-height: 20px;
  padding: 25px;
  margin: 1px;
}
.center {
  text-align: center;
  text-overflow: ellipsis;
  text-wrap: wrap;
  font-variant: normal;
  line-height: 20px;
  padding: 25px;
  margin: 1px;
}

.heading {
    text-align: center;
    font-style: italic;
    font-size: largest;
    font-family: "Rockwell", sans-serif;
    font-variant: petite-caps;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 25px;
    margin-bottom: 10px;
}
 .heading2 {
  text-align: center;
  text-shadow: #e6939e 2px 5px 2px inset, #878ef1 2px 5px 5px;
  text-decoration: none;
  font-size: 25px;
  font-family: "Rockwell", sans-serif;
  font-variant: petite-caps;
  font-style: italic;
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom: 30px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 10px;
  padding-bottom: 30px;
}

.navbar1 {
    grid-area: nav;
    text-align: center;
    width: 500px;
    height: 150px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 0px;
    margin-top: 1px;
    margin-left: 500px;
    margin-right: 500px;
    margin-bottom: 0px;
    border: 1px, solid, #A9BDEC;
    border-radius: 25px;
    background-color: #A9BDEC;
    box-shadow: #4f12de48 10px 15px 5px, #fff0f269 5px 5px 5px inset;
    box-sizing: border-box;
}
.navbar2 {
  grid-area: nav;
  text-align: center;
  width: 750px;
  height: 100px;
  padding: 20px;
  margin-top: 0px;
  margin-left: 350px;
  margin-right: 350px;
  margin-bottom: 0px;
  border: 1px, solid, #a9bdec;
  border-radius: 25px;
  background-color: #a9bdec;
  box-shadow: #4f12de48 10px 15px 5px, #fff0f269 5px 5px 5px inset;
  box-sizing: border-box;

}
.navlink {
  font: inherit;
  color: inherit;
  text-decoration: none;
  text-shadow: #e6939e 2px 5px 2px inset, #3733E5 2px 2px 5px;
}
.navlink:link {
  text-decoration: none;
  font-weight: bold;
  color: #4f12de;
  text-shadow: #e6939e 2px 2px 2px inset, #878ef1 2px 2px 5px;
}
.navlink:active {
  color:#ff8e8e;
  text-shadow: #fac5cc 1px 1px 1px inset, #3733E5 1px 1px 1px;
}

.contain1 {
  display: grid;
  grid-template-areas: "main right";
  grid-template-columns: 500px auto;
  overflow: hidden;
  margin: 1px;
  padding: 1px;
  border: none;
  width: 100%;
  height: 100%;
}
.contain2 {
  background-color: #a9bdec;
  border: 1px solid #a9bdec;
  border-radius: 25px;
  margin: 1px;
  padding: 1px;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.centerbar {
  display: block;
  grid-area: main;
  text-align:left;
  text-indent: 20px each-line;
  font-variant: normal;
  font-family: "MV Boli", cursive;
  width: 900px;
  margin-left: 250px;
  margin-right: 250px;
  margin-top: 0px;
  margin-bottom: 30px;
  padding-top: 60px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  border: 1px, solid, #A9BDEC;
  border-radius: 25px;
  background-color: #CCFFF1;
  box-shadow: #4f12de48 10px 15px 5px, #fff0f2 3px 5px 5px inset;
  justify-content: normal;
  align-items: anchor-center;
}

.sidebar {
  display: block;
  grid-area: right;
  float: right;
  position: static;
  overflow: hidden;
  width: 200px;
  height: fit-content;
  text-align: center;
  font-size: smaller;
  color:#4f12de;
  background-color: #ccfff1;
  font-variant: petite-caps;
  font-family: "Comic Sans MS", cursive;
  border: 1px, solid, #fff0f2;
  border-radius: 25px;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-right: 1px;
  margin-left: 710px;
  padding: 5px;
  box-shadow: #4f12de48 10px 15px 5px, #fff0f269 3px 5px 5px inset;
  align-items: anchor-right;
}

.link {
  color: #ff8e8e;
}

.details {
  text-align: left;
  color: #CCFFF1;
  margin: 75px;
  padding: 10px;
  border:#4f12de 1px;
  border-radius: 25px;
  box-sizing:border-box;
  background-color: #4f12de;
  background-image: linear-gradient(to right, #8b8ad679 20%,  #4f12de 40%, #4f12deaf 40%);
  cursor: pointer;
  justify-content: normal;
  align-items: anchor-center;
  overflow: clip;
  box-shadow:#8b8ad6 2px 5px 5px inset, #878ef175 2px 5px 2px;
}
.summary {
  display: flex;
  font-family: "Comic Sans MS" cursive;
  font-style: bold;
  justify-content: space-between;
  align-items: center;
  list-style-position: outside;
}
.summary:after {
  content: ""; /*Details Marker v*/
  border: solid;
  border-width: 5px 5px 5px 5px; /*Details Marker v Shape*/
  display: inline-block;
  padding: 2.5px; /*Details Marker v Size*/
  margin: 20px;
  transition: 0.5s;
  transform: rotate(45deg);
}
/*Dropdown Menu Animation Startpoint*/
.details::details-content {
  display: block;
  block-size: 1px;
  transition-property: 1px block-size, content-visibility;
  transition-duration: 0.2s;
  transition-behavior: normal;
}
.details[open]::details-content {
  block-size: auto;
  block-size: calc-size(auto);
  padding: 20px;
  margin: 5px;
  color: #4f12de;
  background-color: #CCFFF1;
  background-image: linear-gradient(to right, #d1b4f354 20%, #ccfff1 80%);
  border: #4f12de 5px;
  border-radius: 25px;
  box-shadow: #ff8e8e 2px 2px 5px inset, #ff8e8e 2px 2px 5px;
}
/*Dropdown Menu Animation Endpoint*/
.details[open] > summary:after { /*Details Marker v Animation*/
  transform: rotate(-180deg);
}

.link:link {
text-decoration: none;
color: #e98282;
}
.link:active {
  color:#ff7979;
}
.link:hover {
  color: #ff8e8e;
}

.button1 {
  appearance: button;
  background-color: #8b8ad6;
  background-image: linear-gradient(180deg, #d1b4f379, #878ef1);
  border: 1px solid #8b8ad6;
  border-radius: 25px;
  box-shadow: #7700ff7e 0 1px 0 inset,#3733E5 0 2px 2px;
  box-sizing: border-box;
  color: #4f12de;
  cursor: pointer;
  display: inline-block;
  font-family: cursive;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.9;
  margin: 3px;
  padding: 10px 20px;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.button1:hover {
  border-color: #3733E5;
}
/*Button Animation Startpoint*/
.button1:focus {
  background-color: linear-gradient(#f3aeb8, #f0697b);
  background-image: none;
  color: #fc8383;
  border-color: #3A38AE;
  box-shadow: #2e3650 0px 3px 5px inset;
}
.button1:active {
  background-color: linear-gradient(#ff9fac, #ff4c64);
  background-image: none;
  color: #f8c4c4;
  border-color: #3A38AE;
  box-shadow: #2e3650 0px 3px 5px inset;
}
.button1:active:focus {
  box-shadow: #3633e57a 0px 3px 5px inset, #fff0f269 1px 1px 1px;
}
/*Button Animation Endpoint*/

.badges {
  display: block;
  float: right;
  text-align: right;
  border: none;
  height: 200px;
  width: 300px;
  margin: 20px;
  margin-right: 50px;
}
.image {
  background-image: url(media/me.png);
  height: 200px;
  width: 200px;
  margin: 20px;
  margin-left: 50px;
  display: inline-block;
  transition: 2s;
}
.image:hover {
  transform: rotate(720deg);
}

.column {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  column-count: 3;
  column-rule-width: 1px;
  column-rule-style: dotted;
  column-rule-color: rebeccapurple;
  grid-gap: normal;
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  padding-right: 1px;
  border: none;
  align-items: normal;
  overflow: auto;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #6c4e94af;
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin-left: 640px;
  margin-right: 500px;
  margin-bottom: 500px;
  margin-top: 100px;
  padding: 20px;
  height: 450px;
  width: 450px;
  background: #ccfff1;
  border: #878ef1 10px;
  border-radius: 25px;
  position: static;
  transition: all 5s ease-in-out;
  box-shadow: #4f12de80 3px 5px 5px, #ffbaba7e 1px 5px 5px inset;
}

.popup h2 {
  margin-top: 0;
  color: #ff8e8e;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: all 200ms;
  font-size: 50px;
  font-weight: bold;
  text-decoration: none;
  color: #4f12de;
}
.popup .close:hover {
  color: #f0697b;
}
.popup .content {
  max-height: fit-content;
  overflow: scroll;
}

.footer {
  font-family:cursive;
  text-align: center;
  font-size: 12px;
  line-height: 8px;
  border: none;
  margin: 1px;
  padding: 1px;
}