@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');

/* Scroll bar code provided by Gabriel Heisre*/

::-webkit-scrollbar {
  width: 12px; /* Width of the vertical scrollbar */
}

::-webkit-scrollbar-track {
  background: white; /* Color of the track */
}

::-webkit-scrollbar-thumb {
  background: darkblue; /* Color of the thumb */
  border: 3px solid white;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: midnightblue; /* Color of the thumb on hover */
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Jersey 10", Helvetica, sans-serif
}

html {
    background-color: rgb(0, 0, 19);
    color: white;
}

a.thumbnail{
    display: flex;
    
    background: none;
    
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
}

a {
    text-decoration: none;
    /* color: rgb(58, 58, 250); */
    color: white;
    background: inherit;
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
}


section h2 {
    margin-bottom: 1em;
    text-align: center;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em 5em;
    border-bottom: solid;
    background-color: darkblue;
    position: fixed;
    width: 100%;
}

nav div.logo-container {
    font-size: 220%;
}

nav ul {
    display: flex;
    gap: 1em;
}

nav ul li {
    display: inline;
    font-size: 1.5em;
}

div.center-content {
    display: flex;
    justify-content: center;
    width: 100%;
}

main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    margin: 7em 0.5em 2em;
    max-width: 80%;

}

main section {
    background-color: rgba(8, 8, 103, 0);
    border-radius: 1em;
    padding: 1em;   
}

main section.about{
    margin: 2em 1em 0em 1em;
    border-radius: 1em;
    outline-style: outset;
}

.tabContainer {
    overflow: hidden;
    border-radius: 0.5em;
    outline-style:outset;
    display: flex;
    justify-content:space-evenly;
}

div.tabcontent{
    display: none;
}

.tabcontent.show{
    display:block;
}

.tab{
    color: white;
    font-size: 1em;
    background-color: inherit;
    font-size: 1em;
    list-style-type: none;
    margin: 0.1em;

    border:white;
    outline: none;
    cursor: pointer;
    padding: 16px 16px;
    transition: 0.3s;
}

.selected{
    /* flex: 1em; */
    /* background-color: rgb(47, 45, 79); */
    color:white;
    font-size: 2em;
    list-style-type: none;
    
    border: none;
    outline: none;
    cursor: pointer;
    padding: 16px 16px;
    transition: 0.3s;
}

.tab:hover:not(.selected){
    /* background-color: rgb(11, 11, 102); */
    font-size: 1.2em;
}

/* .tab.active {
    background-color: rgb(7, 7, 65);
} */

section.projects{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

section.projects div.center-content{
    display: flex;
    justify-content: center;
}

section.projects div.card-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}

section.projects div.card-art-container{
    display: grid;
    gap: 1em;
}

section.projects div.card {
    outline-color: white;
    outline-style:outset;
    
    padding: 0.8em;
    border-radius: 0.5em
}

section.projects div.card img{
    outline-color: white;
    outline-style:solid;
    border-radius: 0.5em;
    width: 100%;
}

section.projects div.card ul{
    padding: 0.5em 0em 0em 0em;
}

section.projects div.card ul li{
    display: inline-flex;
    
    font-size: 1em;
    /* background-color: rgb(174, 199, 255); */
    background-color: rgb(78, 82, 91);
    color: white;
    border-radius: 0.2em;
    padding: 0em 0.5em;
    margin: 0.3em 0em 0em 0em;
    
}

div.project-description{
    padding: 0.75em 0.1em;
}

a.card{
    display: block;
    color:white;
    background: none;
}

div.card-art{
    outline-color: white;
    outline-style:outset;
    
    padding: 0.8em;
    border-radius: 0.5em;
    display:flex;
    align-items: center;
}

div.card-art img{
    outline-color: white;
    outline-style:solid;
    border-radius: 0.5em;
    width: 100%;
    cursor: pointer;
}

.image-row{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 1em;
}

.width-12{
    grid-column: span 12;
}

.width-6{
    grid-column: span 6;
}

.width-4{
    grid-column: span 4;
}

.width-3{
    grid-column: span 3;
}

.width-2{
    grid-column: span 2;
}

div.project-description a.project-title{
    background: none;
    color: white;
    padding: 0;
}

#Contact{
    border-top: solid;
    padding: 1em;
    background-color: midnightblue;
    width: 100%;
}

.contact-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.linkedIn-Button{
    font-size: large;
    color: inherit;
    background-color: inherit;
    padding: 0.25em 1em;
    margin: 1em;
}

/*Full page clickable art images code provided by Gabriel Heiser*/

#fullpage {
        display: none;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-size: 50%;
        background-repeat: no-repeat no-repeat;
        background-position: center center;
        background-color: rgba(0, 0, 0, 0.7);
        cursor: pointer;
    }

@media (min-width: 700px) {
    nav ul li .menu-btn {
        display: none;
    }
}

@media (max-width:700px){
    nav ul li {
        display: none;
    }

    nav{
        justify-content: center;
        padding: 2em 2em;
    }

    main {
        max-width: 90%;
    }

    section.projects div.card-container{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 500px){
    nav{
        justify-content: center;
        padding: 1em 2em;
    }
    main {
        margin-top: 5em ;
        width: 100%;
    }
    .tab
    {
    color: white;
    font-size: 0.25em;
    font-weight: bold;
    background-color: inherit;
    font-size: 1em;
    list-style-type: none;
    margin: 0.1em;

    border:white;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    }  
    .selected
    {
    color:white;
    font-size: 1.5em;
    list-style-type: none;
    
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    }

    section.projects div.card-container{
        grid-template-columns: 1fr;
    }
}