mystyle.css

.header
{
    background-color: black;
    color: #fff;
    font-family: 'Pangolin', cursive;
    font-size: 1rem;
    text-align: center;
    overflow: auto;
    width: 100vw;
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px dodgerblue, 0 0 20px dodgerblue, 0 0 25px dodgerblue, 0 0 30px dodgerblue, 0 0 35px dodgerblue;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px dodgerblue, 0 0 40px dodgerblue, 0 0 50px dodgerblue, 0 0 60px dodgerblue, 0 0 70px dodgerblue;
  }
}

nav
{
  width: 100vw;
}

nav a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0d9797;
}

li {
    float: left;
    border-right:1px solid #bbb;
    font-family: 'Pangolin',cursive;
    font-size: 1rem;
  }
  
  li:last-child {
    border-right: none;
  }
  
  li a {
    display: block;
    color: dodgerblue;
    background: rgb(0, 0, 0);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a.active
  {
    background-color:dodgerblue;
    color: black;
  }
  
  .hvr-reveal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
  }
  .hvr-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-color: dodgerblue;
    border-style: solid;
    border-width: 0;
    -webkit-transition-property: border-width;
    transition-property: border-width;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .active.hvr-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-color: black;
    border-style: solid;
    border-width: 0;
    -webkit-transition-property: border-width;
    transition-property: border-width;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-width: 4px;
  }
  
html, body 
{
    width: 100%;
    height:100%;
    font-size: 100%;
}

pre 
{
  white-space: pre-wrap;
  word-break: keep-all
}
  
#home_bg
{
      background: linear-gradient(-45deg, orange, #85bb85, #2376d5, #d523a0);
      background-size: 400% 400%;
      animation: gradient 10s ease infinite;
      margin-inline: 0;
      font-family: 'Pangolin', cursive;
}
  
@keyframes gradient 
{
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
}

.Home
{
  font-family: 'Pangolin',cursive;
  text-align: center;
  vertical-align: middle;
  margin-top: 30vh;
  padding-left: 5vw;
  padding-right: 5vw;
  font-size: 1.75rem;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

.About
{
  font-size: 1.75rem;
  color: #33FF00;
  text-align: center;
  font-family: 'Pangolin',cursive;
  margin-top: 10vh;
  padding-right: 5vw;
  padding-left: 5vw;
}

#about_bg
{
  background: linear-gradient( rgba(109, 104, 104, 0.89),rgba(17, 17, 17, 0.5)), url("images/bg/about_bg.png");
  background-size: auto;
  background-repeat: no-repeat;
  font-family: 'Pangolin', cursive;
}

.row {
  display: flex;
}

.row img
{
  height: 300;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

.Achievements
{
  font-size: 1.75rem;
  text-align: center;
  color: #00FFFF;
  font-family: 'Pangolin',cursive;
}

#pag
{
  padding-left: 3vw;
}

#ach_bg1
{
  background: url('images/bg/matheq.jpg');
  background-size: cover;
  font-family: 'Pangolin', cursive;
}
.lds-default {
  width: 80px;
  height: 80px;
  position: relative;
}
.lds-default div {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 37px;
  left: 66px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22px;
  left: 62px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11px;
  left: 52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7px;
  left: 37px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11px;
  left: 22px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22px;
  left: 11px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 37px;
  left: 7px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 52px;
  left: 11px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62px;
  left: 22px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66px;
  left: 37px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62px;
  left: 52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 52px;
  left: 62px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
#ach_bg2
{
  color: white;
  background: grey;
  background-size: cover;
  font-family: monospace;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  padding-bottom: 10px;
}

#ach_bg2 p
{
  font-size: 1.75rem;
}

#handles
{
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#cflogo
{
  width: 40px;
  height: 40px;
  transition: transform .2s;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
}

#cflogo:hover
{
  transform: scale(1.5);
}

#cclogo
{
  width: 40px;
  height: 40px;
  transition: transform .2s;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
}

#cclogo:hover
{
  transform: scale(1.5);
}

#ach_bg3
{
  background: url(images/bg/contact_bg.png);
}

.Achievements2
{
  color: #000;
  align-content: center;
  font-size: 1.75rem;
  text-align: center;
  font-family: 'Pangolin',cursive;
  padding-left: 3vw;
  padding-right: 3vw;
}

.Contact
{
  background: black;
  color: #fff;
  font-family: 'Pangolin', cursive;
  font-size: xx-large;
  text-align: center;
  position: absolute;
  bottom: 0px;
  width: 100%;
  overflow: hidden;
  padding-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
}

@media only screen and (max-width:600px) 
{
  .Contact
  {
    font-size: 1.5rem;
  }
  .Contact2
  {
    font-size: 1.5rem;
  }  
}

.Contact2
{
  background: black;
  color: #fff;
  font-family: 'Pangolin', cursive;
  font-size: 1.5rem;
  text-align: center;
  position: relative;
  bottom: 0px;
  width: 100%;
  overflow: hidden;
  padding-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
}

#fblogo
{
  width: 40px;
  height: 40px;
  transition: transform .2s;
  margin-left: 5px;
  margin-right: 5px;
}

#fblogo:hover
{
  transform: scale(1.5);
}

#iglogo
{
  width: 40px;
  height: 40px;
  transition: transform .2s;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}

#iglogo:hover
{
  transform: scale(1.5);
}

#gmail_logo
{
  width: 40px;
  height: 40px;
  transition: transform .2s;
  margin-left: 10px;
  margin-right: 5px;
  margin-top: 5px;
}

#gmail_logo:hover
{
  transform: scale(1.5);
}

#githublogo
{
  width: 40px;
  height: 40px;
  transition: transform .2s;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}

#githublogo:hover
{
  transform: scale(1.5);
}