@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

body{
    background-color: #ffffff;
}
h1 {
    font-size: 2.1em;
    text-align: center;
    font-family: 'Inter';
    font-weight: 900;
    color: #222831;
}
.gradient-underline {
  position: relative;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
.gradient-underline::after {
  content: "";
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  bottom: -0.2em;
  height: 0.12em; /* underline thickness */
  width: 100%;
  background: linear-gradient(to right, #649194, #87c3c7);
}

a {
    font-size: 1.5em;
    text-align: left;
    font-family: 'Inter';
    font-weight: 700;
    margin-top: auto;
    margin-bottom: auto;
    padding-right: 0.5em;
}

p {
    font-size: 1em;
    text-align: center;
    font-family: 'Merriweather';
    font-weight: 400;
    color: #222831;
}
.profileBox{
    padding-top: 1em;
    padding-bottom: 1em;
    display: block;
    justify-content: center; /* Centers horizontally */
    align-items: center;
    
}
.profile {
    margin: auto;
    height: 10em;
    width: 10em;
    background-image: url(images/homepage.png);
    background-size: cover;
    
}

.linkArray{
    display: block;
    margin-left: 3%;
    margin-right: 3%;
}

.linkBox{
    background-color: #31363F;
    padding: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    border-radius: 0.5em;
    border-left: solid 0.5em #eeeeee;
    color: #222831;
    animation-name: linkArticleOFF;
    animation-duration: 0.3s;
    display: block;
}

.linkBox:hover{
    background-color: #76ABAE;
    animation-name: linkBox;
    animation-duration: 0.3s;
    cursor: pointer
}

@keyframes linkBox {
  from {background-color: #31363F;}
  to {background-color: #76ABAE;}
}

.linkArticle{
    padding: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    border-radius: 0.5em;
    display: flex;
    gap: 1em;
}

.linkArticle:hover{
    cursor: pointer
}

.imgThumbnail {
    height: 6em;
    border-radius: 0.5em;
    margin-top: auto;
    margin-bottom: auto;
}

.imgThumbnailSite {
    height: 3em;
    border-radius: 0.5em;
    margin-top: auto;
    margin-bottom: auto;
}

.footerText{
    font-size: 0.6em;
    text-align: center;
    padding-bottom: 2em;
    padding-top: 1em;
}

#rebuildAcadia2 {
    background-color: #878173;
    border-left: solid 0.5em #3e3c37;
    color: #ffffff;
    animation-name: rebuildAcadia2OFF;
    animation-duration: 0.3s;
}

#rebuildAcadia2:hover {
    background-color: #e6e2da;
    color: #3e3c37;
    animation-name: rebuildAcadia2;
    animation-duration: 0.3s;
}

@keyframes rebuildAcadia2 {
    from {background-color: #878173;}
    to {background-color: #e6e2da;}
}

@keyframes rebuildAcadia2OFF {
    from {background-color: #e6e2da;}
    to {background-color: #878173;}
}

#rebuildAcadia {
    background-color: #486FB0;
    border-left: solid 0.5em #213c69;
    color: #ffffff;
    animation-name: rebuildAcadiaOFF;
    animation-duration: 0.3s;
}

#rebuildAcadia:hover {
    background-color: #ddeaff;
    color: #1f3457;
    animation-name: rebuildAcadia;
    animation-duration: 0.3s;
}

@keyframes rebuildAcadia {
    from {background-color: #486FB0;}
    to {background-color: #ddeaff;}
}

@keyframes rebuildAcadiaOFF {
    from {background-color: #ddeaff;}
    to {background-color: #486FB0;}
}

#acadiaLayoffs {
    background-color: #5e5e5e;
    border-left: solid 0.5em #2d2d2d;
    color: #ffffff;
    animation-name: acadiaLayoffsOFF;
    animation-duration: 0.3s;
}

#acadiaLayoffs:hover {
    background-color: #ebebeb;
    color: #2d2d2d;
    animation-name: acadiaLayoffs;
    animation-duration: 0.3s;
}

@keyframes acadiaLayoffs {
    from {background-color: #5e5e5e;}
    to {background-color: #ebebeb;}
}

@keyframes acadiaLayoffsOFF {
    from {background-color: #ebebeb;}
    to {background-color: #5e5e5e;}
}

#siteWebsite {
    background-color: #649194;
    border-left: solid 0.5em #244345;
    color: #ffffff;
    animation-name: siteWebsiteOFF;
    animation-duration: 0.3s;
}

#siteWebsite:hover {
    background-color: #d2eeef;
    color: #2e5557;
    animation-name: siteWebsite;
    animation-duration: 0.3s;
}

@keyframes siteWebsite {
    from {background-color: #649194;}
    to {background-color: #d2eeef;}
}

@keyframes siteWebsiteOFF {
    from {background-color: #d2eeef;}
    to {background-color: #649194;}
}

#siteLinkedIn {
    background-color: #1f518d;
    border-left: solid 0.5em #0e2a4a;
    color: #ffffff;
    animation-name: siteLinkedInOFF;
    animation-duration: 0.3s;
}

#siteLinkedIn:hover {
    background-color: #a8c7ec;
    color: #0e2a4a;
    animation-name: siteLinkedIn;
    animation-duration: 0.3s;
}

@keyframes siteLinkedIn {
    from {background-color: #1f518d;}
    to {background-color: #a8c7ec;}
}

@keyframes siteLinkedInOFF {
    from {background-color: #a8c7ec;}
    to {background-color: #1f518d;}
}

#siteInstagram {
    background-color: #c50460;
    border-left: solid 0.5em #630230;
    color: #ffffff;
    animation-name: siteInstagramOFF;
    animation-duration: 0.3s;
}

#siteInstagram:hover {
    background-color: #febcdb;
    color: #630230;
    animation-name: siteInstagram;
    animation-duration: 0.3s;
}

@keyframes siteInstagram {
    from {background-color: #c50460;}
    to {background-color: #febcdb;}
}

@keyframes siteInstagramOFF {
    from {background-color: #febcdb;}
    to {background-color: #c50460;}
}

#siteYouTube {
    background-color: #d40000;
    border-left: solid 0.5em #660000;
    color: #ffffff;
    animation-name: siteYouTubeOFF;
    animation-duration: 0.3s;
}

#siteYouTube:hover {
    background-color: #fbb4b4;
    color: #660000;
    animation-name: siteYouTube;
    animation-duration: 0.3s;
}

@keyframes siteYouTube {
    from {background-color: #d40000;}
    to {background-color: #fbb4b4;}
}

@keyframes siteYouTubeOFF {
    from {background-color: #fbb4b4;}
    to {background-color: #d40000;}
}

#siteStormDay {
    background-color: #00573d;
    border-left: solid 0.5em #033325;
    color: #ffffff;
    animation-name: siteStormDayOFF;
    animation-duration: 0.3s;
}

#siteStormDay:hover {
    background-color: #a8e2d1;
    color: #033325;
    animation-name: siteStormDay;
    animation-duration: 0.3s;
}

@keyframes siteStormDay {
    from {background-color: #00573d;}
    to {background-color: #a8e2d1;}
}

@keyframes siteStormDayOFF {
    from {background-color: #a8e2d1;}
    to {background-color: #00573d;}
}