html, body {
    margin: 0;
    height: 100%;
    background-color: blueviolet;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background-size: 40px 40px;
    background-color: white;
    background-image: 
    linear-gradient(to right, rgba(222, 221, 221, 0.397) 1px, transparent 1px),
    linear-gradient(to bottom,rgba(222, 221, 221, 0.397) 1px, transparent 1px);
}

body.no-scroll,
html.no-scroll {
    overflow: hidden;
    height: 100vh;
}

.reponame {
    text-decoration: none;
    font-size: 5vh;
}

.repodescription {
    font: 100;
}

.repodiv {
    margin: 2vh;
    margin-left: vw;
    border: solid 3px black;
    border-radius: 2vh;
    padding: 4vh;
    width: 25vw;
    background-color: #e9e9e9;
    box-shadow: 10px 10px 0px #e86112;
    transition: zoom 0.3s ease-in-out;
}

.repodivanimation {
    animation: 1.5s projectpopup ease forwards !important; 
}
.repodiv:hover {
    box-shadow: 10px 10px 0px #dfdc28;
    zoom: 102%;
}

.title {
    font-size: 12vh;
    font: serif;
    animation: 2s namepopup ease-in-out forwards;
}

.usernameinput {
    padding: 12px 16px;
    border-radius: 2vh;
    border: 1px solid #ccc;
    width: 280px;
    box-shadow: 10px 8px 0px black;
    animation: 1.5s inputpopup ease-in-out forwards;
}

.usernameinputdiv {
    margin-bottom: 1vh;

}

.searchbuttondiv {
    margin-bottom: 2vh;
    
}

.profilepicture {
    height: 5vw;
    width: 5vw;
    border-radius: 123rem;
}

.contentdiv {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}

.projectstitle {
    display: none;
    font-size: 10vh;
    animation: 2.5s projectnamepopup ease-in-out forwards;
}
.projectstitlediv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.projectsdiv {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: auto;

}

.resultdiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    align-items: center;
}

.titlediv {
    color: #1F2937;
    font: sans-serif;
    
}

.searchbutton {
    background-color: #e86112;
    padding: 3vh 5vw;
    cursor: pointer;
    border: none;
    border-radius: 4vh;
    margin: 3vh;
    animation: 1.5s buttonpopup ease-in-out forwards;
    box-shadow: 10px 8px 0px black;
    transition: zoom 0.3s ease-in-out;
}

.searchbutton:hover {
    background-color: #e88812;
    zoom: 103%;
}

@keyframes buttonpopup {
    0% {
        transform: translateY(1000px);
    }
    40% {
        transform: translateY(100);
        box-shadow: none;
    }
    100%{
        transform: translateY(0);

    }
}

@keyframes inputpopup {
    0% {
        transform: translateX(500px);
        box-shadow: none;
    }
    30% {
        box-shadow: none;
    }
    100%{
        transform: translateX(0);
        
    }
}

@keyframes namepopup {
    0% {
        transform: translateY(-1000px);
    }
    85% {
        box-shadow: none;
    }
    100%{
        transform: translateY(0);

    }
}

@keyframes projectpopup {
    0% {
        transform: translateX(1000px);
    }
    85% {
        box-shadow: none;
    }
    100%{
        transform: translateX(0);
    }
}

@keyframes projectnamepopup {
  0% {
        transform: translateX(-1000px);
    }
    85% {
        box-shadow: none;
    }
    100%{
        transform: translateX(0);
    }  
}

.usernameinput::placeholder {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.usernameinput:focus::placeholder {
    opacity: 1;
}

.backbutton {
    display: none;
    padding: 1.5vh 2vw;
    font-size: 15px;
    background-color: #e86112;
    border: none;
    border-radius: 1vh;
    margin: 4vh;
    left: 20%;
    box-shadow: 5px 5px 0px;
    animation: 1s namepopup ease-in-out forwards;
    cursor: pointer;
    transition: zoom 0.3s ease-in-out;
    width: 9vw;
}
.backbutton:hover {
    background-color: #e88812;
    zoom: 103%;
}

.titlecarddiv {
    margin: 2vh;
    border: solid 3px black;
    border-radius: 2vh;
    padding: 6rem 2rem ;
    align-self: center;
    width: 40vw;
    height: 1400vh;
    background-color: #e9e9e9;
    box-shadow: 10px 10px 0px #e86112;
    transition: zoom 0.3s ease-in-out;
    display: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    animation: 2s projectpopup ease;
    overflow: hidden;
}

.titlecarddiv:hover {
    zoom: 103%;
    box-shadow: 10px 10px 0px #dfdc28;
}

.nameimagecard {
    width: 5vh;
    height: 5vh;
    border-radius: 4vh;
    margin-right: 2vw;
}

.namecard {
    font-size: 4vh;
}

.imgnamediv {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    height: 6vh;
}

.followersp {
    margin-right: 2vw;
    margin-bottom: 3vh;
}

.repos {
    margin-right: 1vw;
}

.apiinput {
    display: none;
    border-radius: 2vh;
    border: 1px solid #ccc;
    width: 60vw;
    box-shadow: 5px 5px 0px black;
    height: 4vh;
    margin-right: 3vw;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 1s ease;

}

.apiinput::placeholder {
    opacity: 0;
    margin-left: 8px;
    transition: opacity 0.6s ease;
}
.apiinput:focus::placeholder {
    opacity: 1;
}

.apibutton {
    background-color: #e86112;
    border: none;
    border-radius: 8px;
    padding: .5vh 2vw;
    font-size: 16px;
    margin-right: 2vw;
    box-shadow: 5px 5px 0px #000;
    cursor: pointer;
}

.apibutton:hover {
    background-color: #e88812;
}

.apibuttondiv {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    width: 100%;
    margin: 1vh;
    animation: 3s inputpopup ease-in-out;
}

.contentinfodiv {
    overflow-x: auto;
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: none;
}