html{
    scrollbar-width: wide;
    scroll-behavior: smooth;
    scrollbar-color: rgb(24, 0, 52);
    scrollbar-track-color: black;
}
::-webkit-scrollbar{
    height: 2000px;
    width: 2000px;
}
::-webkit-scrollbar-track{
    color: #000000;
}
::-webkit-scrollbar{
    width: 12px;
    height: auto;
}
::-webkit-scrollbar-thumb{
    color:#221150;
}
::-webkit-scrollbar-thumb:hover{
    color:#5f44ab;
}
html,body{
    height: auto;
    margin: 0;
    padding: 0;
    overscroll-behavior-y: none;
}
body{
    display: grid;
    background-image: url(back.avif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #000000;
    margin: 0;
    box-sizing: border-box;
    min-height: 100vh;
}
.parent{
    height: 100%;
    display: grid;
    gap: 50px;
    padding: 50px;
}
.div1{
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 6;
    background: #000000 ;
    border-style: dotted;
    border-width: 2px;
    border-color: white;
    corner-shape: notch;
    border-radius: 5%;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.div2{
    grid-row-start: 2;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 5;
    background: #000000 ;
    border-style: dotted;
    border-width: 2px;
    border-color: white;
    corner-shape: notch;
    border-radius: 5%;
    width: 100%;
    gap: 15px;
    padding: 5px;
}
/*div3{
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 2;
    grid-column-end: 3;
    background: #000000 ;
    border-style: dotted;
    border-width: 2px;
    border-color: white;
    corner-shape: notch;
    border-radius: 5%;
}*/
.div5{
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 5;
    grid-column-end: 6;
    background: #000000 ;
    border-style: dotted;
    border-width: 2px;
    border-color: white;
    corner-shape: notch;
    border-radius: 5%;
}
.div6{
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 5;
    grid-column-end: 6;
    background: #000000 ;
    border-style: dotted;
    border-width: 2px;
    border-color: white;
    corner-shape: notch;
    border-radius: 5%;
}
.div7{
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 6;
    background: #000000 ;
    border-style: dotted;
    border-width: 2px;
    border-color: white;
    corner-shape: notch;
    border-radius: 5%;
}
.blinkie{
    padding-top: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
    width: auto;
}
.blinkie:hover{
    transform: scale(1.1);
}
.blinkie2{
    margin-top: 15px;
    padding-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
    width: auto;
}
.blinkie2:hover{
    transform: scale(1.1);
}
.blinkie3{
    margin-top: 15px;
    padding-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
    width: auto;
}
.blinkie3:hover{
    transform: scale(1.1);
}
.dvd{
    margin-top: 15px;
    padding-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
    width: auto;            
}
.dvd:hover{
    transform: scale(1.1);
}
.minecraft{
    margin-top: 15px;
    padding-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
    width: auto;      
}
.minecraft:hover{
    transform: scale(1.1);
}
.sum{
    margin-top: 15px;
    padding-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
    width: auto;
}
.sum:hover{
    transform: scale(1.1);
}
.programmer{
    margin-top: 15px;
    padding-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
    width: auto;
}
.programmer:hover{
    transform: scale(1.1);
}
.images{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    object-fit: cover;
    gap: 30px;
}
.star{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    object-fit: cover;
    width: 100px; 
    height: 100px;
}
.star:hover{
    transform: scale(1.1);
}
.cd{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    object-fit: cover;
    width: 100px; 
    height: 100px;
}
.cd:hover{
    transform: scale(1.1);
}
.tux{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    object-fit: cover;
    width: 100px; 
    height: 100px;
}
.tux:hover{
    transform: scale(1.1);
}
.can{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    object-fit: cover;
    width: 100px; 
    height: 100px;
}
.can:hover{
    transform: scale(1.1);
}
/* about header */
.cat{
    display: block;
  /*  padding-top: 20px;
    padding-left: 20px;
    margin-top: 20px;
    margin-left: 20px; */
    margin-right: auto;
    width: 50%;
    max-width: 30px;
    max-height: fit-content;
    width: 60px;
    height: 60px;
    margin: auto;
    width: auto;
    height: auto;
    padding-left: auto;
    padding-right: 5px;
}
.cat:hover{
    transform: scale(1.1);   
}
.toptext{
    text-align: center;
    margin: auto;
}
.fot{
    row-gap: 7px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    object-fit: cover;
    padding-top: 6px;
}
.bun{ 
    margin-right: 10px;
    width: 50%;
    max-width: 30px;
    max-height: fit-content;
    width: 60px;
    height: 60px;
    margin: auto;
    width: auto;
    height: auto;
}