html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: border-box; }

body { 
    line-height: 26px;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    color: #777777;
    margin: 0;
}

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

.page__wrapper {
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	/* font-family: "Syne Mono"; */
	flex-direction: column;
}
.heading {
	color: #fff;
	letter-spacing: 5px;
	font-size: 2.6em;
	margin-bottom: 30px;
	padding: 0px 15px;
}
.accordion {
	max-width: 100%;
	width: calc(100% - 20px);
}
details {
	border: 2px solid #000;
	margin: 10px 0px 10px 0px;
	/* filter: drop-shadow(5px 5px 0px #0A0A0A); */
}
details:hover {
/*	filter: drop-shadow(5px 5px 4px #0A0A0A); */
}
details > summary {
	/* color: #f4de64; */
	padding: 5px 10px;
	font-size: 1.3em;
	cursor: pointer;
}
details > div.detail-contents {
	padding: 5px 10px 10px 10px;
    margin: 20px 40px 40px 40px;
    border-top: 6px solid #aaa;
    line-height: 3.6;
	font-size: .81em;
}

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
           /*  background-color: #f4f4f4; */
        }
        .container {
            width: 80%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }
        .profile, .contact, .skills {
            background-color: #fff;
            padding: 20px;
            margin: 10px;
            border-radius: 5px;
           /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
        }
        .profile {
            flex: 2;
        }
        .contact, .skills {
            flex: 1;
        }
        .profile img {
            width: 150px;
            border-radius: 50%;
            display: block;
            margin-bottom: 20px;
        }
        .profile h1 {
            margin: 0;
        }
        .profile h2 {
            margin: 10px 0;
            color: #888;
        }
        .profile div.detail-contents {
            line-height: 1.6;
        }
        .profile button {
            background-color: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px 5px 0 0;
        }
        .contact ul {
            list-style: none;
            padding: 0;
        }
        .contact ul li {
            margin: 10px 0;
            display: flex;
            align-items: center;
        }
        .contact ul li i {
            margin-right: 10px;
        }
        .skills h3, .contact h3, .profile h3 {
            border-bottom: 2px solid #ddd;
            padding-bottom: 5px;
        }
        .skills ul {
            list-style: none;
            padding: 0;
        }
        .skills ul li {
            margin: 10px 0;
        }
        .skills ul li .stars {
            /* color: #FFD700; */
        }

