/* Page Formating */

html {
  scroll-behavior: smooth;
  padding: 0%;
  margin: 0%;


  background-color: #ebd8f0;
  background-size:cover;
  background-position: center;
  background-attachment:fixed;
}

* {
  font-family: "Lato", sans-serif;
  overflow-x:clip;
  text-align: center;
  max-width: 100%;

  word-wrap: break-word;
  word-break: break-word;
  /*color: #000b18;*/
}

.monospace {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

body{

    padding: 0%;
    margin: 0%;

    color:#20002a;
}
/* Text Formatting */

h1{
    text-align: center;
    font-weight: bold;
    width:100%;
  font-size:3em;
    display: inline-block;
}

p {
  font-size: 125%;
}


a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
  font-size: larger;
}

nav {
  position: sticky; 
  top: 0px; 
  background-color: #c268e3da; 
  z-index: 100; 
  min-width: 100%;
  
  opacity: 0;
}


.pad {
  padding:3%
}

.padSevere {
  padding:10%
}

.headerIcon {
    width: auto;
    height: auto;
    max-width: 35%;
    align-self: center;
}

.headerLink {
  font-size: 120%;
}


/* Other Formating */

.buttonTemplate {
  background-color:#20002a;
  border-color: #f5d3ff;
  border-width:auto;
  border-radius: 10px 10px;
  padding:2%;

  transition: 200ms;

  font-family: "Lato", sans-serif;
  font-weight: bold;
  color: #EBF2F9;
}

.buttonTemplateSmaller {
  background-color:#20002a;
  border-color: #20002a;
  border-width:auto;
  border-radius: 50% 50%;
  padding:0.2%;

  transition: 200ms;

  font-family: "Lato", sans-serif;
  font-weight: bold;
  color: #EBF2F9;
}

.rounded{
  border-radius: 10px;
}

.buttonTemplateLighter {
  background-color:#066aab;
  border-color: #EBF2F9;
  border-width:auto;
  border-radius: 10px 10px;
  padding:1%;

  transition: 200ms;

  font-family: "Lato", sans-serif;
  font-weight:bolder;
  color: #EBF2F9;
}

.buttonTemplate:hover{
  background-color:#510069;
}

.buttonTemplateLighter:hover{
  background-color:#510069;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;

  align-items:center;
  margin-left:0%;
  flex-direction:row;
}

.small{
  width:60%;
  align-self: center;
}

.icon{
  max-width: 10%;
}

.curvy{
  border-radius: 25px 25px;
}

.restricted40{
  max-width: 40%;
  justify-self: center;
  align-self: center;
}

.restricted40r{
  max-width: 40%;
  justify-self: center;
  align-self: center;
  margin-left: 60%;
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
    align-items: center;
  }

  .small{
    width:80%;
  }

  .icon{
    max-width: 30%;
  }

  .flex-child {
    margin-left:0%;
  }  

  .flex-container-small {
    flex-direction: column;
  }

  .restricted40{
    max-width: 100%;
  }
  .restricted40r{
    max-width: 100%;
    margin-left: 0px;
  }

  div.centerBlue {
    padding:2%;
    margin-top:10%;
    max-width: 100%;
  }
}

.flex-container-small {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  

  align-items:start;
  flex-direction: row;
  width: 80%;
  margin:auto;
}

.flex-child {
  margin-left:1%;
  justify-content: left;
  flex:1;
  flex-grow: 1;
  padding:1%;
  width:100%;
}  

div.centerBlue {
  background-color: #20002a;
  border-radius: 40px 40px;
  position: relative;

  padding:5%;

  color:#EBF2F9;

  
  max-width: 100%;

  margin-top:5%;
  margin-bottom: 5%;
  margin-left: 10%;
  margin-right: 10%;

  z-index: 1;
}

div.centerBlueSmall {
  background-color: #20002a;
  border-radius: 40px 40px;
  position: relative;

  padding:5%;

  color:#EBF2F9;

  height: auto; 
  max-width: 30%; 

  margin:auto; 
  margin-top: 5%;
  margin-bottom: 5%; 
}

div.centerBlueGrad {
  background-color: #20002a;
  border-radius: 40px 40px;
  position: relative;

  padding:5%;

  height: fit-content; 
  max-width: 30%; 

  margin:auto; 
  margin-top: 5%;
  margin-bottom: 5%; 

  background-image: linear-gradient(35deg, #9b959d, #20002a);
  background-size: 650% 100%;
  transition: 1s;
}

div.centerBlueGrad:hover {
  background-position: 100% center;
  color: white;
}

div.centerBlueGradWide {
  background-color: #20002a;
  border-radius: 40px 40px;
  position: relative;

  padding:5%;

  height: fit-content; 
  width: 70%; 

  margin:auto; 
  margin-top: 5%;
  margin-bottom: 5%; 

  background-image: linear-gradient(35deg, #9b959d, #20002a);
  background-size: 650% 100%;
  transition: 2s;
}

div.centerBlueGradWide:hover {
  background-position: 100% center;
  color: white;
}

.hoverEffect{
  transition: 0.5s;
  border-radius: 20px 20px;
}

.hoverEffect:hover {
  background-color: #20002a;

}

.hoverEffectGrad{
  background-image: linear-gradient(35deg, #20002a, #9b959d);
  color:#EBF2F9;
  background-size: 650% 100%;
  transition: 1.5s;
}

.hoverEffectGrad:hover{
  background-position: 100% center;
  color: #002249;
}

.hoverEffectPale{
  transition: 0.8s;
  border-radius: 20px 20px;
}

.hoverEffectPale:hover {
  background-color: #20002a;
  color:#ebd8f0;
}


.popup:hover{
  background-color:#20002a;

  transition: 0.2s;
  border-radius: 20px 20px;
}

.left{
    text-align: left;
}

.right{
    text-align: right;
}


/* MOBILE SPECIFIC */


/* FONTS */

.lato-thin {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .lato-light {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .lato-black {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .lato-thin-italic {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .lato-light-italic {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .lato-regular-italic {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .lato-bold-italic {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .lato-black-italic {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: italic;
  }