@font-face {
    font-family: "SuperMilk";
    src: url("/Fonts/Super Milk.ttf");
    src: local('Super Milk'), 
         url('Super Milk.ttf') format('truetype');
}
@font-face {
    font-family: "OpenDyslexic";
    src: url("/Fonts/OpenDyslexic-Regular.otf");
    src: local('OpenDyslexic-Regular'), 
         url('OpenDyslexic-Regular.otf') format('opentype');
}
@font-face {
    font-family: "OpenDyslexicBold";
    src: url("/Fonts/OpenDyslexic-Bold.otf");
    src: local('OpenDyslexic-Bold'), 
         url('OpenDyslexic-Bold.otf') format('opentype');
}


body {
    background-image: 
        url("/Images/IndexImages/PinkPolkaDotBackground.jpg");
}

.PinkBackgroundBox {
    max-width: 70vw;
    height: 80%;
    text-align: center;
    background-color: rgb(253, 213, 249);
    margin: 10vh 15vw 10vh 15vw;
    border: 0.8vw rgb(255, 0, 179) solid;
    border-radius: 5vw;
    padding: 1vh 1vw;
}

.AmoebaHeader {
    width: 68vw;
    justify-self: center;
}

.HomeGrid {
    max-width: 70vw;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    position:relative;
}

.LeftColumn{
    justify-self: center;
    align-self: center;
}

.MyWork {
    position:relative;
    width: 12vw;
    justify-self: center;
    align-self: center;
}

.ButtonsLeft {
    background-color: rgb(252, 174, 255);
    position: relative;

    border: 0.3vw rgb(255, 0, 179) solid;
    border-radius: 3vw;
    padding: 0vh 1vw;
    width: 10vw;
}


.MiddleCText {
    background-color: rgb(252, 174, 255);
    position: relative;
    margin: 1.5vh 0vw;
    border: 0.5vw rgb(255, 0, 179) dashed;
    border-radius: 3vw;
    padding: 0vw 1vh; 
    justify-self: center;
}

.RightColumn{
    justify-self: center;
    align-self: center;
}

.AboutMe {
    position:relative;
    width: 12vw;
    justify-self: center;
}

.ButtonsRight {
    background-color: rgb(252, 174, 255);
    position: relative;

    border: 0.3vw rgb(255, 0, 179) solid;
    border-radius: 3vw;
    padding: 0vh 1vw;
    width: 10vw;
    justify-self: center;
}

.PageBottom{
    max-width: 80vw;
    display: grid;
    grid-template-columns: 2fr 3fr 2fr;
    position:relative;
}

.BottomLeft{
    position:relative;
    width: 10vw;
    justify-self: center;
    align-self: center;
}

.BottomMid{
    justify-self: center;
    align-self: center;
}

.BottomRight{
    position:relative;
    width: 10vw;
    justify-self: center;
    align-self: center;
}

.MyLinks {
    position:relative;
    width: 17vw;
    justify-self: center;
}

.AppLinks {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    position:relative;
    column-gap: 1vw;
    justify-self: center;
    max-width: 40vw;
    
}

.Soundcloud {
    position:relative;
    height: 7vw;
    border: 0.3vw rgb(255, 0, 179) solid;
    border-radius: 0.5vw;
    justify-self: center;
}
.Soundcloud:hover {
    border-color:rgb(0, 183, 122);
}
.Itchio {
    position:relative;
    height: 7vw;
    border: 0.3vw rgb(255, 0, 179) solid;
    border-radius: 5vw;
    justify-self: center;
}
.Itchio:hover {
    border-color:rgb(0, 183, 122);
}
.Linkedin {
    position:relative;
    height: 7vw;
    border: 0.3vw rgb(255, 0, 179) solid;
    border-radius: 1vw;
    justify-self: center;
}
.Linkedin:hover {
    border-color:rgb(0, 183, 122);
}
.Instagram {
    position:relative;
    height: 7vw;
    border: 0.3vw rgb(255, 0, 179) solid;
    border-radius: 1.9vw;
    justify-self: center;
}
.Instagram:hover {
    border-color:rgb(0, 183, 122);
}
.Youtube {
    position:relative;
    height: 7vw;
    border: 0.3vw rgb(255, 0, 179) solid;
    border-radius: 0.5vw;
    justify-self: center;
}
.Youtube:hover {
    border-color:rgb(0, 183, 122);
}


h1 { /* Title */
    font-family: "SuperMilk";
    color:aquamarine;
    font-size: 6em;
    font-weight: bold;
    -webkit-text-stroke: 0.03em rgb(0, 183, 122);

    margin-top: 0; margin-bottom: 0;
}

h2 { /* Subtitle */
    font-family: "SuperMilk";
    color:aquamarine;
    font-size: 3em;
    font-weight: bold;
    -webkit-text-stroke: 0.05em rgb(0, 183, 122);

    margin-top: 0; margin-bottom: 0;
}

h3 { /* Side Subtitles */
    font-family: "SuperMilk";
    color:rgb(252, 174, 255);
    font-size: 2.5em;
    font-weight: bold;
    -webkit-text-stroke: 0.04em rgb(255, 80, 168);
    text-align: center;
}

h4 { /* Buttons */
    font-family: "OpenDyslexicBold";
    color:black;
    font-size: 1.2vw;
    border: 0.2em rgb(255, 0, 179) solid;
    border-radius: 0.5em;
    background-color: rgb(252, 213, 249);
}
h4:hover {
    background-color:aquamarine;
    /* ADD SOUND */
  }

p { /* Body Text */
    font-family: "OpenDyslexic";
    color:black;
    font-size:1.2vw;
}

summary {
    font-family: "OpenDyslexic";
    color:black;
    font-size:1.2vw;
}

details {
    position:relative;
    bottom:7vh;
    text-align: center;
    font-family: "OpenDyslexicBold";
    color:black;
    font-size:large;
    text-decoration: underline;
}

/*
.test {
    position:relative;
    text-align: center;
    bottom: 15vh;
}
    */