.container {
    display: grid;
    grid-template-columns: 100px;
}

.flex-container {
    display: flex;
    margin-bottom: 240%;
}

.content {
    flex-direction: row;
    
}

h1 {
    color: #f7768e;
    font-weight: bolder;
    font-size: 70px;
    font-family: Roboto Slab;
    margin-left: 6rem;

}

.header {
    padding-top: 2em;
    width: 650px;

}

.info {
    color: #7aa2f7;
    font-size: 1.45rem;
    font-family: inter;
    width: 500px;
    padding-left: 1rem;
    margin-left: 6rem;
    border-left: 5px #f7768e solid;
    

}

body {
    background-color: #1a1b26;
    font-size: 15px;
}

.theme {
    background-color: #f7768e;
    border-color: #f7768e;
}

.palette {
    background-color: #7aa2f7;
    border-color: #7aa2f7;
}

.contact {
    background-color: #9ece6a;
    border-color: #9ece6a;
}

button {
    border-radius: 10px;
    padding: 10px;
    font-size: 30px;
    margin-left: 0.7rem;
    margin-top: 1rem;
    border:none;
 
}

.buttons {
    padding: 1rem 5rem;
}

.buttons a {
    text-decoration: none;
    color:#1a1b26;
    font-weight: 600;
    font-family: inter;

}

.infolink {
    color: #7dcfff;
    text-decoration: none;

}

.infolink:hover {
    text-decoration: underline;

}



.f7768e {
    background-color: #f7768e;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.ff9e64 {
    background-color: #ff9e64;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.e0af68 {
    background-color: #e0af68;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.cfc9c2 {
    background-color: #cfc9c2;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.color9ece6a {
    background-color: #9ece6a;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.color73daca {
    background-color: #73daca;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.b4f686 {
    background-color: #b4f6f8;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.color2ac3de {
    background-color: #2ac3de;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.b4f9f8 {
    background-color: #b4f9f8;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.color2ac3de {
    background-color: #2ac3de;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.color7dcfff {
    background-color: #7dcfff;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.color7aa2f7 {
    background-color: #2aa2f7;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.bb9af7 {
    background-color: #bb9af7;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;

}

.color1a1b26 {
    background-color: #1a1b26;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.c0caf5 {
    background-color: #c0caf5;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.a9b1d6 {
    background-color: #a9b1d6;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.color9aa5ce {
    background-color: #9aa5ce;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.color565f89 {
    background-color: #565f89;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;
}

.color414868 {
    background-color: #414868;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;

}

.color24283b {
    background-color: #24283b;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;

}

.color1a1b26 {
    background-color: #1a1b26;
    border: 2px solid #9aa5ce;
    width: 100px;
    height: 100px;
    margin: 5px;
    text-align: center;
    border-radius: 10px;
    align-content: end;


}

.colortext p {
    background-color: #414868;
    color: #9aa5ce;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    width: 100%;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: auto;
    font-family: Fira code;
    font-size:0.95rem;
}



.color-content {
    display: flex;
    margin-top: 6rem;
    margin-left: 300%;
    padding-right: 200%;

}

.color-row {
    flex-direction: row;
    display: flex;
    gap:10px;
    padding-bottom: 10px;
}

footer {
    display: flex;
    flex-direction: row;
    background-color: greens;
    padding-left: 55px;
    border-top: 1px solid #565f89;
    height: 120px;
}


ul {
    list-style: none;
    color: #565f89;
    padding: 0;
}

.menu-h2 {
    color: #9aa5Ce;
    text-align: left; 
    font-size: 20px;
    font-weight: normal;
    font-family: inter;
    height:15px;
}

.link-list {
    margin-left: 10px;
    margin-right: 95px;
    font-family: inter;
    font-size: 15px;
}

.link-list a {
    color: #565f89;
    text-decoration: none;
}

.link-list a:hover {
    text-decoration: underline;
}