style.css

:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
}

*,
::after,
::before {
    font-family: inherit;
}

body, html {
    background-image:url("./resource/background.jpg");
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
/* 
.panel {
    max-width: 35%;
    margin: 15% auto; 
    text-align: center;
} */

@media (max-width: 600px) {
  .panel {
    max-width: 80%;
    text-align: center;
  }
  .footer {
    font-size: 12px;
    color: white;
    text-align: center;
    width: 100%;
    height: 3em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    .footer-link {
        color: white;
        text-decoration: none;
    }
  }

}

@media (max-height: 800px) {
  .panel {
    max-width: 80%;
    margin: 10% auto; 
    text-align: center;
  }
  .footer {
    font-size: 12px;
    color: white;
    text-align: center;
    width: 100%;
    height: 3em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    .footer-link {
        color: white;
        text-decoration: none;
    }
  }

}


@media (min-height: 800px) {
  .panel {
    max-width: 80%;
    margin: 15% auto; 
    text-align: center;
  }
  .footer {
    font-size: 12px;
    color: white;
    text-align: center;
    width: 100%;
    height: 3em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    .footer-link {
        color: white;
        text-decoration: none;
    }
  }

}

@media (min-width: 800px) and (max-width: 1000px){
  .panel {
    max-width: 60%;
    text-align: center;
  }
  .footer {
    font-size: 15px;
    color: white;
    text-align: center;
    width: 100%;
    height: 3em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    .footer-link {
        color: white;
        text-decoration: none;
    }
  }
}

@media (min-width: 1000px) and (max-width: 1500px){
  .panel {
    max-width: 50%;
    text-align: center;
  }
  .footer {
    font-size: 15px;
    color: white;
    text-align: center;
    width: 100%;
    height: 3em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    .footer-link {
        color: white;
        text-decoration: none;
    }
  }
}

@media (min-width: 1500px) and (max-width: 2000px){
  .panel {
    max-width: 40%;
    text-align: center;
  }
  .footer {
    font-size: 15px;
    color: white;
    text-align: center;
    width: 100%;
    height: 3em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    .footer-link {
        color: white;
        text-decoration: none;
    }
  }
}

@media (min-width: 2000px) {
  .panel {
    max-width: 35%;
    text-align: center;
  }
  .footer {
    font-size: 15px;
    color: white;
    text-align: center;
    width: 100%;
    height: 3em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    .footer-link {
        color: white;
        text-decoration: none;
    }
  }
}

.author {
    .avatar {
        width: 30%;
        border-radius: 50%;
        vertical-align: middle;
        filter: drop-shadow(rgb(0, 0, 0.5) 0px 0px 5px);
    }

    .link-homepage {
        color: white;
        text-decoration: none;
        font-size: 40px;
    }
}

.avatar-subtitle {
    color: #ccc;
    
}

.link-site {
    display: flex;
    gap: 0.625%;
    margin-top : 50px;

    a {
        flex: 1;
        text-decoration: none;
        outline-color: transparent;
        text-align: center;
        line-height: 3;
        color: white;
        background-color: #FF6699;
        opacity: 0.8;
        margin-left: 5px;
      }
    /* a:link {
        background-color: #FF6699;
    } */
}

.link-social { 
    margin-top: 50px;
    color: white;

    a {  
        text-decoration: none;
        color: white;
        font-weight: bold;
    }
}
/* 
.footer {
    font-size: 15px;
    color: white;
    text-align: center;
    width: 100%;
    height: 3em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    

    .footer-link {
        color: white;
        text-decoration: none;
    }
} */