index.css

@import url('https://fonts.googleapis.com/css?family=Dosis');
@import url('https://fonts.googleapis.com/css?family=Audiowide');
@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');

:root {
  /* generic */
  --gutterSm: 0.4rem;
  --gutterMd: 0.8rem;
  --gutterLg: 1.6rem;
  --gutterXl: 2.4rem;
  --gutterXx: 7.2rem;
  --colorPrimary400: #7e57c2;
  --colorPrimary600: #5e35b1;
  --colorPrimary800: #4527a0;
  --fontFamily: "Audiowide", sans-serif;
  --fontSizeSm: 1.2rem;
  --fontSizeMd: 1.6rem;
  --fontSizeLg: 2.1rem;
  --fontSizeXl: 2.8rem;
  --fontSizeXx: 3.6rem;
  --lineHeightSm: 1.1;
  --lineHeightMd: 1.8;
  --transitionDuration: 300ms;
  --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
  
  /* floated labels */
  --inputPaddingV: var(--gutterMd);
  --inputPaddingH: var(--gutterLg);
  --inputFontSize: var(--fontSizeLg);
  --inputLineHeight: var(--lineHeightMd);
  --labelScaleFactor: 0.8;
  --labelDefaultPosY: 50%;
  --labelTransformedPosY: calc(
    (var(--labelDefaultPosY)) - 
    (var(--inputPaddingV) * var(--labelScaleFactor)) - 
    (var(--inputFontSize) * var(--inputLineHeight))
  );
  --inputTransitionDuration: var(--transitionDuration);
  --inputTransitionTF: var(--transitionTF);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,body{
    margin:0;padding:0
}

body{
    font: 100% arial,sans-serif
}

ul li {
  font-family: 'Chango', cursive;
  font-size: 25px;
  margin: 5px;
}

button {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  border: none;
  border-radius: 15px;
}

button:hover {background-color: #3e8e41}

button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.Title{
    font-size: 90px;
}

.js-weather{
  font-size: 22px;
  font-family: "Audiowide";
}

/* greeting part */
.form {
    display: none;
    width: 400px;
    margin: auto;
    position: relative;

}
.greeting{
    display: none;
}

.showing{
    display: block;
}

.js-bg{
  position: relative;
  top: 50%;
  left: -3%;

}
h1 {
  font-family: "Audiowide";
}


.Input-text {
    display: block;
    margin: 0;
    padding: var(--inputPaddingV) var(--inputPaddingH);
    color: inherit;
    width: 85%;
    height: 27%;
    font-family: "Dosis";
    font-size: var(--inputFontSize)a;
    font-weight: inherit;
    line-height: var(--inputLineHeight);
    border: none;
    border-radius: 0.4rem;
    transition: box-shadow var(--trnsitionDuration);
    text-align: left;
  }
  
  .Input-text::placeholder {
    color: #B0BEC5;
  }
  
  .Input-text:focus {
    outline: none;
    box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
  }
  
  .Input-label {
    display: block;
    position: relative;
    bottom: 30.5%;
    left: 27rem;
    color:rgb(20, 211, 45);
    font-family: "Audiowide";
    font-size: var(--inputFontSize);
    font-weight: inherit;
    line-height: var(--inputLineHeight);
    opacity: 0;
    transform: 
      translate3d(0, var(--labelDefaultPosY), 0)
      scale(1);
    transform-origin: 0 0;
    transition:
      opacity var(--inputTransitionDuration) var(--inputTransitionTF),
      transform var(--inputTransitionDuration) var(--inputTransitionTF),
      visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
      z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
  }
  
  .Input-text:placeholder-shown + .Input-label {
    visibility: hidden;
    z-index: -1;
  }
  
  .Input-text:not(:placeholder-shown) + .Input-label,
  .Input-text:focus:not(:placeholder-shown) + .Input-label {
    visibility: visible;
    z-index: 1;
    opacity: 1;
    transform:
      translate3d(0, var(--labelTransformedPosY), 0)
      scale(var(--labelScaleFactor));
    transition:
      transform var(--inputTransitionDuration),
      visibility 0ms,
      z-index 0ms;
  }


/* Base Frame CSS */
p{
    margin:0 10px 10px
}

a{
    padding:5px;
    text-decoration:none;
    color:#000000;
    margin-right: 2px;
}

div#header{
    border: px solid #bcbcbc;
}

div#header h1{
    height:60px;
    line-height:60px;
    margin:0;
    padding-left:8px;
    text-align: right;
    
}

div#content p{
    line-height:1.4;
}


div#navigation ul{
    margin:15px 0; 
    padding:0; 
    list-style-type:none;
}

div#navigation li{
    margin-bottom:5px;
}


div#footer{
    text-align: right;
}

div#footer p{
    margin:0;
    padding:5px 10px
}

div#wrapper{
    float:left;
    width:100%;
    height: 88vh;
}

div#content{
    margin: 0 25%;
    text-align: center; 
}
div#navigation{
    float:left;
    width:25%;
    margin-left:-99.6%;
}

div#extra{
    float:left;
    width:20%;
    margin-left:-20%;
}

div#footer{
    clear:left;
    width:100%;
}