@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@media (max-width: 450px) {

    body{
        background-color: rgb(239, 239, 239);
        margin: 0;
    }

    #hero-section{
        display: grid;
        grid-template-columns: 1;
        grid-template-rows: 56px 1fr;
        background-image: linear-gradient(100deg,rgba(196, 0, 203),rgba(245, 149, 48));
        height: 100vh;
        padding: 16px;
        align-content: center;
        text-align: center;
    }

    header{
        align-content: center;
        color: whitesmoke;
    }

    h1, h2, h3{
        font-family: Lexend Deca;
    }

    h1{
        font-size: 36px;
        grid-row: 2;
        margin: 0;
    }

    a{
        color: rgb(255, 251, 242);
        font-family:Lexend Deca;
        border-radius: 4px;
        text-decoration: none; 
    }

    nav{
        grid-row: 1;
        text-align: right;
        margin: 0;
    }

    nav ul {
        display: none;
    }

    #project-link:active {
        color: white;
        background-color: rgb(150, 57, 254);
    }

    #about-link:active {
        color: white;
        background-color: rgb(150, 57, 254);
    }

    #header-description{
        font-size: 16px;
        color: rgb(255, 251, 242);
    }

    p{
        font-family: Roboto;
        line-height: 25.4px;
    }

    article {
        display: flex;
        flex-direction: column;
        margin: 24px 0 24px 0;
        padding: 16px;
    }

    #bubbl{
        margin-top: 0;
    }

    article img {
        width: 100%;
    }

    aside{
    display: grid;
    grid-template-columns: 36px 1fr;
    height: fit-content;
    margin: 16px;
    }

    aside p{
        margin: 0;
    }

    aside h2{
    grid-column: span 2;
    display: none;
    }

    aside img{
        margin-bottom: 6px;
    }

    .milestone{
        margin: 0px 0 24px 0;
    }

    .date{
        font-weight: 300;
        font-size: 14px;
        margin:0;
    }

    main{
        display: inline;
        margin: 0;
        padding: 0;
    }

    #tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        margin: 32px 16px 32px 16px;
    }

    button{
        border-radius: 10px;
        padding: 10px 16px 10px 16px;
        font-family: Lexend Deca;
        letter-spacing: 1px;
        font-weight: 700;
        color: whitesmoke;
        border: none;
        width: 100%;
    }

    #tabs button {
        font-size: 20px;
        font-weight: 800;
    }

    #tabs a{
        color: rgb(150, 57, 254);
        text-decoration: underline;
        font-weight: 500;
    }

    #tab-projects:active, #tab-timeline:active {
        padding: 8px;
        background-color: rgb(150, 57, 254);
    }

    #tab-timeline a{
        width: 100%;
        color:white;
        text-decoration: none;
        font-weight: 700;
    }

    #tab-timeline {
        background-color: rgb(150, 57, 254);
    }

    #tabs a:active {
        color: white;
    }

    #projects {
        margin: 16px;
    }

    #projects h2{
        display: none;
    }


    #phone, #adress {
        margin-bottom:16px;
    }

    #phone p, #adress p, #email p {
        padding:2px 0 2px 0;
        margin: 0;
    }

    .social {
        grid-row: 2;
        align-self: end;
        padding-bottom: 4px;
        justify-self: end;
    }

    footer {
        padding: 16px;
        display: grid;
        grid-template-columns: 1fr .2fr;
        background-image: linear-gradient(100deg,rgba(196, 0, 203),rgba(245, 149, 48));
        text-align: center;
        color: white;
        text-align: left;
    }

    footer a{
        border-radius: 4px;
        margin: 16px 0 16px 0;
        font-family: Roboto;
        font-weight: 500;
        letter-spacing: .5px;
    }

    footer p {
        font-weight: 300;
    }

    footer h2{
        margin: 16px 0 16px 0;
        grid-column: span 2;
        font-size: 32px;
    }

    .contact {
        grid-column: 1;
        gap: 24px;
        align-self: flex-end;
        grid-row: 2;
    }

    #adress, #phone, #email {
        width: auto;
    }

    #phone p, #adress p, #email p {
        padding:2px 0 2px 0;
        margin: 0;
    }

    #adress i, #phone i, #email i{
        padding: 0 0 0 8px;
    }

    .social i{
        color: white;
    }

    .dropdown-content {
        width: 60%;
        position: absolute;
        right:0;
        left:100;
        top:100;
        background-color: #f9f9f9;
        margin-right: 16px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        border-radius: 4px;
    }

    details a{
        color: blueviolet;
        display: flex;
        flex-direction: column;
        text-align: right;
        padding: 16px;
    }

    summary {
        text-align: end;
        list-style: none;
    }

    details i {
        color: white;
        position: relative;
        padding: 16px 0px 24px 16px;
    }

    details:open.dropdown-content {
        margin: 40px;
    }

    footer a:active{
        padding: 8px;
        background-color: rgb(91,0,193);
        font-weight: 700;
    }


}