body{
    background-size: 100% auto; 
    font-family:mysecondfont;
    font-size: 1.1vw;
    line-height: 1.5vw;
    color: #1f4097;
    margin: 3vw 3vw 3vw 3vw;
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✏️</text></svg>") 16 0,auto; /*!emojicursor.app*/
}


a{
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>👆</text></svg>") 16 0,auto; /*!emojicursor.app*/
}


nav{
    line-height: 1.6vw;
}
h1{
    font-family:myfirstfont;
    font-size:3.5vw;
}
h2{
    font-family:mysecondfont;
    font-size:1.5vw;
    line-height: 2.2vw;
}
.title{
    text-align: center;
}

#yellow{
    color:#fdd818;
}
.grid-container{
    display:grid;
    grid-template-columns: 63vw;
    grid-template-rows: auto;
    gap: 30px;
    padding: 10px;
    justify-content: center;
}

.grid-container > div {
  background-color:#aedbe5;
  text-align: center;
  border-radius: 3vw;
  padding: 30px 50px;
}


@font-face {
    font-family:myfirstfont;
    src: url(cirruscumulus.ttf);
}

@font-face {
    font-family:mysecondfont;
    src: url(lettergothicstd.otf);
}


.bodytext{
    text-align: left;
    line-height:1.4vw;
}

a:link{
    text-decoration:none;
    color: #1f4097;
  }
  
  a:visited{
      text-decoration: none;
      color: #1f4097;
  }
  
    a:hover {
      text-decoration: none;
      color:#fdd818;

    }
  
    a:active {
      text-decoration: none;
      color:#fdd818;

    }