*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

canvas {
    display: block; 
    width: 100vw;
    height: 100vh;
}

:root {
    --popUp_background: rgba(56, 56, 56, 0.5) 
}

/*******************/
/* Computer Screen */
/*******************/

#computerPop {
    z-index: 1; 
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    display: none; 
    padding-bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--popUp_background);
}

#computerScreen {
    background-image : url(/Assets/UI/Pop-ups/WindowsBackground.png);
    background-repeat: no-repeat;
    background-size: 100%;
    border: 25px solid #000;
    border-bottom: 50px solid #000;
    border-radius: 15px;
    position: relative;
    inset: 0;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 90%;
    height: 95%;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1127px){
    #computerScreen {
        -o-background-size:auto 100%;
        -webkit-background-size:auto 100%;
        -moz-background-size:auto 100%;
        background-size:auto 100%;
    }
}

#computerScreen_form-window {
    width: 50%;
    margin: auto;
    border: 4px solid #0066FF;
    border-top: 4px solid #3d89fb;
    border-radius: 5px;
}

@media screen and (max-width: 900px){
    #computerScreen_form-window {
        width: 70%;
    }
}

@media screen and (max-width: 750px){
    #computerScreen_form-window {
        width: 85%;
    }
}

@media screen and (max-width: 600px){
    #computerScreen_form-window {
        width: 100%;
    }
}

#computerScreen_top {
    background: #0066FF; 
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 10px;
}

#computerScreen_top-left {
    display: flex;
    align-items: center; 
    gap: 10px;
}

#computerScreen_top-left p, #computerScreen_top-left i {
    font-weight: bold;
    font-size: 1.3em;
}

#computerScreen_top-right {
    display: flex;
    align-items: center;
}

#computerScreen_top-right i, 
#computerScreen_top-right p {
    border: 1px solid #fff;
    border-radius: 5px;
    background-image: linear-gradient(to right bottom, #4f93f8, #3d89fb, #2a7efd, #1572ff, #0066ff);
    font-size: 35px;
    height: 40px;
    aspect-ratio: 1/1;
    margin: 3px;   
    display: flex;
    justify-content: center;
    align-items: center;
}

#computerScreen_top-right p {
    padding-bottom: 10px;
}

#computerScreen_top-right i:last-of-type {
    background-image: linear-gradient(to right bottom, #f67d7d, #f26d66, #ec5e4e, #e35034, #d94315);
} 

#computerScreen_content {
    background: #ECE9D8;
    padding: 10px;
}

#contact_form {
    background: #fff;
    padding: 10px;
    margin-top: 10px;
}

.contact_Name, .contact_Mail, .contact_Message {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}

#name, #mail, #message {
   padding: 1em; 
   height: 4em;
}

#message {
    min-height: 4em;
    height: 10em;
    max-height: 20em;
    resize: vertical;
}

#form_submit {
    margin: 1em 0;
    padding: 0.6em 4em;
    border-radius: 0;
    border: 1px solid gray;
    box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.75); 
}

#form_submit:hover {
    background: #b4b2a5;
    border: 1px solid darkslategrey;
    box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,0.75);

}

#off-button {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(-10px, 40px);
}

#off-button button{
    font-size: 30px;
    background: none;
    color: #D94315;
    border: none;
}

/********/
/* Sign */
/********/
#signPop {
    z-index: 1; 
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    display: none; 
    width: 100%;
    height: 100%;
    background: var(--popUp_background);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: scroll;
}

#sign {
    display: block;
    background: white;
    width: 100%;         
    margin: auto;  
    border-bottom: 20px solid #717171;
    border-top: 20px solid #717171;
    padding: 20px 150px;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

#signTop h1 {
    text-align: center;
    margin: 10px;
    font-size: 40px;
}

#signTop hr {
    margin: 20px auto;
    border: 2px solid #717171;
    width: 50%;
}

#signContent {
    display: grid;
}

#signContent_info {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    padding: 20px; 
}

#signContent_image {
    display: flex; 
    justify-content: center; 
    padding: 0 20px; 
}

#signContent_image img {
    max-height: 100%; 
    max-width: 100%; 
    object-fit: contain; 
}

#signContent_info-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#skills {
    width: 100%;
}

#skillsTop {
    text-align: center;
    font-size: 20px;
}

#skillsTop hr {
    margin: 20px auto;
    border: 2px solid #717171;
    width: 50%;
}

#skills_content {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-self: center;
    margin-top: 40px;
}

.skill {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 15em;
    text-align: center;
    margin: 10px;
}

.skill i {
    font-size: 3em;
    margin-bottom: 10px;
}

@media screen and (max-width: 1500px) {
    #signContent_info {
        display: flex;
        flex-direction: column;
    }

    #sign {
        top: 0;
        transform: translateY(0);
    }
}

@media screen and (max-width: 900px) {
    #sign {
        padding:20px 50px;
    }
}

/*************/
/* Info Sign */
/*************/
.infoSignPop {
    z-index: 1; 
    position: absolute;
    top: 0;
    display: none; 
    width: 100%;
    height: 100%;  
    background: var(--popUp_background);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: scroll;
}

.info-sign {
    background-color: #4770FF;
    border: 40px solid #2DD6FB;
    border-radius: 15px;
    color: #fff;
    width: 90%;
    height: 90%; /* Zorg ervoor dat de hoogte automatisch wordt aangepast */
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%); /* Alleen horizontale verplaatsing */
}


.info-sign-content {
    border: 8px solid #3557D0;
    width: 100%;
    height: 100%;
    padding: 15px 50px;

}

.info-sign-title {
    font-size: 40px;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

.info-sign-content hr {
    color: #fff;
    margin: 20px auto;
    border: 2px solid #fff;
    width: 50%;
}

.info-sign-info {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Verdeel de ruimte 50/50 tussen afbeeldingen en tekst */
    height: 100%;
    gap: 40px;
}

@media screen and (max-width: 1500px) {
    .info-sign-info {
        display: flex;
        flex-direction: column;
    }

    .info-sign {
        height: auto;
        top: 0;
        transform: translate(-50%, 0);
        width: 100%;
    }

    .info-sign-content {
        padding: 15px 20px;
    }
}

.info-sign-images {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* Zorg ervoor dat de afbeeldingen in twee kolommen naast elkaar staan */
    grid-auto-rows: auto; /* Laat de hoogte van de rijen automatisch bepalen */
    gap: 10px;
    width: 100%;
    height: 100%;  
}

.info-sign-images img {
    width: 100%;
    height: auto; /* Houd de originele verhoudingen van de afbeeldingen */
    object-fit: contain; /* Zorg ervoor dat de afbeelding binnen de container past zonder te worden vervormd */
}

.info-sign-images img:only-child {
    grid-column: span 2; /* Als er maar één afbeelding is, laat deze over beide kolommen uitspreiden */
}

.info-sign-text {
    font-size: 20px;
    text-align: justify;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/************************/
/* Exit Minigame Button */
/************************/

#exitMinigame {
    position: fixed;
    top: 20px;
    left: 20px;
    visibility: hidden;
    z-index: 1000;
    width: 120px;
}

/************************/
/* Close Button */
/************************/

#closeButton {
    position: fixed;
    top: 20px;
    left: 20px;
    visibility: hidden;
    z-index: 1000;
    width: 120px;
}

@media screen and (max-width: 800px) {
    #closeButton {
        width: 60px;
    }
}