:root {
    --text: #fff ;
    --link:#FDC7FD;
    --text-lesser: #d3d3d3;
    --background: ;
    --background-lesser: #6b34776e;
    --text-opposite: #FDC7FD;
    --accent: #ee2c4e;
    --accent-lower: #d44895;
    --button:#5d074d89 ;
    --accentopposite: #fa7621 ;
    --width: 640px;

}

* {
    image-rendering: crisp-edges;
}

body {
    margin: 0 auto;
    text-justify:inter-word;
    color: var(--text-lesser);
    background: var(--background);
    background-image: url('static/bg.gif');
    font-family:monospace;
    background-size:auto;
    padding-bottom: 10px;
    padding-top: 10px;
}



a:visited{
    color: var(--link);
    font-weight: bold;

}
a {
    font-weight: bold;
    color: var(--link);
    text-decoration: none;

}

main {
    background-color: var(--background-lesser);

    width: var(--width);
    margin: auto;
}

header {
    display: flex;
    align-items: start;
    width: 100%;
    flex-wrap: wrap;
    height: 75px;
    flex-direction: row;
    position: relative;

}

#logo {
    object-fit: cover;

    height: 4.7rem;
    position: absolute;
    z-index: 2;
}

.bglogo {
    object-fit: cov;
    width: 100%;
    height: 4.7rem;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

p {
    text-align: center;
    
}

nav {
    display: flex;
    flex-direction: row;
    margin: auto;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-start;
    height: 75px;
    z-index: 2;

    
}

nav a {
    color: var(--link);

}



.button {
    display: flex;
    height: 1.5rem;
    width: 3.5rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--button);
    border-top: solid var(--button)
    ;
}

#b1 {

    border-bottom-left-radius: 50%;
}
#b3 {
    border-bottom-right-radius: 50%;
}

article { 
    display: flex;
    height: fit-content;
    flex-direction: column;
    margin: auto;
    align-content: center;
    align-items: center;
    word-spacing: -2px;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.button:hover {
    border-top: solid var(--text);
}

.title {

    margin: 0 auto;
    width: inherit;
    font-weight: bolder;
}

footer {
    display: flex;
    background-color: var(--accent-lower);
    width: 0.5 rem;
    flex-direction: row;
    margin: auto;
    height: 2rem;
    place-content: center;
    align-items: center;
    justify-content: space-around;
}



section {
    width: 100%;
    height: fit-content;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: .5rem ;
    padding-bottom: .5rem;
    justify-content: space-evenly;
}
.inner {
    width: 75%;
}
.inner p {
    text-align: justify;
}
.inner hr{
    width: 75%;
}