/* size of html */
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Tahoma;
}

body {
    background-image: url('../Images/windowsXPBackground.jpg');
    
}
/* navbar */
.navbar {
    background-color: #245DDA;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.navbar button {
    float: left;
    display: flex;
    align-items:center;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
    transition: all 500ms ease;
    background-color:#245DDA;
    border: transparent;
}

.navbar button:hover {
    background-color: #ddd;
    color: black;
}

.folder {
    margin-right: 5px;
}
.folderFull {
    max-width: 30%;
    max-height: 30%;
}
.yes {
    margin-right: 5px;
}
/* post-it */
.note {
    display:text;
    position: absolute;
    top: 30%;
    right: -5%;
    transform: translate(-50%, -50%);

    height:20%;
    width:20%;
}
.notePhone {
    display:none;
    position: absolute;
    top: 30%;
    right: -5%;
    transform: translate(-50%, -50%);

    height:20%;
    width:20%;
}
.titleNote {
    background-color: #F4DE6C;
    padding: 5px;
    border:1px solid black;
    box-shadow: 10px 12px 5px #202020;
}
.bodyNote {
    background-image: linear-gradient(#F9FFFB, #EDDB76);
    height:100%;
    padding-left: 5px;
    border: 1px solid black;
    box-shadow: 10px 10px 5px #202020;
    overflow: auto;
}
/* modal */
.modal {
    display:none;
    position: absolute;
    top: 40%;
    left: 45%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid black;
    box-shadow: 10px 10px 5px #202020;
    height:70%;
    width:50%;
}
/* modal Header */
.modalHeader {
    background-color: #245DDA;
    color: white;
    padding: 5px;
    font-family: Trebuchet monospace;
    font-size: 20px;
}
/* close header */
.close {
    position: absolute;
    right: 0px;
    top: 0px;
    max-width: 43px;
    max-height: 43px;
    border: 1px solid rgb(255, 255, 255);
}
.close:hover {
    filter: brightness(110%);
    transition: all 500ms ease;
}
.btn{
    border:none;
    position: absolute;
    right: 0px;
    top: 0px;
}
/* modal body */
.modalBody {
    overflow: auto;
    width: auto;
    height: 100%;
    padding: 5%;
}
.modalBody p{
    margin-left: 5px;
}

/* input modal */
.infoModal {
    display:none;
    position: absolute;
    top: 40%;
    left: 45%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid black;
    box-shadow: 10px 10px 5px #202020;
    height:30%;
    width:30%;
}
/* modal button */
.modalButton {
    padding: 10px 40px;
    margin: 10px;
    background-color: transparent;
    transition: all 500ms ease;
    border: transparent;
    color:white;
    text-shadow: 2px 2px 4px #000000;
}

.modalButton:hover{
    background-color:#4079f4a8;
    border: #000000a8;
}
.projectBtn {
    padding: 10px;
    background-color: transparent;
    transition: all 500ms ease;
    border: transparent;
    color:white;
    text-shadow: 2px 2px 4px #000000;
}
.projectBtn:hover {
    background-color:#4079f4a8;
    border: #000000a8;
}
/* input modal project */
.modalProject {
    display: none;
}

/* input modal contact */
.modalContact {
    display: none;
}

/* contact */
input[type=text], select, textarea {
    width: 100%; 
    padding: 12px;
    border: 1px solid #ccc; 
    border-radius: 4px;
    box-sizing: border-box; 
    margin-top: 6px; 
    margin-bottom: 16px; 
    resize: vertical
}

.buttonInput{
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.buttonInput:hover {
background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

/* responsive media */
    /* phone screen */
    @media(max-width: 500px) {
        body {
            background-image: url('../Images/iosWallpaper.png') ;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        /* navbar */
        .navbar {
            background-image: linear-gradient(rgba(26, 26, 26, 0.863), black);
            position: fixed;
            bottom: 0;
            width: 100%;
            justify-content: center;  
            align-items: center;  
            display: flex;
            z-index: 5000;
        }

        .navbar button {
            color: #f2f2f2;
            text-align: center;
            background-color: transparent;
            border: transparent; 
        }

        .navbar button:hover {
            background-color: transparent;
        }

        .folder {
            max-width: 50%;
        }
        .folder:hover {
            filter: brightness(110%);
        }

        .contact {
            max-width: 50%;
        }

        .contact:hover {
            filter: brightness(110%);
        }

        .mainBtn {
            max-width: 50%;
        }

        .iosBtn {
            max-width: 50%;
        }
        
        /* having only homebutton on navbar on phone */
        #projectNav {
            display:none;
        }
        #contactNav {
            display:none;
        }

        /* modal */
        .modal {
            display:none;
            position: absolute;
            top:44%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid black;
            box-shadow: 10px 10px 5px #202020;
            height: 88%;
            width:  100%
        }
        .btn {
            display: none;
        }
        .modalButton {
            margin: 5px;
            padding:10px 10px;
            background-color: transparent;
            transition: all 500ms ease;
            border: transparent;
            color:white;
            text-shadow: 2px 2px 4px #000000;
        }
        
        .modalButton:hover {
            background-color: transparent;
        }
        

        /* notification */
        .note {
            display: none;
        }
        .notePhone {
            display:inline-block;
            position: absolute;
            top: 25%;
            left: 25%;
            height:15%;
            width:35%;
            transition: all 500ms ease;
            
        }
        .notePhone:hover {
            display:inline-block;
            position: absolute;
            top: 25%;
            left: 50%;
            height:20%;
            width:95%;
        }
        .titleNote {
            background-color: #F4DE6C;
            padding: 5px;
            border:1px solid black;
            box-shadow: 10px 12px 5px #202020;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
        }
        .bodyNote {
            background-image: linear-gradient(#F9FFFB, #EDDB76);
            height:100%;
            padding-left: 5px;
            border: 1px solid black;
            box-shadow: 10px 10px 5px #202020;
            overflow: auto;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
        }
        .modalHeader {
            background-color: #2e2e2e;
            color: white;
            padding: 5px;
            font-family: Trebuchet monospace;
            font-size: 20px;
        }
    }