body {
    display: grid;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 110px 130px auto 130px;
    min-height: 100vh;
    min-width: 1470px; 
    margin: 0;
    scroll-behavior: smooth;
    overflow-y: scroll;
    overflow-x: hidden;
}
/*header CSS*/

.header-main {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 110px;
    background-color: rgb(27, 38, 72);
    display: grid;
    column-gap: 50px;
    justify-content: space-between;
    z-index: 20;

    grid-column: 1/3;
    grid-row: 1;
}

.header-main-logo {
    width: 120px;
    height: 100%;
    grid-column: 1;
    align-self: center;
    padding-top: 10px;
}

.header-main-logo img {
    height: 90px;
}

.header-main-heading {
    color: white;
    text-shadow: 4px 4px 4px rgb(16, 23, 44);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    letter-spacing: 3px;
    margin-bottom:-20px;
    line-height: .5;

    grid-column: 2;
    align-self: start;
}

.header-main-heading:hover {
    cursor: default;
}

.header-main-heading img {
    width: 100px;
    height: 100%;
}

.header-main-email {
    width:fit-content;
    margin-right: 15px;

    grid-column: 3;
    grid-row: 1;

    padding-bottom: 15px;
    align-self: end;
    justify-items: start;
}

.header-main-email a {
    color: rgb(253, 181, 26);
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.header-main-email img {
    width: 40px;
    height: 100%;

    align-self: end;
    justify-self: end;
}

.header-main-email:hover {
    cursor: pointer;
    text-decoration: underline;
    color: rgb(253, 181, 26);
}
/*sub-header CSS*/

.header-sub-header { 
    grid-column-start: 1;
    grid-column-end:4;
    grid-row: 2;

    height: 130px;
    background-image: url("../img/hardwareSupport1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top: 6px solid rgb(253, 181, 26);

    display: flex;
    transition: 0.2s ease, 0.2s ease;
}

.header-sub-header.collapsed {
    height: 60px;
}

.header-sub-header h2 {
    color: white;
    text-shadow: 3px 3px 4px rgb(27, 38, 72);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 42px;
    letter-spacing: 2px;
    padding-top: 36px;
    padding-left:20px;

    transition: 0.2s ease;
}

.header-sub-header.collapsed h2 {
    font-size: 24px;
    align-self: top;
    padding-top: 0px;
}
/*nav bar CSS*/

.nav-header {
    background-color: rgb(27, 38, 72);
    border-bottom: 3px solid rgb(253, 181, 26);
    border-radius: 10px 10px 0 0;
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    text-indent: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 2;
    
}

nav {
	width: 265px;
    height: 350px;
    display: grid;
    margin-top: 70px;
    margin-left: 50px;
    grid-column:1;
    grid-row:3;
}
	
nav ul {
	background-color: rgb(240, 235, 229);
    line-height: 3em;
    list-style-type: none;
    padding-left: 0px;
	text-indent: 29px; 
    border-radius: 10px; 
    box-shadow: 0 0 20px grey;
}

.option:hover {
    background-color: rgb(214, 204, 191);
    border-radius: 5px;
    cursor: pointer;
}

nav a {
    color: black;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.5;

    display: block;
    position: relative;
    z-index: 1;
    padding:15px;
}

nav .option:last-of-type {
    border-bottom: 3px solid rgb(27, 38, 72);
    border-radius: 10px;
}
/*programs page-contents css*/

.page-contents {
    grid-column:2;
    grid-row:3;
    align-self: top;
    justify-self: center;
    display: flex;
}

.page-contents-left {
    justify-self: left;
    font-family: Arial, Helvetica, sans-serif;
    margin: 65px 0px 200px 65px;
    line-height: 1.5;
    display: block;
}

.page-contents-right {
    justify-self: right;
    font-family: Arial, Helvetica, sans-serif;
    margin: 80px 65px 200px 65px;
    line-height: 1.5;
    display: block;
}

.page-contents h1 {
    color: rgb(27, 38, 72);
    font-size: 22pt;
}

.page-contents h3 {
    color: rgb(27, 38, 72);
    font-size: 18pt;
    margin: 10px;
}

.page-contents p {
    line-height: 1.75;
}

.page-contents a {
    text-decoration: none;
    color:black;
    font-size: 13pt;
    line-height: 2;
    display:block; 
}

.page-contents a:hover {
    text-decoration: underline;
    color: rgb(67, 105, 178);
}

.page-contents-img {
    justify-self: center;
    align-self: center;
}

.page-contents-img img {
    width: 250px;
    height: 250px;
}
/*application content CSS*/

.studentApplication-text {
    grid-column:2;
    grid-row:3;
    align-self: top;
    justify-self: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: 50px;
    margin-left:-100px;
    line-height: 1.5;
    color: rgb(27, 38, 72);
    text-shadow: 1px 1px rgb(253, 181, 26);
    font-size:larger;
}

.studentApplication-img {
    grid-column:2;
    grid-row:3;
    align-self: top;
}

.studentApplication-img-1 {
    justify-self: left;
    margin-top: 150px;
    margin-left:280px;
    transform: rotate(30deg);
}

.studentApplication-img-2 {
    justify-self: right;
    margin-right:200px;
    transform: rotate(270deg);
}

.studentApplication-img-1 img {
    width:300px;
    height:300px;
}

.studentApplication-img-2 img {
    width:250px;
    height:300px;
}

/*

body CSS here

*/

/*form CSS*/
form { 
    font-family: Arial, Helvetica, sans-serif; 
    width: 280px; 
    height: 650px; 
    background-color: rgb(240, 235, 229); 
    border-radius: 10px;  
    box-shadow: 0 0 20px grey; 
    padding: 20px; 
    position:relative; 
    display: block; 

    grid-column-start: 2; 
    grid-column-end: 3; 
    grid-row: 3; 
    justify-self:center; 
    align-self:top; 
    margin: 230px 0px 200px 200px;
    z-index: 1; 
} 

.form-contents { 
    position:absolute; 
} 

.form-group { 
    display: block; 
    line-height: 1.6; 
    padding:7px; 
    padding-top: 13px; 
} 

.form-group label { 
    font-size: 16px; 
} 

.submitAppInput { 
    width: 230px; 
    padding: 3px; 
    font-size: 16px; 
    border: none; 
    border: 1px solid rgb(214, 204, 191); 
    background-color: rgb(226, 216, 203); 
    border-radius: 4px;  
} 

textarea { 
    border: 1px solid rgb(214, 204, 191); 
    background-color: rgb(226, 216, 203); 
    resize: none; 
    width: 260px; 
} 

.form-group button { 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    font-size: 15px; 
    margin-top: 5px; 
    padding: 5px; 

    border-radius: 4px; 
    border: 1px solid rgb(214, 204, 191); 
    background-color: rgb(226, 216, 203); 
} 

button:hover, input:hover, select:hover, textarea:hover { 
    border: 1.5px solid rgb(168, 161, 153); 
} 

button:hover { 
    background-color:rgb(211, 200, 186); 
} 

#loginForm {
    height: 260px;
    width: 260px;
    margin: 150px 0 250px 0;
}

#loginHeader {
    margin: -20px -20px 10px;
}

