:root {
    --background-color: rgb(29, 29, 29);
    counter-reset: nav-links;
}

.dotted-square {
    width: 100px;
    height: 100px;
    border: 2px dotted black;
}

* {
    /* box-sizing: border-box; */
    font-family: Georgia expanded;
    color: rgb(223, 227, 255);
}

p {
    font-size: x-large;
}

h1 {
    font-size: 300%;
}

h2 {
    font-size: 200%;
}

label {
    font-size: 250%;
}

textarea[type="text"] {
    word-wrap: break-word;
    word-break: break-all;
    color: black;
}

img {
    width: 100%;
    height: 100%;
}

h1,
label {
    color: #4e5dff;
}

body {
    background-color: var(--background-color);
    overflow-x: hidden;
    margin: 0;
}

header {
    padding: 4%;
    background-image: url("/imgs/bckground.jpg");
    background-position-y: center;
    background-size: cover;
    background-attachment: fixed;
}



.blog {

    border-image-source: url("/imgs/blog.jpg");
    border-image-width: 10%;
    border-image-outset: 5% 1%;
    border-image-repeat: round;
    border-image-slice: 10% 40%;
}


.headerm {
    padding: 4%;
    background-image: url("/imgs/bckg2.png");
    background-position-y: center;
    background-size: cover;
    background-attachment: fixed;
}

/*#homepage::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15vh;
    background: linear-gradient(to top, black, transparent);
}*/

main {
    width: 80%;
    padding: 0 10%;
}

#homepage {
    height: 100vh;
}

.button:hover {
    background-color: rgb(201, 120, 120);
    border: 2px solid #ffffff
}

select {
    padding-left: 5%;
    padding-top: 1%;
    color: black;
    font-size: xx-large;
}

.button {
    display: inline-block;
    border-radius: 20px;
    outline: none;
    border: 4px;
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    animation-name: disco;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
    padding: 1rem;
    align-items: center;
    align-self: center;
    flex: 1;
    padding: 10px;
    text-decoration: none;
    font-size: 2rem;
    text-align: center;
}

/*
.main-nav a {
    counter-increment: nav-links;
    --order: nav-links;
    flex: 1;
    padding: 10px;
    text-decoration: none;
    font-size: 2rem;
    text-align: center;
    animation: dropIn 1s ease forwards;
    animation-delay: calc(var(--order) * nav-links);
}
*/
/* The animation code */
@keyframes disco {
    from {
        background-color: red;
    }

    to {
        background-color: yellow;
    }

    to {
        background-color: #4937e9;
    }

    to {
        background-color: #37e975;
    }

    to {
        background-color: #e937e6;
    }

    to {
        background-color: #e98437;
    }

    to {
        background-color: #3761e9;
    }
}

/* The element to apply the animation to */
.disco {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-timing-function: linear;
    animation-name: disco;
    animation-duration: 5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes dropIn {
    from {
        transform: translateY(-500px);
    }

    to {
        transform: translateY(0);
    }
}

a::before {
    --order: nav-links;
}

.link {
    width: 50%;
    height: 200%;
    text-decoration: none;
}

.link:hover {
    cursor: pointer;
    font-size: xx-large;
    text-shadow: 0 0 4px rgb(255, 0, 0), 0 0 4px rgb(255, 0, 0);
}

.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.intro-wraper {
    padding-top: 3rem;
}

.intro {
    margin: 0;
}

.projects-container {
    display: grid;
    gap: 5%;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    /* for test */
    counter-reset: test 1;
}

div.projects-container>div {
    display: flex;
    flex-direction: column;
    font-size: x-large;
}

div.projects-container>div>a>img {
    width: 100%;
    border-radius: 5%;
}

div.projects-container h3,
div.projects-container p {
    margin: 0;
}

div.projects-container>div>ul {
    padding: 0;
}

div.projects-container>div>ul>li {
    display: inline;
}

.tag {
    border: #ccc 5px;
    padding: 0.25em;
    margin: 0 5px;
    border-radius: 1em;
}

.lang {
    background-color: midnightblue;
}

.lib {
    background-color: darkgreen;
}

div.projects-container>div>ul>li>a {
    text-decoration: none;
}

.test::before {
    counter-increment: test;
    content: counter(test);
}

.pdf-viewer {
    height: 100em;
    width: 100%;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: left;
}

#social-message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 10rem;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0%;
}

.socials-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-basis: 30%;
}

#fixedbutton {
    position: fixed;
    width: 5%;
    height: 10%;
    bottom: 0%;
    right: 0%;
}