* {
    font-family:"Roboto",sans-serif;
}
a {
    font-style:normal;
    text-decoration: none;
    color:grey;
}
a:hover {
    color:darkgrey;
}

body {
    margin:0;
    background-color:rgb(34, 34, 49);
    font-size:21px;
    display:block;
    min-width:1000px;
}

img {
    vertical-align:top;
}
/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #2e2e2e;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #9f9edf;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #7b79df;
  }

.text h2 {
    font-size:36px;
    font-weight:bold;
}

/* Header */

.header {
    color:rgb(236, 236, 236);
    display: flex;
    background-color:rgb(13, 13, 48);
    padding:15px;
    justify-content:space-around;
    align-items:center;
    height:50px;
    gap:50px;
}

.header .left {
    display:flex;
    align-items:center;
    gap: 50px;
}

.header .left .github-icon {
    background-color: rgb(72, 72, 185);
    border-radius:45%;
    padding:5px;
}

.header ul {
    list-style-type:none;
    display:flex;
    margin: 0;
    padding: 0;
    gap:20px;
}


button {
    border: 1px white;
    background-color:  rgb(72, 72, 185);
    padding: 8px 16px;
    border-radius:10px;
    border-style:hidden;
    text-decoration:none;
    color:white;
    white-space:nowrap;
    overflow:hidden;
    font-size:21px;
}

button.selected {
    background-color:rgb(62, 24, 124);
}

button:hover:not(.selected),
.header .left .github-icon:hover {
    transition-property:background-color;
    transition-duration: 0.7s;
    background-color: rgb(113, 43, 226);
}



/* About */

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

.about .image {
    background-color: rgb(48, 48, 68);
    width:100%;
    display:flex;
    justify-content:center;
    padding:100px 0;
}

.about .image .profile-picture {
    border-radius:25%;
}

.about .text {
    color:white;
    margin-top: 75px;
    margin-bottom:75px;
    max-width: 700px;
    text-align:center;
    border-bottom:1px inset white;
    border-top: 1px inset white;
}

/* Projects */

.popup-container {
    color:white;
    display:flex;
    margin:100px;
    flex-direction:column;
    align-items:center;
    border-bottom:1px inset white;
    border-top: 1px inset white;
    text-align:center;
}

.projects {
    color:white;
    display:flex;
    margin:100px;
    flex-direction:column;
    align-items:center;
    border-bottom:1px inset white;
    border-top: 1px inset white;
    text-align:center;
    width:100%;
}

.projects.text:not(:first-of-type) {
    margin-top:0px;
    margin-bottom:0px;
}

.projects.text:not(:last-of-type) {
    margin-top:0px;
    margin-bottom:0px;
}

.projects a {
    text-decoration:none;
    color: grey;
}

.projects a:hover {
    color:darkgrey;
}

.projects .projects-list {
    display:inline-grid;
    justify-content:center;
    width:100%;
    grid-template-rows:repeat(auto-fill,300px);
    grid-template-columns:repeat(auto-fill,300px);
    align-items:center;
    gap:1px;
    margin-bottom:10px;
}

.projects .projects-list button {
    height:300px;
    width:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:larger;
    transition-property:background-color;
    transition-duration:2s;
    background-color:rgb(72, 72, 185);
    border:none;
    
}


.projects .projects-list button:hover {
    transition-property:box-shadow,background-color;
    transition-duration:0.15s;
    background-color: rgb(113, 43, 226);
    transform:scale(1.05);
    z-index:1;
}

.popup {
    position:fixed;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    background-color:black;
    transition-property:opacity;
    transition-duration:1s;
    opacity:0;
    z-index:-2;
}

.popup-box {
    position:fixed;
    width:50%;
    height:50%;
    opacity:1;
    background-color: rgb(49, 30, 54);
    visibility:hidden;
    display:flex;
    flex-direction:column;
    padding:2%;
    border-radius:1vw;
    font-size:medium;
}

.popup-box h2 {
    font-size: 48px;
}

.popup-box p {
    overflow-y: scroll;
    border: 1px;
    border-color: #9f9edf;
    border-style: double;
    border-radius: 5px;
    padding: 2px;
}

.popup-box #close-popup {
    width:25px;
    height:25px;
    border-radius:12.5px;
    margin:5px;
    margin-left:auto;
    background-color:rgb(72, 72, 185);
    border:none;
    font-size:0.5em;
    font-weight:900;
    padding:0;
}

.popup-box #close-popup:hover {
    background-color:rgb(113, 43, 226);
}

/* Skills and Interests */

.skills-and-interests {
    color:white;
    display:flex;
    margin:100px;
    flex-direction:column;
}

.skills {
    
    border-bottom:1px inset white;
    border-top: 1px inset white;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.skills h2 {
    text-align:center;
}

#skills-content {
    display:flex;
    justify-content:space-between;
    width: 800px;
}

.interests {
    border-bottom:1px inset white;
    border-top: 1px inset white;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.interests h2 {
    text-align:center;
}
.interests p {
    
    max-width:1000px;
}