:root {
    /*creating variables here */
    /* --home-background-color: radial-gradient(circle, #282828 70%, #836111); */
    --background-color: #1f181a;
    --text-color: #ebece4;
    --home-color: #ccc550; /* rgb(204,197,80)*/
    --swim-color: #5758c4; /* rgb(87,88,196)*/
    --project-color: #994444;  /* rgb(153,68,68) */
    --hobby-color: #55aa33; /* rgb(85,170,51) */
    
    --eye-radius: 5px;
    --eye-blur: 30px;
    font-family: "Iceberg", sans-serif;
    font-weight: 400;
    font-style:normal;
}
html {
    background-color: var(--background-color);
    margin: 0;
    width: 100%;
    height: 100%;
    display: grid;
    cursor: none;
    overflow: hidden;
    scroll-behavior: smooth;
    transition: 1s;
}
body {
    margin: 0;
    display: grid;
    place-items: center;
    grid-auto-rows: 100vh;
}
#tblock {
    position:fixed;
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    box-shadow: 0px 0px 20vw var(--background-color);
    /* left: 50%; */
    /* top: 50%; */
    left: 0;
    top: 0;
    transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out;
    visibility: visible;
    display: grid;
    place-items: center;
    z-index: 99999;
}
/* .popped { */
/**/
/* } */
#emblem {
    color: var(--background-color);
    background-image: linear-gradient(135deg,
        var(--home-color),
        var(--home-color),
        var(--home-color),
        var(--swim-color),
        var(--project-color),
        var(--hobby-color),
        var(--hobby-color),
        var(--hobby-color));
    border-radius: 400px;
    width: 60vw;
    display: grid;
    height: 60vw;
    place-items: center;
    text-align: center;
    font-size: 300px;
    font-weight: 1000;
    /* box-shadow: inset 0px 0px 40px 40px var(--background-color); */
    mask-image: radial-gradient(var(--background-color),rgba(0,0,0,0),rgba(0,0,0,0));
    font-family: "Rubik Spray Paint", system-ui;
}
#emblem.corner {
    position: fixed;
    left: 1%;
    top: 1%;
    width: 100px;
    height: 100px;
    font-size: 40px;
    font-weight: 400;
    transition: color 1s, background 1s;
}
#emblem.corner.home_page:hover {
    color: var(--home-color);
}
#emblem.corner.swim_page:hover {
    color: var(--swim-color);
}
#emblem.corner.project_page:hover {
    color: var(--project-color);
}
#emblem.corner.hobby_page:hover {
    color: var(--hobby-color);
}
#eye {
    pointer-events: none;
    width: 15px;
    height: 15px;
    position: fixed;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 9999;
    transition: box-shadow 1s;
}
#eye.home_page {
    background-image: radial-gradient(var(--home-color),rgba(0,0,0,0));
    box-shadow: 0px 0px var(--eye-blur) var(--eye-radius) var(--home-color);
}
#eye.swim_page {
    background-image: radial-gradient(var(--swim-color),rgba(0,0,0,0));
    box-shadow: 0px 0px var(--eye-blur) var(--eye-radius) var(--swim-color);
}
#eye.project_page {
    background-image: radial-gradient(var(--project-color),rgba(0,0,0,0));
    box-shadow: 0px 0px var(--eye-blur) var(--eye-radius) var(--project-color);
}
#eye.hobby_page {
    background-image: radial-gradient(var(--hobby-color),rgba(0,0,0,0));
    box-shadow: 0px 0px var(--eye-blur) var(--eye-radius) var(--hobby-color);
}
/* #sight { */
/**/
/* } */
#sidebar_left {
    height: auto;
    width: auto;
    position: fixed;
/*for testing the bar*/ 
    /* background-color: #444444; */ 
    color: var(--text-color);
    border-radius: 15px;
    left: 2%;
    display: grid;
    justify-items: start;
    align-items: center;
    top: 50%;
    transform: translate(0,-50%);
    grid-auto-rows: 8vh;
    transition: 1s;
}
#sidebar_right {
    height: auto;
    width: auto;
    position: fixed;
