website/assets/css/main.css

@charset "utf-8";
/* Coded by Louis Vallat */


@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto-Regular.ttf");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto-Medium.ttf");
  font-weight: 500;
  font-display: swap;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: #1f1f1f;
}

h1 {
    font-size: 4.5rem;
}

h3 {
    font-size: 2.25rem;
}

h4 {
    font-size: 1.8rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.3rem;
}

a {
    color: inherit;
}

p {
    line-height: 1.3em;
}

.bold {
    font-weight: 500;
}

.width-10 {
    width: 10%;
}

.width-85 {
    width: 85%;
}

.width-45 {
    width: 45%;
}

.width-100 {
    width: 100%;
}

.button-style {
    text-decoration: none;
    padding: 13px 32px;
    color: black;
    font-size: 1em;
    border-radius: 8px;
    background-color: white;
    transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
}

.button-style:hover {
    background-color: lightgrey;
    box-shadow: 0px 0px 6px 0px lightblue;
}

.button-style > img {
    height: 0.9em;
    margin-right: 5px;
}

.grey {
    color: grey;
}

.white {
    color: white;
}

.lightgrey {
    color: lightgrey;
}

.black {
    color: black;
}

.section {
    margin-top: 35px;
    margin-bottom: 70px;
}

.section-content {
    margin-top: 50px;
}

.section > h3, footer > h3 {
    margin-bottom: 7px;
    letter-spacing: 1px;
}

.center-align-inline {
    display: flex;
    align-items: center;
}

.icon {
    height: 1.8rem;
    transition: cubic-bezier(.65,.05,.36,1) 100ms;
    margin-left: 10px;
}

.icon:hover {
    transform: translateY(-3px);
}

footer {
    padding: 65px 10% 145px 10%;
    background-color: #0A0A0A;
}

.justify {
    text-align: justify;
}

footer > div > p {
    flex-basis: 40%;
}

#additional-links {
    flex-basis: 55%;
}

.flex-sb {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.align-items-center {
    align-items: center;
}

#additional-information > img {
    margin-right: 8px;
}

#additional-information > h6 {
    margin-right: 50px;
}

#inspiration {
    line-height: 1.3em;
    margin-top: 15px;
}

#copyright {
    margin-top: 35px;
}

#skills-logos {
    margin-left: 5%;
    margin-right: 5%;
}

#skills-logos > img {
    height: 65px;
}

#call-to-action {
    margin-top: 8vh;
}

#about {
    padding: 20px 10% 35px 10%;
}

#landing-zone {
    background-color: #141414ff;
    padding: 0px 10%;
    height: 100vh;
    display: flex;
    align-items: center;
}

#subtitle {
    letter-spacing: 3px;
    word-spacing: 4px;
    line-height: 1.35em;
    margin-top: 55px;
    margin-bottom: 25px;
}

#profile-picture {
    border-radius: 100%;
    height: 70px;
    width: 70px;
    margin: 10px;
}

@media only screen and (max-width: 768px) {
    #profile-picture {
        height: 2.6rem;
        width: 2.6rem;
    }

    .icon {
        height: 1.4rem;
    }

    h1 {
        font-size: 2.2rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    h4 {
        font-size: 1.4rem;
    }

    h5 {
        font-size: 1.2rem;
    }

    h6 {
        font-size: 1.1rem;
    }

    #additional-information > h6 {
        margin-right: 2%;
    }

    .button-style {
        padding: 10px 10px;
    }

    #skills-logos > img {
        height: 45px;
    }

    footer > div > p {
        flex-basis: 100%;
    }

    #subtitle {
        letter-spacing: 1px;
        line-height: 1.1em;
        word-break: break-word;
    }

    .width-45, .width-10, .width-85 {
        width: 100%;
    }

    .sm-width-45 {
        width: 45%;
    }

    .sm-center {
        margin-left: auto;
        margin-right: auto;
    }
}