body {
    background-image: url(../bgs/PellHolo.png);
    background-repeat: repeat;
}

h1 {
    font-family: Impact, sans-serif;
    font-size: 9vw;
    font-weight: bold;
    margin: 0;
    position: absolute;
    left: 5%;
    top: 10%;
    transform: rotate(90deg) translateY(-50%);
    transform-origin: left top;
    padding: 20px 0;
    color: mintcream;
}

nav {
    font-weight: bold;
    text-shadow: 2px 2px black;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
}

nav li {
    margin: 0 15px;
}

nav a {
    text-decoration: none;
    color: mintcream;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

nav a:hover {
    text-shadow: 0 0 20px black;
    color: lime;
}

#corner-image {
    position: absolute;
    right: 20px;
    width: 300px;
    height: auto;
    animation: wiggle 4s ease-in-out infinite;
}

#introductory-text-a {
    background-color: #1b1b1b;
    background-image: url(../bgs/3px-tile.png);
    background-repeat: repeat;
    border: 4px groove;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
    max-width: 400px;
    text-align: center;
    position: absolute;
    top: 15%;
    left: 25%;
    transform: translate(-50%, -50%);
    font-family: Roboto, sans-serif;
    color: mintcream;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

#introductory-text-b {
    background-color: #1b1b1b;
    background-image: url(../bgs/3px-tile.png);
    background-repeat: repeat;
    border: 4px groove;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
    max-width: 400px;
    text-align: center;
    position: absolute;
    top: 25%;
    left: 65%;
    transform: translate(-50%, -50%);
    font-family: Roboto, sans-serif;
    color: mintcream;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

#screenshot-marooned {
    background-color: #1b1b1b;
    background-image: url(../bgs/3px-tile.png);
    background-repeat: repeat;
    border: 4px groove;
    border-radius: 10px;
    padding: 5px;
    max-width: 400px;
    text-align: center;
    position: absolute;
    top: 54%;
    left: 75%;
    transform: translate(-50%, -50%);
    font-family: Roboto, sans-serif;
    color: mintcream;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

#screenshot-marooned img {
    width:400px;
}

#introductory-text-c {
    background-color: #1b1b1b;
    background-image: url(../bgs/3px-tile.png);
    background-repeat: repeat;
    border: 4px groove;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
    max-width: 400px;
    text-align: center;
    position: absolute;
    top: 55%;
    left: 35%;
    transform: translate(-50%, -50%);
    font-family: Roboto, sans-serif;
    color: mintcream;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

#introductory-text-d {
    background-color: #1b1b1b;
    background-image: url(../bgs/3px-tile.png);
    background-repeat: repeat;
    border: 4px groove;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
    max-width: 400px;
    text-align: center;
    position: absolute;
    top: 69%;
    left: 28%;
    transform: translate(-50%, -50%);
    font-family: Roboto, sans-serif;
    color: mintcream;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

#introductory-text-e {
    background-color: #1b1b1b;
    background-image: url(../bgs/3px-tile.png);
    background-repeat: repeat;
    border: 4px groove;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
    max-width: 400px;
    text-align: center;
    position: absolute;
    top: 84%;
    left: 40%;
    transform: translate(-50%, -50%);
    font-family: Roboto, sans-serif;
    color: mintcream;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

#tools-experience {
    background-color: #1b1b1b;
    background-image: url(../bgs/3px-tile.png);
    background-repeat: repeat;
    border: 4px groove;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
    max-width: 1500px;
    text-align: center;
    position: absolute;
    top: 115%;
    left: 55%;
    transform: translate(-50%, -50%);
    font-family: Roboto, sans-serif;
    color: mintcream;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

#tools-experience ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
}

#tools-experience ul img {
    max-width: 60px;
}

#contact-me {
    background-color: #1b1b1b;
    background-image: url(../bgs/3px-tile.png);
    background-repeat: repeat;
    border: 4px groove;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
    max-width: 600px;
    text-align: center;
    position: absolute;
    top: 131%;
    left: 55%;
    transform: translate(-50%, -50%);
    font-family: Roboto, sans-serif;
    color: mintcream;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

#contact-me ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
}

#contact-me ul img {
    max-width: 60px;
}

@keyframes wiggle {
    0% {transform:rotate(0deg);}
    25% {transform:rotate(-5deg);}
    75% {transform:rotate(5deg);}
    100% {transform:rotate(0deg);}
}

a:link {
    color:mintcream;
}

a:visited {
    color:mintcream;
}

a:hover {
    color:crimson;
}