/*for testing the bar*/ 
    /* background-color: #444444;  */
    color: var(--text-color);
    border-radius: 15px;
    right: 2%;
    display: grid;
    align-items: center;
    top: 50%;
    transform: translate(0%,-50%);
    grid-auto-rows: 8vh;
    transition: 1s;
}
.item {
    display: grid;
    padding: 20px;
    grid-template-columns: 40% 60%;
    gap: 0px;
    align-items: center;
    justify-items: center;
    background-color: var(--background-color);
    transition: 1s;
    width: 55vw;
    height: 70vh;
    border-radius: 30px;
    max-height: 100vh;
}
/* .item.home_page:hover { */
/*     box-shadow: 0px 0px 20px var(--home-color); */
/* } */
/* .item.swim_page:hover { */
/*     box-shadow: 0px 0px 20px var(--swim-color); */
/* } */
/* .item.project_page:hover { */
/*     box-shadow: 0px 0px 20px var(--project-color); */
/* } */
/* .item.hobby_page:hover { */
/*     box-shadow: 0px 0px 20px var(--hobby-color); */
/* } */
.image {
    border-radius: 20px;
    margin: 20px;
    /* justify-self: start; */
    /* align-self: center; */
    height: 75%;
    width: 90%;
    object-fit: cover;
    transition: 1s;
    /* mask-image: linear-gradient(var(--background-color),rgba(255,255,255,0)); */
}
.image.home_page:hover {
    box-shadow: 0 0 15px var(--home-color);
}
.image.swim_page:hover {
    box-shadow: 0 0 15px var(--swim-color);
}
.image.project_page:hover {
    box-shadow: 0 0 15px var(--project-color);
}
.image.hobby_page:hover {
    box-shadow: 0 0 15px var(--hobby-color);
}
.text {
    /* justify-self: center; */
    /* align-self: center; */
    font-size:16px;
    color: var(--text-color);
    grid-column: 2 / 3;
    margin-left: 5px;
    text-align:justify;
    transition: 1s;
    justify-self: start;
    text-align-last: left;
}
.title {
    color: var(--background-color);
    font-size: 30px;
    margin: 0px;
    margin-left: 5px;
    padding: 10px 25px 10px 25px;
    border-radius: 50px;
    justify-self: start;
    transition: 1s;
    font-weight: bold;
}
.title.home_page {
    background-image: linear-gradient(var(--home-color),rgba(204,197,50,0.2));
}
.title.home_page:hover {
    box-shadow: 0px 0px 15px var(--home-color);
}
.title.swim_page {
    background-image: linear-gradient(var(--swim-color),rgba(87,88,196,0.2));
}
.title.swim_page:hover {
    box-shadow: 0px 0px 15px var(--swim-color);
}
.title.project_page {
    background-image: linear-gradient(var(--project-color),rgba(153,68,68,0.2));
}
.title.project_page:hover {
    box-shadow: 0px 0px 15px var(--project-color);
}
.title.hobby_page {
    background-image: linear-gradient(var(--hobby-color),rgba(85,170,51,0.2));
}
.title.hobby_page:hover {
    box-shadow: 0px 0px 15px var(--hobby-color);
}
span {
    display: grid;
    margin: 0;
}
#theme {
    color: var(--background-color);
    background-color: var(--text-color);
    position: fixed;
    top: 2%;
    right: 2%;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    transition: 1s;
}
#theme.home_page:hover {
    box-shadow: 0px 0px 15px var(--home-color);
}
#theme.swim_page:hover {
    box-shadow: 0px 0px 15px var(--swim-color);
}
#theme.project_page:hover {
    box-shadow: 0px 0px 15px var(--project-color);
}
#theme.hobby_page:hover {
    box-shadow: 0px 0px 15px var(--hobby-color);
}
#sight {
    color: var(--background-color);
    background-color: var(--text-color);
    position: fixed;
    bottom: 2%;
    right: 2%;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    transition: 1s;
}
#sight.home_page:hover {
    box-shadow: 0px 0px 15px var(--home-color);
}
#sight.swim_page:hover {
    box-shadow: 0px 0px 15px var(--swim-color);
}
#sight.project_page:hover {
    box-shadow: 0px 0px 15px var(--project-color);
}
#sight.hobby_page:hover {
    box-shadow: 0px 0px 15px var(--hobby-color);
}
#search {
    color: var(--background-color);
    background-color: var(--text-color);
    position: fixed;
    bottom: 2%;
    left: 2%;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    transition: 1s;
}
#search.home_page:hover {
    box-shadow: 0px 0px 15px var(--home-color);
}
#search.swim_page:hover {
    box-shadow: 0px 0px 15px var(--swim-color);
}
#search.project_page:hover {
    box-shadow: 0px 0px 15px var(--project-color);
}
#search.hobby_page:hover {
    box-shadow: 0px 0px 15px var(--hobby-color);
}