/*darkmode functionality CSS*/

.darkmode-toggle {
    font-size: 16px;
    font-weight: bold;
    width: 220px;
    height: 35px;
    padding: 4px;
    background-color: rgb(226, 218, 207);
    box-shadow: 2px 2px 0px rgb(77, 74, 73);
    border: 2px solid rgb(148, 142, 137);

    margin-left: 13%;
    margin-top: 6%;
    justify-self:start;
    align-self:start;
    grid-column: 2;
    grid-row: 3;
}
/*footer CSS*/

.footer {
    position: relative;
    display: grid;
    width: 100vw;
    height: 210px;
    background-color: rgb(27, 38, 72);
    border-top: 6px solid rgb(253, 181, 26);
    grid-row: 4;
    z-index: 10;
    align-self: end;
}

.footer-bubble {
    height: 310px;
    width: 310px;
    background-color: rgb(243, 220, 170);
    list-style-type: none;
    border-radius: 50%;
    z-index: 20;

    display: grid;
    justify-content: center; 
    align-items: center;
    padding: 10px; 
    bottom: 0;
    right: 200px;
    box-sizing: border-box; 

    grid-column: 3;
    grid-row: 4;
    align-self: end;
    justify-self: end;
    position: relative;
}

.footer-bubble-text {
    color: rgb(27, 38, 72);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    margin: 0;
    text-align: center;
    line-height: 2;
    font-weight: 600;
}