/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

        /* --------------- BODY ------------------ */

    body {background-color: black; text-align:center; color: white; font-family: 'Bai Jamjuree', Verdana, sans-serif;}
    h1   {color: white; }
    h2   {margin:5px;}
    p    {color: white;}
    ul   {list-style-position: inside; padding: 0;}
    a:link {
  color: cyan;
  background-color: transparent;
  text-decoration: none;
}
        /* --------------- LINKS ------------------ */

a:visited {
  color: cyan;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

        /* --------------- CLASSES ------------------ */

    .flex {
      display: flex;
    }
    
    .block {
      display: inline;
    }
    
    .left {
      position: relative;
      float: left;
    }

    .right {
      position: relative;
      float: right;
    }
    
    .clear {
      clear: both;
    }
    
    .center {
display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
        
    }
    
    
        /* --------------- HEADER ------------------ */

    header {

      -webkit-transition: all 1.5s;
      transition: all 1.5s;
              transition-delay: background-color 2s;
      background-color: rgba(0,0,0, 0);
      width:20%;
      height:120px;
      overflow:hidden;
      z-index:5;
      position:fixed;
      border-radius:0 100% 100% 0;
      opacity:0.1;

    }


    header:hover {

      -webkit-transition: all 1.5s;
      transition: all 1.5s;
            opacity:1;
      background-color: rgba(0,0,0, 0.85);
      width:100%;
      border-radius:0;
      height:220px;
     
    }

    header h1 {
      font-size: 2.5em;
      border-bottom: solid 2px #fff;
      margin: 15px 10px 10px;
      padding-bottom: 5px;
      text-shadow: 2px 2px 4px #000;
      float:left;
      
    }
   
    header p { margin: 0; }

    header a:link h1,
    header a:active h1,
    header a:visited h1 {
      text-decoration: none;
      color: #fff;
    }
   
    header a:hover h1 {
     text-decoration: none;
     color: #ffc143;
    }

    header a:link,
    header a:active,
    /*header a:visited,*/
    footer a:link,
    footer a:active,
    footer a:visited  {
      text-decoration: none;
      color: #21abcd;
    }

    header a:hover,
    footer a:hover {
      text-decoration: none;
      color: #ffc143;
    }
    
    .headbanner {
         position:relative;
         float:left;
    }




    /* --------------- FOOTER ------------------ */

    footer {
      clear: both;
      padding: 20px 40px;
      color: #21abcd;
      text-align: center;
      margin-top: 20px;
    }



    /* --------------- NAVIGATION ------------------ */

    nav ul {
      list-style: none;
      
      padding: 15px;
      margin: 0px;
    }


    nav li {
      float: left;
    }

    nav li:hover a {
      font-weight: bold;
    }

    nav li a {
      padding: 10px 20px;
      text-transform: uppercase;
      color: white;
    }
    
    nav {
        display:flex;
        width:80%;
        
      }



    /* --------------- HEADER ICON ------------------ */

    .headIcon {
      width: 100px;
      height: 100px;
      margin: 10px 30px 10px 30px;
      background: url("https://kyluxwolf.neocities.org/KyconQR1024.png");
      background-size: cover;
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      box-shadow: 10px 5px #99efc1;
      -webkit-transition: all 0.5s;
       transition: all 1.5s;
    }

    header:hover .headIcon {
      width: 150px;
      height: 150px;
      border-radius: 5%;
      -moz-border-radius: 5%;
      -webkit-border-radius: 5%;
      -webkit-transition: all 0.1s;
      transition: all 0.5s;
    }

        /* --------------- GOOGLE ICONS ------------------ */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}