#contact {
    color: var(--background-color);
    background-color: var(--text-color);
    position: fixed;
    bottom: 2%;
    right: 2%;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    transition: 1s;
}
#contact.home_page:hover {
    box-shadow: 0px 0px 15px var(--home-color);
}
#contact.swim_page:hover {
    box-shadow: 0px 0px 15px var(--swim-color);
}
#contact.project_page:hover {
    box-shadow: 0px 0px 15px var(--project-color);
}
#contact.hobby_page:hover {
    box-shadow: 0px 0px 15px var(--hobby-color);
}
.section_button {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-image: var(--background-color);
    color: var(--text-color);
    display: grid;
    place-items: center;
    transition: 1s;
    grid-column: 1 / 2;
}
.section_button.right {
    grid-column: 2 / 3;
}
.section_button.home_page:hover {
    box-shadow: 0px 0px 15px var(--home-color);
    z-index: 1000;
}
.section_button.swim_page:hover {
    box-shadow: 0px 0px 15px var(--swim-color);
    z-index: 1000;
}
.section_button.project_page:hover {
    box-shadow: 0px 0px 15px var(--project-color);
    z-index: 1000;
}
.section_button.hobby_page:hover {
    box-shadow: 0px 0px 15px var(--hobby-color);
    z-index: 1000;
}
.section_text {
    grid-column: 2 / 3;
    margin-left: 8px;
    opacity: 0;
    color: var(--text-color);
    transition: color 1s, opacity 1s;
}
.section_text.right {
    margin-left: 0px;
    margin-right: 8px;
    grid-column: 1 / 2;
    justify-self: end;
    text-align-last: right;
}
#home_button:hover {
    box-shadow: 0px 0px 15px var(--home-color);
    z-index: 1000;
}
#swim_button:hover {
    box-shadow: 0px 0px 15px var(--swim-color);
    z-index: 1000;
}
#project_button:hover {
    box-shadow: 0px 0px 15px var(--project-color);
    z-index: 1000;
}
#hobby_button:hover {
    box-shadow: 0px 0px 15px var(--hobby-color);
    z-index: 1000;
}
.right_align {
    justify-self: end;
    text-align-last: right;
}
a {
    cursor: none;
    text-decoration: none;
    color: inherit;
    margin: 0;
    padding: 0;

}
.tech_stack {
    margin-top: 10px;
    margin-bottom: 10px;
}
#search_pop{
    z-index: 9998;
    padding: 20px;
    grid-template-columns: 40% 60%;
    gap: 0px;
    align-items: center;
    justify-items: center;
    border-radius: 30px; 
    background-color: var(--background-color);
    visibility: hidden;
    position: fixed;
    left: 50%;
    top: -100vh;
    transform: translate(-50%,-50%);
    transition: 1s;
    display: grid;
    max-height: 75vh;
    height: 200px;
    max-width: 75vw;
    width: 400px;
    grid-template-rows: 60px auto;
}
#contact_pop{
    z-index: 9998;
    padding: 20px;
    gap: 0px;
    align-items: center;
    justify-items: center;
    border-radius: 30px; 
    background-color: var(--background-color);
    visibility: hidden;
    position: fixed;
    left: 50%;
    top: -100vh;
    transform: translate(-50%,-50%);
    transition: 1s;
    display: grid;
    max-height: 75vh;
    min-height: 200px;
    max-width: 75vw;
    width: 400px;
    /* box-shadow: 0 0 15px var(--home-color); */
    /* grid-template-rows: 60px auto; */
}
#contact_list {
    display: grid;
    justify-items: start;
    align-items: center;
    align-self: center;
}
.contact_button {
    padding: 0px 10px 0px 0px;
    border-radius:40px;
    height: 50px;
    display: grid;
    align-items: center;
    justify-items: center;
    transition: box-shadow 1s;
    margin: 10px;
}
.contact_button.home_page:hover {
    box-shadow: 0 0 15px var(--home-color);
}
.contact_button.swim_page:hover {
    box-shadow: 0 0 15px var(--swim-color);
}
.contact_button.project_page:hover {
    box-shadow: 0 0 15px var(--project-color);
}
.contact_button.hobby_page:hover {
    box-shadow: 0 0 15px var(--hobby-color);
}
#contact_icon {
    font-weight: 400px;
    font-size: 30px;
    border-radius: 40px;
    height: 50px;
    width: 50px;
    display: grid;
    align-items: center;
    justify-items: center;
    /* align-self: center; */
    color: var(--background-color);
}
#contact_icon.home_page {
    background-image: linear-gradient(var(--home-color),rgba(204,197,50,0.2));
}
#contact_icon.swim_page {
    background-image: linear-gradient(var(--swim-color),rgba(87,88,196,0.2));
}
#contact_icon.project_page {
    background-image: linear-gradient(var(--project-color),rgba(153,68,68,0.2));
}
#contact_icon.hobby_page {
    background-image: linear-gradient(var(--hobby-color),rgba(85,170,51,0.2));
}
#pop_fade{
    z-index: 9997;
    visibility: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100vw;
    height: 100vh;
    /* background-color: rgba(from var(--text-color) r g b, 1); */
    background-color: color-mix(in srgb, var(--text-color), transparent 80%);
    opacity: 0;
    backdrop-filter: blur(10px); 
    transition: 1s;
}
#search_pop input[type=text] {
    cursor: none;
    border: none;
    border-radius: 15px;
    height: 40px;
    width: 80%;
    font: inherit;
    font-weight: 600;
    font-size: 20px;
    background-color: var(--text-color);
    color: var(--background-color);
    padding: 3px;
    transition: box-shadow 0.5s;
}
#search_pop input[type=text]:focus {
    border: none;
    outline:none;
}
#search_pop input[type=text].home_page:focus {
    box-shadow: 0 0 15px var(--home-color);
}
#search_list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    place-items: center;
    grid-column: 1 / 3;
    width: 100%;
    margin: 15px;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 5px;
}
#search_list li {
    width: 100%;
    display: grid;
    justify-items: center;
}
.search_item {
    color: var(--text-color);
    border: 1px solid rgba(0,0,0,0);
    text-decoration: none;
    font-size: 20px;
    width: 90%;
    height: 30px;
    border-radius: 30px; 
    display: grid;
    place-items: center;
    background-color: rgba(0,0,0,0);
    opacity:1;
    visibility: visible;
    transition: opacity 0.3s, background-color 0.5s, color 0.5s;
}
.search_item.home_page {
    /* background-image: radial-gradient( */
    /* rgba(0,0,0,0), */
    /* rgba(0,0,0,0), */
    /* rgba(0,0,0,0), */
    /* var(--home-color)); */
    box-shadow: 0 0 10px 1px inset var(--home-color);
}
.search_item.home_page:hover {
    background-color: var(--home-color);
    color: var(--background-color);
}
.search_item.swim_page {
    /* background-image: radial-gradient( */
    /* rgba(0,0,0,0), */
    /* rgba(0,0,0,0), */
    /* rgba(0,0,0,0), */
    /* var(--swim-color)); */
    box-shadow: 0 0 10px 1px inset var(--swim-color);
}
.search_item.swim_page:hover {
    background-color: var(--swim-color);
    color: var(--background-color);
}
.search_item.project_page {
    /* background-image: radial-gradient( */
    /* rgba(0,0,0,0), */
    /* rgba(0,0,0,0), */
    /* rgba(0,0,0,0), */
    /* var(--project-color)); */
    box-shadow: 0 0 10px 1px inset var(--project-color);
}
.search_item.project_page:hover {
    background-color: var(--project-color);
    color: var(--background-color);
}
.search_item.hobby_page {
    /* background-image: radial-gradient( */
    /* rgba(0,0,0,0), */
    /* rgba(0,0,0,0), */
    /* rgba(0,0,0,0), */
    /* var(--hobby-color)); */
    box-shadow: 0 0 10px 1px inset var(--hobby-color);
}
.search_item.hobby_page:hover {
    background-color: var(--hobby-color);
    color: var(--background-color);
}
/* #subject { */
/*     position: fixed; */
/*     font-size: 60px; */
/*     font-weight: 100; */
/*     bottom: 2%; */
/*     left: 50%; */
/*     transform: translate(-50%,0%); */
/*     white-space: nowrap; */
/* } */
/* #subject.home_page { */
/*     color: var(--home-color); */
/* } */