/* 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." */
@font-face{
  font-family: fontPixel_wJP;
  src: url(fonts/fontPixel_wJP.ttf);
}
@font-face{
  font-family: wiiFont;
  src: url(fonts/contb.ttf);
}
body {
  background: #80e8ff;
  background: linear-gradient(180deg, rgba(128, 232, 255, 1) 0%, rgba(225, 250, 255, 1) 28%, rgba(248, 254, 255, 1) 84%, rgba(255, 255, 255, 1) 100%);
  background-repeat: no-repeat;
  background-size: 100% 750px;
  color: black;
  font-family: wiiFont;
  
}

.title{
  margin: auto;
  text-align: center;
  margin-top: 35px;
  display: grid;
  grid-template-columns: 2fr 1.5fr .1fr 7fr .1fr 1.5fr 2fr;
  align-items: center;

}
.titleItemContainer{
  display: grid;
  grid-template-columns: 0fr 0fr 6fr 2fr 5fr;
}
.gifContainer{
  height: 100px;
  width: 75px;
  margin-bottom: 119px;

  z-index: 1;
}
.aaronGif{
  width: 300%;
  height: 300%;
  object-fit: cover;

}
.websiteTitle{
  line-height:90%;
  text-align: left;
  font-size: 75px;
  margin-top: 80px;
  white-space: nowrap;
}
.webTitleContainer{
  display: grid;
  grid-template-columns: 1fr;
  
}
.mainBox{
  color: black;
}
.mainContainer{
  background-color: whitesmoke;
  border-radius: 15px;
  padding: 10px;
  margin: auto;
  border: 2px dashed grey;
  display: grid;
  grid-template-columns:1.5fr .1fr 9fr .1fr 1.5fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  margin-right: 5%;
  margin-left: 5%;
 

}
mainSection { 
  min-height: fit-content;
  border: solid 5px;
  border-color: grey;
  text-align: center;
  background-color: ghostwhite;
  border-radius: 15px;
  padding: 10px;
  /*from medium.com*/
  background: linear-gradient(to top, #dddddd, #dddddd, #ffffff, #ffffff);
  background-size: cover;
  background-size: 100% 2px;
  
}
sidebar {
  min-height: fit-content;
  max-width: 16vw;
  min-width: 16vw;
  align-items: center;
  border: 5px grey solid;
  text-align: center;
  border-radius: 15px;
  padding: 10px;
  background-color: ghostwhite;
  background: linear-gradient(to top, #dddddd, #dddddd, #ffffff, #ffffff);
  background-size: cover;
  background-size: 100% 2px;
  
 
}

.buttonTop {
 border-style:solid;
 text-align: center;
 margin: auto;
 text-decoration: none;
 color: #000000;
 background-image: linear-gradient(30deg, #f6f9fa, #eeeeee);
 border-radius: 40px;
 border-color: #8feeff;
 background-size: 100% auto;
 font-family: inherit;
 font-size: 1.8vw;
 white-space: nowrap;
 max-height: fit-content;
 min-width: 60%;
 padding: 0.2em 1em;
 margin-top: 25px;
 z-index: 100;
}

.buttonTop:hover {
 

    background-image:linear-gradient(-30deg, #f6f9fa, #eeeeee);
    background-position: right center;
    background-size: 200% auto;
    -webkit-animation: pulse 2s infinite;
    animation: pulse512 1.5s infinite;
}

@keyframes pulse512 {
 0% {
  box-shadow: 0 0 0 0 #65edff8f;
 }

 70% {
  box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
 }

 100% {
  box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
 }
}

.topNav{
  display: grid;
  z-index: 100;
  max-height: 50%;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-column-gap: 5px;
}

.domainBreak{
  font-size: 0;
}
.musicPlayer{
  border:none;
  align-items: center;
}

.aboutSection{
  margin-top:2vh;
  width: 85%;
  border-radius: 25px;
  border: black 2px solid;
  margin-left:auto;
  margin-right:auto;
  background: aliceblue;
}
.aboutMeIFrame{
  width: 95%;
  height:425px;
  border-radius: 15px;
  border: lightpink 3px dashed;
}

.iFrameSwapperButtons{
  display: grid;
  z-index: 100;
  max-height: 50%;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 1px;
  margin-bottom: 5px;
  margin-top: 5px;
}

 
@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/1za99g.woff") format("woff");
  src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
.buttonSmall{
  border-style:solid;
  text-align: center;
  margin: auto;
  text-decoration: none;
  color: #000000;
  background-image: linear-gradient(30deg, #f6f9fa, #eeeeee);
  border-radius: 5px;
  border:black solid 2px;
  background-size: 100% auto;
  font-family: "Pixelated MS Sans Serif";
  font-size: 1vw;
  white-space: nowrap;
  max-height: fit-content;
  min-width: 60%;
  padding: 0.2em .2em;
 
  z-index: 100;
}



.buttonContainer{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}