body {
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
    height: 1000px;
    width: 100px;
    overflow-x: hidden;
}

.naarhetmidden {
    margin: auto;
}

     


#Image {
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
   position: fixed;
   object-fit: cover;
   z-index: -10;
}

#blok1 {
    height: -10vh;
    width: 100vw;
    position: fixed;
    object-fit: cover;
    z-index: 400;
    background: rgba(0, 0, 0, 0.479);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.434) 0%, rgba(0, 0, 0, 0.401) 100%);
    top: 0px;
    left: 0px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: rgb(255, 255, 255)
}


#blok2 {
    height: -10vh;
    width: 100vw;
    position: relative;
    object-fit: cover;
    background: rgba(0, 0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
    top: -800px;
    left: 0px;
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    color: rgb(255, 255, 255);
    -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  z-index: -9;
   
    
    
}


#blok3 {
    height: -10vh;
    width: 100vw;
    position: relative;
    object-fit: cover;
    background: rgba(0, 0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
    top: -790px;
    left: 0px;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    color: rgb(255, 255, 255);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    z-index: -8    

    
}

#Wit {
    background-color: rgb(215, 215, 215);
    position: relative;
    width: 80vw;
    height: 130vh;
    bottom: -100px;
    text-align: center;
    font-size: 28px;
    border-radius: 10px;
    left: 135px;
    top: -300px;
    z-index: -6;
    border: 10px solid rgb(73, 73, 73);
   
}

#portfolio {

    height: -10vh;
    width: 100vw;
    position: relative;
    object-fit: cover;
    background: rgba(0, 0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
    top: -1300px;
    left: 0px;
    font-size: 80px;
    font-weight: bold;
    text-align: center;
    color: rgb(195, 236, 239);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    z-index: -6    
 
    
}

#eilandknop{
    width: 10vw;
    height: -10vh;
    top: -900px;
    left: 268px;
    position: relative;
    background-color: white;
    border: 5px solid rgb(73, 73, 73);
    border-radius: 10%;
    z-index: 1;
}

#eilandimage{
    width: 18vw;
    height: 30vh;
    position: relative;
    box-shadow:0 0 20px rgb(118, 173, 207) ;
    top: -1300px;
    left: 200px;
    border: 5px solid rgb(73, 73, 73);
    border-radius: 10%;
    background-image: url(image/Schermafbeelding\ 2024-10-11\ 091758.png);
background-size: 280px 280px;
}
#eilandimage:hover  {
    background-image: url(image/Schermafbeelding\ 2024-10-30\ 104147.png);
    }


#Smiley{
    width: 18vw;
    height: 30vh;
    position: relative;
    top: -1560px;
    left: 615px;
    box-shadow:0 0 20px rgba(235, 235, 133, 0.97) ;
    border: 5px solid rgb(73, 73, 73);
    border-radius: 10%;
    background-image: url(image/Schermafbeelding\ 2024-10-11\ 131434.png);
background-size: 260px 260px;
}
#Smiley:hover  {
background-image: url(image/Schermafbeelding\ 2024-10-30\ 095220.png);
}

#smileyknop{
    width: 10vw;
    height: -10vh;
    top: -930px;
    left: 680px;
    position: relative;
    background-color: white;
    border: 5px solid rgb(73, 73, 73);
    border-radius: 10%;
    z-index: 1;
}

#smoesjesknop{
    width: 10vw;
    height: -10vh;
    top: -955px;
    left: 1100px;
    position: relative;
    background-color: white;
    border: 5px solid rgb(73, 73, 73);
    border-radius: 10%;
z-index: 1;
}


#smoesjesbox{
    width: 18vw;
    height:  30vh;
    position: relative;
    top: -1815px;
    left: 1030px;
    box-shadow:0 0 20px rgb(65, 163, 128) ;
    border: 5px solid rgb(73, 73, 73);
    border-radius: 10%;
    background-image: url(image/Schermafbeelding\ 2024-10-11\ 132559.png);
background-size: 280px 280px;
}
#smoesjesbox:hover  {
    background-image: url(image/Schermafbeelding\ 2024-10-30\ 100904.png);
    }

#pixelartknop{
    width: 10vw;
    height: -10vh;
    top: -560px;
    left: 268px;
    position: relative;
    background-color: white;
    border: 5px solid rgb(73, 73, 73);
    border-radius: 10%;
z-index: 1;
}


#vriendenboekknop{
    width: 10vw;
    height: -10vh;
    top: -618px;
    left: 1090px;
    position: relative;
    background-color: white;
    border: 5px solid rgb(73, 73, 73);
    border-radius: 10%;
z-index: 1;
}


#pixelart{
    width: 18vw;
    height: 30vh;
    top: -1650px;
    left: 200px;
    box-shadow:0 0 20px greenyellow ;
    position: relative;
    background-color: white;
    border: 5px solid rgb(73, 73, 73);
    border-radius: 10%;
    background-image: url(image/Schermafbeelding\ 2024-10-29\ 091541.png);
background-size: 275px 275px;
}
#pixelart:hover  {
    background-image: url(image/Schermafbeelding\ 2024-10-30\ 104751.png);
    }

    #disconnectknop{
        width: 10vw;
        height: -10vh;
        top: -590px;
        left: 680px;
        position: relative;
        background-color: white;
        border: 5px solid rgb(73, 73, 73);
        border-radius: 10%;
    z-index: 1;
    }

    #disconnect{
        width: 18vw;
        height: 30vh;
        top: -1910px;
        left: 610px;
        box-shadow:0 0 20px rgb(97, 54, 89) ;
        position: relative;
        background-color: white;
        border: 5px solid rgb(73, 73, 73);
        border-radius: 10%;
        background-image: url(image/Schermafbeelding\ 2024-10-31\ 104348.png);
    background-size: 275px 275px;
    }
    #disconnect:hover  {
        background-image: url(image/Schermafbeelding\ 2024-10-31\ 104400.png);
        }