/*
Theme Name: TestSiteTheme
Version: 1.0
*/

/*
BODY
*/

html, body {
  width: 100%;
  overflow-x: hidden;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
    font-family: Georgia, serif;
  height: 100%;
  overflow-y: auto;
}

main {
    margin: 1rem;
    color: #fff;
}

/*
* Skills
*/

/*
* CLICKABLE BOX
*/
.clickable-box, .menu-skills-menu-container .menu .menu-item-object-skill {
    border: 8px solid #333;
    border-radius: 10% 25% / 25% 10%;
    background-color: #f0f0f0;
    padding: 0.5rem;
    color: #333;
    margin: 1rem;
}

.clickable-box *, .menu-skills-menu-container .menu .menu-item-object-skill *{
    text-align: center;
    display: block;
    text-decoration: none;
    color: #333 !important;
    margin: 0;
}

.clickable-box *:hover, .menu-skills-menu-container .menu .menu-item-object-skill *:hover{
    color: #000 !important;
}

.clickable-box, ul{
    list-style: none !important;
}

/*
HEADER
*/

header {
    position: sticky;
    top: 0;
    background-image: linear-gradient(to right, #333, transparent);

}

.header-nav .menu {
    margin: 0;
    padding: 1rem;
    list-style: none;
    display: flex;
    gap: 1rem;
}

.header-nav .menu .menu-item a {
    color: #fff;
    text-decoration: none;
    font-size: clamp(1rem, 4vw, 2rem);
}

.header-nav .menu .menu-item a:hover {
    color: #ccc;
}

.header-nav .menu .menu-item.current-menu-item a {
    text-decoration: underline;
}

/*
FOOTER
*/

footer {
    text-align: center;
    color: #fff;
}

/*
Projects
*/

.projects-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.projects-post {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 80%;
}
@media (max-width: 600px) {
    .projects-list {
        flex-direction: column;
        align-items: center;
    }

}

/*
SINGLE POST
*/

.single-post-header {
    display: flex;
    gap: 1rem;
}

.single-post-header .clickable-box {
    align-self: flex-start;
}

/*
CONTACT
*/

.contact-page {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-info li {
    padding: 0.5rem;
    border-bottom: 1px solid #333;
    color: #333;
}

.contact-info li:last-child {
    border-bottom: none;
}

.contact-page img {
    width: 60%;
}

.contact-location {
    font-style: italic;
}

.contact-image {
    height: auto;
    width: 100%;
}

/*
* FRONT PAGE
*/

.front-page-title-skills {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}