nav { width: 100%; padding: 0; margin: 0; height: 48px; background-color: #1F85DE; }
nav ul { padding: 0; margin: 0px; padding: 10px; }
nav ul li { color: #fff; margin: 0 14px; display: inline-block; }
[class*="icon"] { width: 33.33333%; display: block; float: left; }
[class*="block"] { width: 50%; display: block; float: left; }

li.duty-contents { 
    list-style-type: none;
    text-align: left; margin: 6px 0px;
    &::before{
        content: '\2713';
        color: #aaa;
        margin-right: 1em;
        font-weight: 900;
    }
 }
div.space { outline: 0px solid #444; }
section#grid { outline: 0px solid #ff0000; }
span#calculator_content {
    text-align: center;
    display: block;
    padding: 1em;
    width: 60%;
    margin: 0 auto;
    outline: 1px solid #000;
 }

span#calculator_content fieldset { border: 0px; }
section#grid::after { content: ""; display: table; clear: both; }
div.space::after { content: ""; display: table; clear: both; } /* Ensures proper FLOAT layout */

header { outline: 0px solid #000; margin-top: 1em; margin-bottom: 1em; width: 100%; }
footer { outline: 0px solid #000; margin-top: 1em; margin-bottom: 1em; width: 100%; }
div.footer-area { text-align: center; width: 100%; margin: 0 auto; }
section#logo img { width: 12%; display: block; margin: 0 auto; }
section#logo { margin: 1em 0em; }
section#profile-image img { display: block; margin: 0 auto; width: 102px; height: 102px; border-radius: 50%; }
section#profile-image { margin: 1.8em 0em; outline: 0px solid #000; }
section#contactForm > #email-input, #topic-ddl, #msg-input { width: 100%; margin: 10px auto; outline: 0px solid #000; }
section#contactForm span#emailConfirm { display: block; width: 100%; margin: 10px auto; outline: 0px solid #000; }
button#btnSubmit { display: block; margin: 0 auto; }

header h1 { display: block; margin: 0 auto; padding: 0.51em 1em; width: fit-content; border-bottom: 2px solid #0080FF; }

ul.list { margin: 0em; padding: 0em; }
aside.social_widget { outline: 0px solid #ccc; }

div#region-header a { margin: 0px 8px; padding: 0em 1em; border: 2px solid #aaa; color: #777; }

div#region-header a { text-decoration: none; text-align: center; width: 76%; display: block; outline: 0px solid #000; margin: 2em auto; }
div#region-header span#cta-button a:hover { cursor: pointer; color: #fff; background-color: #ef1f0b; }
/* div#region-header span#cta-button:hover { cursor: pointer; color: #fff; } */
div#region-1 span { margin: 0px 8px; padding: 0em 1em; border: 2px solid #aaa;  color: #777; background-color: #fff; transition: background-color 0.3s, color 0.3s; /* Optional: Adds a smooth transition */ }
div#region-1 span:hover { cursor: pointer; color: #fff; }
div#region-1 span#about:hover { background-color: #ff9300; }
div#region-1 span#contact:hover { background-color: #d40e3f; }
div#region-1 span#expert:hover { background-color: #1F85DE; }
div#region-1 span#resume:hover { background-color: #4CAF50; }
/* Active state styles */
div#region-1 span.active {
    color: #777; 
}
span.selected {  color: #fff; background-color: #1F85DE; }
div.block { outline: 0px solid #000; padding: 0% 12%; }
div.block h6 { width: fit-content; font-size: 16pt; outline: 0px solid #000; }
span#content section#contactForm { text-align: left; }
section#contactForm span#emailErrorMsg { display: inline-block; margin-bottom: 0em; }
section#contactForm small#emailHelp { display: block; outline: 0px solid #000; margin-bottom: 0.8em; }

section#contactForm div#msg-input textarea#feedbackMsg { width: 100%; height: 100%; }

h6.des { display: block; margin: 10px auto; width: fit-content; font-size: 16pt; outline: 0px solid #000; }
aside.social_widget > ul.list > li { margin: 0em 0.8em; display: inline-block; outline: 0px solid #ccc; }
span.copyright { margin-top: 2em; display: block; }
span#content { display: block; border-top: 0px solid #777; padding: 0em 1.2em; }
#region-1, #region-2, #region-3, #region-4 { margin-top: 1em; margin-bottom: 1em;  outline: 0px solid #777; height: auto; width: 100%; }
#region-1 { text-align: center; }
#region-2 h6 { text-align: center; }
h6#gloat { margin: 0 auto; width: 75%; border-bottom: 1px solid #777; }
img.img-logo { height: 118px; }
div.icon img { height: 116px; margin: 10px auto; display: block; } 
div.form-row { outline: 1px solid #000; margin-bottom: 1.8em; }


div#screen { outline: 1px solid #1F85DE; padding: 1em; margin: 1em auto; width: 960px; }

/* Mobile Portrait Screen Sizes */
@media only screen and (min-width: 320px) and (max-width: 479px){
    div#region-1 span { margin: 0px; }
    div#region-header a { width: 56%; }
    span#content { padding-top: 2em; text-align: center; width: 100%; }
     section#profile-image { padding-bottom: 0em; margin-top: 1.8em; } 
     section#profile-image img { display: block; margin: 0 auto; width: 206px; height: 206px; border: 0px solid #ccc;  border-radius: 50%; } 
     div.space { padding: 1em; } 
     div.icon > img.img-logo-dotnet { outline: 1px solid #000; height: 116px; } 
     div.icon > img.img-logo-php  { outline: 1px solid #000; height: 128px; } 
     [class*="icon"] { width: 78%; display: block; float: none; margin: 10px auto; } div.icon img { height: 186px;  display: block; } 
     section#contactForm > #email-input, #topic-ddl, #msg-input { width: 100%; }
}

/* Mobile Landscape Screen Sizes */
@media only screen and (min-width: 480px) and (max-width: 786px){ 
     section#profile-image img { width: 224px; height: 224px; border-radius: 50%; } 
     div#region-header a { width: 40%; }
     span#content { padding: 2.4em 0em; text-align: center; width: 100%; }
}

/* Desktop Screen Sizes */
@media only screen and (min-width: 786px) and (max-width: 991px){
    div.icon img { height: 82px; } 
     section#profile-image img { display: block; margin: 0 auto; width: 204px; height: 204px; border-radius: 50%; } 
     section#logo img { width: 4%; display: block; margin: 0 auto; }
     div#region-header a { text-decoration: none; text-align: center; width: 24%; display: block; outline: 0px solid #000; margin: 2em auto; }
     span#content { padding: 2.8em 0em; width: 60%; margin: 0 auto; }
     div.footer-area { width: 60%; margin: 0 auto; }
     section#logo img { width: 10%; display: block; margin: 0 auto; }

    }
    

    /* Desktop Screen Sizes */
@media only screen and (min-width: 992px){

    section#profile-image img { width: 196px; height: 196px; border-radius: 50%; }
    div.footer-area { width: 60%; margin: 0 auto; }
    span#content { padding: 3em 0em; width: 75%; margin: 0 auto;  }
    div#region-header a { width: 20%; }
}



/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    span#content { padding: 3.2em 0em; text-align: center; width: 80%; }
    section#profile-image img { width: 242px; height: 242px; border-radius: 50%; }
    div#region-header a { width: 16%; }
 }

/* XX-Large devices (larger desktops, 1400px and up)  */
@media (min-width: 1400px) {
    div#region-header a { width: 14%; }
    span#content { padding: 4em 0em; text-align: center; width: 86%; }
    section#profile-image img { width: 346px; height: 346px; border-radius: 50%; }
    section#logo img { width: 4%; display: block; margin: 0 auto; }
 }